Reading Type
Before you can choose a font, you have to learn to see one.
Most people look at a typeface and see only “text.” Designers see shapes — the height of an x, the openness of a counter, the cut of a terminal — and those shapes quietly decide whether a font is legible at 14px or falls apart.
This module hands you the vocabulary and the eye. Once you can name the parts, every later decision — pairing, sizing, setting — gets easier, because you finally know what you’re looking at.
The parts of a letter
Every letter is built on invisible lines — the baseline it sits on, the x-height the lowercase reaches, the cap height of the capitals, and the ascenders and descenders that poke above and below. The enclosed white shapes (the hole in an o) are counters; the ends of strokes are terminals.
These aren’t trivia. They’re the levers a type designer pulled — and the features you read to predict how a font will behave. Find them below.
The five families
Typefaces sort into a few broad families, and each carries a default voice. You don’t need the full history — you need to recognise them on sight and know what each tends to say.
Why x-height rules small sizes
Here’s the single most useful thing anatomy teaches: two fonts at the same point size can look completely different sizes, because the lowercase letters — the ones you actually read — can be tall or short relative to the capitals.
A tall x-height with open counters stays clear and roomy at 14–16px, which is why interface fonts have them. A low x-height looks elegant large, but muddies and shrinks at body sizes.
Anatomy, chosen on purpose
Two products, two deliberate anatomical choices — each fits the job it does.
Active users 8,201
Churn 1.2%
An interface face like Inter stays crisp at 14px in dense data — the lowercase never closes up.
A face like Playfair is gorgeous large, where the delicate strokes and modest x-height read as refinement, not strain.
Anatomy is the foundation the other modules build on. A tall x-height lets you use a smaller size and still read — changing your scale. Open counters survive a heavier weight without clogging — changing your hierarchy. You can’t set, size, or pair type well until you can see the shapes underneath.
The Anatomy glossary
Six words that turn “it looks off” into a diagnosis. Tap a card to flip it.
Questions you actually ask
Name the part
Ten questions in seven formats — multiple choice, multi-correct, fill-in, match, order, read-think-connect and write-your-own — each with layered hints: a nudge, the reasoning, then a deeper connection. Served from the question bank, never hardcoded.