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.0pxbody
16.0pxheading-sm
21.3pxheading-md
28.4pxheading-lg
37.9pxheading-lg is not 32px. It is three steps up from body. Change the ratio and it moves with everything else.