Modular scale

A modular scale is a base size and a multiplier. Pick 16 px and 1.25 and the steps write themselves: 20, 25, 31.25, 39.06, with the same ratio between any two neighbours all the way up and, going the other way, all the way down. The argument for generating a type scale this way rather than choosing sizes by eye is that the relationships hold at every step, so a heading two ranks above body sits the same distance above it everywhere in the product, and nobody has to defend 22 against 23 in a review.

The ratios are borrowed from musical intervals, which is where the names come from: 1.125 is a major second, 1.2 a minor third, 1.25 a major third, 1.333 a perfect fourth, 1.5 a perfect fifth, and 1.618 the golden ratio. The number is not a matter of taste alone, it is a function of how much text there is. A dense interface, a table, a dashboard, or anything with four ranks to fit into a small window wants a tight ratio, because a wide one runs out of room by the third step. An editorial page with body text and one big headline can carry a fifth and will look timid without it. A useful check is to write out four steps in both directions and ask whether the largest is usable on a phone and the smallest is still readable.

Two practical cautions. The generated numbers are not sacred: rounding 39.06 to 40 costs nothing, and a scale is a starting point rather than a contract, so break a step when the content needs it and keep the rest. And a scale that travels between screen sizes usually wants its ratio to travel too, either by swapping ratios at a breakpoint or by interpolating between them with fluid typography, since a ratio that reads as confident on a desktop is shouting on a handset. Once the steps are settled they belong in tokens, not in components, so the scale is a decision the system made once.