Skip to main content

07

4 min

Typography

Forty ad-hoc font sizes with no relationship between them. That page doesn't have a type system. It has leftovers.

Tokenize the type first: family, weight, a size scale, line-height, tracking. Then compose named styles. heading-lg, body, caption. You reach for a style, not a raw font-size.

Why 65ch, why 1.333, why 1.6 leading — that's readability theory. Grade covers the scale, the leading, and the measure. This lesson is the structure.

Change the base or the ratio. The whole hierarchy re-derives. You never pick a heading size by hand.

caption

12.0px

body

16.0px

heading-sm

21.3px

heading-md

28.4px

heading-lg

37.9px

heading-lg is not 32px. It is three steps up from body. Change the ratio and it moves with everything else.