The Type Scale That Finally Made Sense

For years I built type scales the way most people do: pick a base size, pick a ratio off a list, multiply until you have eight numbers, ship it. The numbers were always defensible and the pages were always slightly wrong.

The problem is that a mathematical scale answers a question nobody asked. A page does not need a perfect fourth between its heading sizes. It needs a reader to know, in about a fifth of a second, what to look at first.

Start from the roles, not the ratio

We threw out the ratio and wrote down the jobs instead. On our sites there are exactly seven.

• Display, used once per page at most
• Page title
• Section heading
• Subheading
• Body
• Secondary text, for captions and metadata
• Label, for buttons, tags, and form fields

Seven roles, seven sizes. If a new size is needed, the honest question is which of the seven roles is missing, not which step of the scale we skipped.

Size is the weakest signal you have

The scale got dramatically better the moment we stopped asking size to do all the work. Hierarchy is a budget spent across four properties, and size is the most expensive one.

Weight separates a subheading from body text at the same size. Colour separates metadata without shrinking it below comfort. Space, more than anything, tells a reader where a section begins.

A heading that is one step larger and two hundred grams heavier reads as more important than one that is three steps larger. It also does not wreck the page on a narrow screen.

Cap the top, protect the bottom

Two hard rules survived every revision.

Nothing below fourteen pixels, ever, for anything a reader is expected to read. Captions, legal text, and table cells included. If the layout only works at twelve, the layout is too dense.

And the display size is capped at a number that fits the longest real headline we have, on the narrowest screen we support, without breaking to three lines. We found that number by pasting in actual titles from the archive rather than by trusting a preview string.

Line height belongs to the size, not the element

We used to set line height per component, which meant every component drifted. Now each of the seven roles carries its own line height, and components inherit it.

Long body text sits at one point six. Headings tighten as they grow, down to one point one at display. The rule is simple: as the size goes up, the leading ratio comes down, because the eye needs less help returning to a short line.

The test that settled the arguments

Print a page at fifty percent and squint at it. If you can still tell the title from the sections, and the sections from the body, the hierarchy works. If everything greys into a single texture, no amount of ratio maths will save it.

Our scale now has fewer sizes than it did three years ago, and the pages read faster. That trade was available the whole time.