The Type System
Stop choosing sizes. Start deriving them.
Most type looks amateur for one boring reason: the sizes were guessed. A 17 here, a 24 there, a 31 because it “looked big enough.” Numbers with no relationship to each other never quite feel like one system.
A type system fixes that with a single decision — one base size, one ratio — and lets the maths do the rest. Every heading becomes a multiple of the last, so the whole page sounds like one instrument instead of a pile-up. Build yours in the lab below.
The cost of guessed sizes
When sizes are picked by eye, two things go wrong. Levels a few pixels apart (17 and 19) read as a mistake, not a hierarchy. And nothing is reusable — the next page invents its own numbers, so the product slowly stops feeling like one product.
A system replaces taste with a rule you can hand to anyone. The decision shrinks from “what size should this be?” to “which step on the scale?” — and the answer is always already there.
One ratio, every size
A modular scale is a base size multiplied by a ratio, again and again. Base 16 with a ratio of 1.25 gives 16 → 20 → 25 → 31 → 39… The ratios come from music: a small ratio is a gentle, tight scale; a large one (the golden 1.618) is dramatic, with big jumps.
Pick the ratio for the mood: tight scales suit dense, information-heavy UI; wide scales suit bold, editorial pages. Then never invent a size off the scale again.
Size is only half of it
You don’t need six heading sizes. You need three or four levels the eye can tell apart instantly — and size isn’t the only lever. Weight does just as much work: a bold 18px outranks a regular 22px.
Combine them. Pair a big step on the scale with a heavier weight for a true headline; use weight alone to separate a subhead from body without adding another size. Fewer sizes, clearer levels.
Lock text to a grid
Vertical rhythm is the system applied downward: line-heights and spacing built on one base unit (say 8px) so every line of text lands on an invisible baseline grid. Off-grid spacing — a 13px margin here, a 1.37 line-height there — is what makes a page feel subtly restless.
Flip the demo. In rhythm mode the text snaps to the orange lines; in ad-hoc mode it drifts off them, and you can feel the difference before you can name it.
A page in rhythm
When line-height and spacing are multiples of one base unit, every baseline lands on the grid. The eye reads a steady beat it never has to notice.
Break that — one odd margin, one off line-height — and the text drifts off the lines. Nothing looks obviously wrong, yet the page feels restless.
Fix the ad-hoc sizes
This heading stack was sized by eye — 19, 27, 33, with body at 15. Hit Snap to scale and watch them lock onto a clean 16 / 1.25 system.
And the body copy underneath, which should be the calm baseline every other size is measured against.
- Body at 15px, off the scale
- Sizes guessed: 19 / 27 / 33
- No shared ratio between levels
One scale, whole product
What a strict scale looks like running across a real interface — next to the same screen sized by eye.
Three clear levels from a single scale. Nothing is guessed; every size is already on the ladder.
The top levels are too close to read as a hierarchy, and nothing is reusable on the next screen.
The scale is only the size axis of hierarchy. Pair a step up with a heavier weight — deliberate difference — to make a true headline, while keeping colour and alignment the same so the page still reads as one system. Size and weight contrast; colour and position agree. That balance is what separates a hierarchy from a circus.
The System glossary
Six words for thinking in systems, not sizes. Tap a card to flip it.
Questions you actually ask
Run the numbers
Mixed 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.