A finite type scale keeps sizes consistent
Aliases: modular scale · type ramp · size ladder
What it is
If “body” is 14 on one screen, “card caption” is 15, “list subtitle” is 16, and two more pages invent 20 and 22 for titles, readers do not register craft. They register that the same kind of text has no single face. A type scale is a short, named ladder of sizes, each rung tied to a role — caption, body, subhead, title, display — instead of a pixel chosen on the spot.
Finiteness is the method; consistency is the outcome. Five rungs or eight is not the point. The same role must land on the same rung everywhere, not on “something close.”
Why it happens
People classify type by category, not by millimetres. A heading reads as a heading because it keeps showing up at one size, locked in contrast with the body. Half-steps invented per page dissolve that category: 15 and 16 are nearly the same on the retina, yet two teams treat them as two meanings, and the product loses a predictable “what level is this.”
Capping the ladder is how type roles become a vocabulary. New screens pick from the list; they do not coin sizes. That also blocks the usual drift: paste a style from another file and nudge two pixels “to refine it.” If paste cannot mint a new size, drift stops.
Scales are usually grown from the body rung, up and down by a fixed ratio. The ratio itself is unmysterious — 1.125, 1.2, 1.25 all get used — what matters is a single origin and discrete steps. A continuous slider looks free and then every breakpoint, language, and component library grows its own private set.
Where it stops holding
Type bound by an external medium or a statute — instrument readouts, map labels, legal small print — does not belong on the product ladder; forcing it there fights the paper original or the mandated size. A display numeral that overshoots the scale on a brand page is harmless if it never leaks into lists, settings, or body copy. The real failure is an exception that stays in the component library and becomes a sixth body size three months later.
Do not share one pixel ladder across device classes. Phones, laptops, and living-room screens sit at different distances; the body value should change even if the role structure is shared. Shipping a 16-pixel phone body onto a ten-foot UI keeps the scale and loses the reading.
Applying it
- Name roles before sizes: caption, body, heading 1, heading 2, display. Ban “a slightly larger 17” inside components.
- Generate the other rungs from body, not by padding down from a title. Body is the highest-volume size and the reference for every contrast.
- Expose only named scale tokens in code. Treat raw pixels or ad-hoc
font-sizeas exceptions that need a written reason. - How to check: dump every computed
font-sizein the product and cluster by role. Two or more clusters for one role means the ladder is already leaking.