Learn Typographic Anatomy

Teaching users about typography through simple interactions

An animation showing the on load function of the website

Overview

This website teaches users about typographic anatomy including x-height, serifs, and bowls by encouraging users to interact with each letter in the displayed word, Typography. A short quiz tests the user’s newfound knowledge.

Role

Visual designer, writer, developer

Tools

  • Brackets (development)
  • Photoshop (image editing)
  • Illustrator (design mockups)
  • Pencil and paper (pseudo-code, flowchart, programming)

Timeframe

4 weeks

Method

The webpage is built dynamically using Javascript and jQuery. Once the quote fades in, an array of letters is built on the page. A hint encourages the user to mouse over each letter. As they hover over each letter a portion of it is highlighted and a definition of the highlighted element, as well as accompanying information appears below the word.

As the user hovers over each letter, the anatomy definitions change
A quiz tests the user's knowledge and gives them an expertise level

A 5-question quiz prompts the user to correctly identify the anatomical term highlighted on each letter. A final tally gives the user a score, a designation of either master, student, or amateur and an option to retake the quiz or return to the original screen. Users can review their answers, or retake the quiz.

Opportunities

The goal of this website was to focus on interactive programming, but I believe this tool could be expanded to help teach design students the basics of typography.

Improvement areas

  • Allow users to type in their own letters and view their anatomical properties
  • Show users improvement in their quiz scores over time
  • Compare and contrast various typefaces to illuminate anatomical differences