Choosing a scale you can hold in your head

Filed under scale

A modular scale is a ratio and a starting size. Pick 16 and 1.25 and you get 16, 20, 25, 31, 39, and so on upward. It is a tidy idea and it solves a real problem: without one, sizes accumulate by accident until a page has fourteen of them and no two are related.

The trap is treating the generated list as an inventory to spend. A scale with nine steps invites nine steps of hierarchy, and nine steps of hierarchy is not hierarchy — it is a gradient. Readers can hold maybe four levels at once. Past that they stop perceiving rank and start perceiving noise.

Generate widely, adopt narrowly

Compute the scale, then throw most of it away. Body, one size down for captions and metadata, one or two up for headings, and something distinctly larger for the page title if the design needs one. That is four or five sizes and it covers nearly everything.

The discipline is not in the ratio. It is in refusing to add a sixth size the first time something does not quite fit — because the thing that does not fit almost always needs different weight, colour, or spacing, not a size of its own.

Ratios behave differently at the ends

A large ratio such as 1.618 produces dramatic contrast, which reads well on a landing page with three text elements and falls apart in a document, where the third step is already enormous. A small ratio such as 1.125 keeps everything close, which suits dense interfaces but leaves headings barely distinguishable from body text — you end up compensating with weight and colour anyway.

For text-heavy pages something in the region of 1.2 to 1.3 tends to survive contact with real content. That is a rule of thumb, not a finding.

Round the numbers

A scale that yields 25.6 and 31.25 is arithmetically correct and practically annoying. Sub-pixel sizes get rounded by the renderer anyway, and differently in different browsers, so the precision buys nothing and costs you every time you read the stylesheet. Round to whole pixels and let the ratio drift slightly. Nobody has ever detected a scale that was 1.23 instead of 1.25.

The scale is not the hierarchy

Size is the loudest signal available, which makes it the one to reach for last. Space above and below an element separates it from its neighbours more cleanly than growth does, and does not disturb the rhythm of the column. Most pages that feel flat do not need bigger headings — they need more room around the ones they have.