Type scales that survive real content
A ratio that looks perfect in the specimen falls apart at 40 characters. What to check instead.
Every type scale looks good in the specimen, because the specimen uses one line per size. Real pages use six sizes at once, in paragraphs of varying length, and the ratio that produced a beautiful column of sample text produces a mess.
The usual advice is to pick a ratio — 1.25, 1.333, the golden ratio if you are feeling romantic — and generate sizes from it. This works for the top three sizes and stops working below them. A 1.333 scale from a 16px base gives you 12px for small text, which is too small for a caption anyone over forty will read, and 9px for the step below, which is not a font size, it is a texture.
What works better is to set the extremes first and fill in between. Decide the body size (16 to 18px for most reading), then the largest heading the design actually needs, then place three or four steps between them by eye. The result is not mathematically elegant and it survives contact with a page.
A ratio that looks perfect in the specimen falls apart at 40 characters. What to check instead.
The check that catches most problems: set every heading on the page to its longest realistic length and look again. A `h2` that is beautiful at four words and wraps to three lines at fourteen will wrap to three lines constantly, because real headlines are long. If the scale only works with short text, it does not work.
Line height is where scales quietly fail. A ratio generates sizes but not leading, and a heading at 2.5rem with the body line height of 1.6 has gaps you could park in. Large text wants tighter leading — around 1.1 to 1.2 above 2rem — and small text wants looser. This is the single change that makes an amateur page look professional, and it takes two declarations.
Editor · Rotterdam
Spent nine years designing for newspapers before moving to the web, which she still describes as “a newspaper that argues back”. Writes about type and layout, mostly.