The quiet craft of typographic hierarchy.
Most type scales are math. The ones that feel right are also taste. A short field guide to making your hierarchy do the heavy lifting, so the rest of your design can breathe.
Open any modern design system documentation and you'll find a "type scale" — usually a tidy progression of sizes generated by multiplying a base by 1.125, 1.25, or some other tasteful ratio. They look reasonable. They print well in spec docs. And then you ship them, and somehow the page still feels flat.
That's because hierarchy isn't really about the sizes. It's about the relationships between them — and the relationships are what most scales don't capture.
The four levers
When I'm trying to make a page feel structured rather than busy, I work with four levers, in roughly this order:
- Size. The blunt instrument. Useful, but overrated.
- Weight. A 600-weight 16px headline can outrank a 400-weight 24px one — and feel calmer.
- Color (and contrast). Muted text ranks lower than full-contrast text, even at the same size.
- Space. What's around a piece of text changes its weight more than the text itself does.
If your hierarchy collapses without size differences, you don't have a hierarchy. You have a font ladder.
Three patterns I use a lot
The eyebrow. A small, all-caps, letter-spaced label sitting above a heading — usually the same color as muted body text. It tells the eye "the next thing is a section heading" before the heading even loads. Costs nothing visually. Buys you enormous structural clarity.
The heavy-but-small. A 14–16px label in 700+ weight, set tight, used for navigation or list headers. It rivals a 22px regular for visual weight, but takes up half the room. Useful in dense interfaces.
The italic accent. One word in italic serif inside an otherwise sans-serif heading. It carries personality the rest of the page can lean against. Done sparingly, it makes a wordmark of a phrase.
Numbers I keep coming back to
- Body text: 16–18px. 17 is my default.
- Body line height: 1.55–1.7. Tighter feels cramped. Looser feels disorganized.
- Heading line height: 1.05–1.15. Tight headings feel decisive.
- Letter spacing on big type: -0.01em to -0.025em. Big type wants tighter tracking.
- Letter spacing on eyebrows: +0.08em to +0.16em. Small caps want air.
What "feels right" actually means
The scales that feel good usually have one big jump near the top — something decidedly larger than everything else — and then a more compressed range below it. Pages need a single dominant note; everything else is the chord.
I rarely use more than five distinct text styles on a page. If I find myself reaching for a sixth, that's usually a signal that one of the existing five is doing two jobs poorly.
Closing thought
Typography is the part of design where math takes you 80% of the way and the last 20% is felt. Trust the ratios — and then trust your eye when it tells you the ratios are wrong. Both are true. Both matter.
