Building a Type Scale That Survives Real Content
A scale that looks perfect on a specimen page falls apart the moment someone writes a nine-word headline. Here is how we build ours.
Type scales are usually designed against ideal content. A four-word headline, two lines of body copy, a caption that fits. Then the site launches, an editor writes a headline with a colon and a subordinate clause in it, and the whole composition tips over.
Design against your worst content, not your best
Before choosing sizes, we collect the ugliest real strings we can find. The longest product name. The category label nobody wanted. The legal disclaimer. If the scale holds up with those, it will hold up with everything else.
This changes the decisions you make. Headline sizes come down. Line height goes up. You start caring about how a heading wraps to three lines, because you have seen it happen.
Fewer steps, bigger jumps
Most scales have too many steps. Fourteen sizes means fourteen chances for two pieces of text to sit at nearly the same size, which reads as a mistake rather than a hierarchy.
We use seven steps and make the jumps decisive. If two levels are close enough to argue about, one of them should not exist.
- Display, for the one place per page that deserves it.
- Two heading sizes, not four.
- One body size, with a slightly larger lead variant.
- One small size for meta, labels, and captions.
Hierarchy comes from contrast. Contrast comes from distance. Small differences read as errors.
Line length is part of the scale
A size is meaningless without a measure. Sixty to seventy-five characters is the usual advice and it holds up. We set a maximum width on every text container and check it at three breakpoints, because a body size that reads beautifully at 640 pixels becomes a slog at 1100.
Weight is a hierarchy tool, and it is cheaper than size
Before reaching for a larger size, try a heavier weight or a change of colour. A semibold label in the body size often does the job a heading was doing, without adding a new step to the scale.
Write the rules down
The scale only works if it is documented in a place people read. Ours lives beside the components, with an example of each step in context and a short note on when to use it. Not a specimen sheet. A working page, with real sentences, at the widths people actually use.
