How to use the Font Identification Quiz
- Pick a difficulty. Easy offers one typeface from each big family (serif, sans, monospace, script), so you only need to recognize the genre. Medium keeps all four answers in the same family. Hard gives you three hand-picked look-alikes and shows only a pangram, with no display word or glyph row to lean on.
- Study the sample and answer. Click one of the four names or press 1–4 on your keyboard. The glyph row (a, g, R, Q, y, &, 3, 7, 0) contains the letters that most often give a typeface away.
- Read “How to spot it”. After each answer you get the family, the designer and the two or three details that identify the face, plus the same short sample set in all four options side by side. Copy CSS gives you the import line and
font-familydeclaration if you want to use it. - Press Enter for the next font. After ten questions you see your score, every answer you gave, and your best for that difficulty. Fonts you missed come back more often in later rounds, and the counter under the quiz tracks how many of the 54 faces you have named correctly at least once.
What a trained eye checks first
People who identify fonts quickly are not memorizing 54 pictures. They run through a short checklist, and most typefaces fail out of the candidate list within three or four questions.
Is there a serif, and what kind? Bracketed serifs flow into the stem with a curve (Lora, Libre Caslon Text). Hairline serifs with no bracket are typical of Didone faces such as Bodoni Moda. Slab serifs are thick blocks (Arvo, Roboto Slab), and wedge serifs taper like a chisel (Merriweather, PT Serif).
How big is the lowercase? The x-height, the height of a lowercase x, decides how large a face looks at a given point size. It varies far more than most people expect, as the measurements below show.
Where is the stress? Draw a line through the thinnest parts of the letter o. In Garamond-style faces that line tilts, like a broad pen held at an angle. In Baskerville and Bodoni it stands upright.
One story or two? A double-story a has a bowl and a hood on top; a single-story a is a circle and a stem. The same goes for g: the “binocular” double-story g of Open Sans, Work Sans and Source Sans 3 is rare among modern sans serifs and narrows the choice instantly.
What do the numbers do? Old-style figures rise and fall like lowercase letters (Playfair Display, Cormorant Garamond, Raleway, Zilla Slab). Lining figures all sit at cap height. Designers love to hide personality in the numerals and the ampersand.
X-height, measured
We rendered each face at 100 px in Chrome and measured the ink of a lowercase x and a capital H. The spread is large: at the same 16 px size, Merriweather’s lowercase is about 8.9 px tall and Cormorant Garamond’s about 6.2 px, which makes Merriweather’s lowercase 44% taller.
| Typeface | x-height at 100 px | Cap height at 100 px | x-height ÷ cap height |
|---|---|---|---|
| Cormorant Garamond | 38.6 px | 62.5 px | 0.62 |
| EB Garamond | 40.5 px | 65.3 px | 0.62 |
| Josefin Sans | 41.4 px | 72.3 px | 0.57 |
| Crimson Text | 42.4 px | 64.6 px | 0.66 |
| Lora | 50.0 px | 70.0 px | 0.71 |
| Libre Baskerville | 53.0 px | 77.0 px | 0.69 |
| Roboto | 52.8 px | 71.1 px | 0.74 |
| Open Sans | 53.5 px | 71.4 px | 0.75 |
| Inter | 54.6 px | 72.8 px | 0.75 |
| Poppins | 54.8 px | 69.7 px | 0.79 |
| Merriweather | 55.6 px | 74.3 px | 0.75 |
Josefin Sans is the outlier worth remembering: its lowercase barely clears half the cap height, which gives it that 1920s poster look and makes it easy to tell from Jost.
Look-alike pairs and the one detail that splits them
| Pair | Look at | The tell |
|---|---|---|
| Open Sans / Roboto | g | Open Sans has a double-story g; Roboto’s is single-story |
| Work Sans / Inter | g | Same test: Work Sans is binocular, Inter is not |
| Poppins / DM Sans | a | Poppins uses a single-story a; DM Sans a double-story one |
| Playfair Display / DM Serif Display | 3 | Playfair’s 3 hangs below the baseline; DM Serif’s sits on it |
| EB Garamond / Cormorant Garamond | 3, hairlines | Cormorant has old-style figures and much thinner hairlines |
| Oswald / Bebas Neue | lowercase | Bebas Neue has no lowercase at all |
| Roboto Mono / Source Code Pro | 0 | Slashed zero versus dotted zero |
| Courier Prime / IBM Plex Mono | 0 | Courier Prime’s zero is plain; Plex Mono’s is dotted |
| Montserrat / Raleway | W | Raleway’s W crosses its middle strokes |
| Nunito / Quicksand | a | Nunito’s a is double-story; Quicksand’s single-story |
Tips from practice
Start with the a and the g. Two questions — one story or two? — split most sans serifs into small groups before you look at anything else. Only then compare widths and endings.
Check the numerals and the ampersand next. They are drawn last and with the most freedom, so they vary more than letters. Playfair Display’s curly ampersand gives it away even in an upright headline.
Compare at the same size, side by side. Look-alikes only separate when you see them next to each other. The comparison strip after each question exists for that reason; for your own projects, the Font Pairing Generator lets you set candidates in your real heading and body text.
Treat automatic identifiers as a shortlist. Image-matching services such as WhatTheFont often return five near-misses. Run the checklist above on their suggestions before you buy or install anything, especially from a photo taken at an angle.
Read the license, not the website it came from. A font downloaded from a free-fonts site may be “free for personal use” only. Everything in this quiz is open-licensed through Google Fonts, which is one reason designers learn these faces first.