Typography, JavaScript

Learning to identify typefaces

I designed and built a typography quiz that helps the eyes focus on the anatomy of a specific typeface.

Typography Quiz

Project details

My role: I was the sole person working on this app.

Methods and Skills: UI Design, UX and Interaction Design, JavaScript

Table of contents

  1. Situation & Problem
  2. Solution
  3. Conclusion

Situation & Problem

"Can you tell me what typeface that is?" I've been asked this question a few times over the years.

The Problem

How do you develop your typeface-identifying ability? There are apps that display some text, styled in a particular typeface, and ask you to identify the typeface. I'm looking for something that forces me to focus on the anatomy of the type.

The Solution

I decided to create a quiz that highlighted and explained the defining characteristics of the typeface in question.

Give the quiz a try.

The "Question" view

This screen seems to be 90% epicenter - the giant word with the 'highlighting' of the typeface anatomy. I explored a few options before landing on the dashed circles and lines.

System Quiz

The "Final Score" view

Quiz takers enter through the home page, go through a series of question screens, and end on the final score page. What would I expect to see after I answered the last question?

For me, it was the following:

  • my score
  • my answers
  • the correct answers
  • some explanation for each answer
  • my options for where to go next
  • some indication of how awesome I am (or not)
  • I don't want to travel to other pages to satisfy these points
  • how I did compared to other quiz takers
System Quiz score

Conclusion

I made the decision to focus on the early steps in the interface design process and reserve styling for later. I've tried the opposite approach - focusing on things like color, typography, etc. and trying to make things look great from the start - but that always delayed project completion and left important problems unsolved. I think this helped me focus on the purpose of the project.

I built this quiz to learn about typefaces and JavaScript. This was a great experience exercising my design muscles to build something for myself.

Give the quiz a try