A type scale you can hold in your head

The type scale in most products has eleven steps, and about four of them are used. The other seven exist because at some point a heading looked slightly too big, and rather than picking one of the sizes that existed, someone added a size between two of them.

This is how you end up with text-lg and text-xl both in use on the same page for the same kind of thing, differing by two pixels, chosen by different people on different Tuesdays.

Start with four

Display, heading, body, meta. That is the whole system for most interfaces.

• Display — one per page, at the top, fluid between about 2.4rem and 3.5rem
• Heading — section titles, around 1.5 to 1.9rem, also fluid
• Body — 1rem in UI, 1.125rem in prose, and nothing smaller anywhere
• Meta — 0.875rem, for dates and counts, and only for dates and counts

If a fifth size seems necessary, the usual cause is a hierarchy problem being solved with size. Try weight, or colour, or space above the element, before adding a step.

Leading is the other half

A scale is not just sizes. Display type wants tight leading — around 1.05, because the lines are short and the eye tracks them by shape. Body wants generous leading, 1.6 to 1.7, because the eye needs to find the next line without help. Getting this backwards is the most common reason a page with correct sizes still feels wrong.

Measure is a size too

Sixty-five to seventy-five characters, always. Not a pixel width — a character count, so the constraint holds when the font changes. The single most reliable improvement to a text-heavy page is capping the measure, and it takes one declaration.

If you can read a paragraph without moving your head, the measure is right.

The tracking rule

Large text needs negative tracking; small text does not. Roughly: nothing below 1.25rem gets tracked at all, and everything above it gets between -0.02em and -0.035em, more as it grows. Uppercase is the exception and wants positive tracking, which is one of several reasons to use very little uppercase.

Write it down once

Four sizes, two weights, one measure, one tracking rule. That fits on an index card, which means it fits in a head, which means the next person will follow it without being asked.