Typography as a System, Not a Setting
A type scale earns its keep when it stops being a list of sizes and starts being a set of relationships you can reason about.
Most teams pick a font, choose four sizes, and call it done. The result is a page that looks fine in isolation and falls apart the moment a new component needs a size that does not exist. Someone invents one. Then someone else invents a different one. A type system fixes this by describing relationships instead of values.
The scale is a contract
A scale is not a menu. It is a contract that says: if you need something between a heading and a paragraph, you do not invent a new size — you reach for the one that already exists and let weight and spacing do the differentiating.
| Token | Size | Use |
|---|---|---|
text-display | 3rem | Marketing headlines |
text-h1 | 2rem | Page titles |
text-h2 | 1.5rem | Section headers |
text-body | 1rem | Paragraphs |
text-sm | 0.875rem | Captions, metadata |
Five steps is enough for almost any interface. The discipline is not picking the sizes — it is refusing to add a sixth.
Line height is a role, not a number
Headings want something tight, around 1.1. Body wants room, 1.5 to 1.6. Use unitless values so the line height scales with the font; a fixed 24px does not. This is the difference between a layout that breathes at every size and one that breaks the moment you change the root.
Tracking by size
Large headings often want slightly negative letter-spacing. Small uppercase labels want slightly positive spacing so the letters do not crowd. Body copy at reading sizes wants neither. These are not opinions; they are how the eye reads.
A good type system is invisible. You only notice it when it is missing.
A few habits that compound
- Store copy in natural case and transform with CSS, so a redesign never means rewriting strings.
- Use
text-wrap: balanceon headings andtext-wrap: prettyon descriptions. - Apply
tabular-numsanywhere a number changes, or watch it shift the layout as it updates.
None of this is glamorous. It is the unglamorous work of being consistent, and it is the difference between a page that feels designed and one that feels assembled.
Related posts
Comments(5)
The concentric radius tip alone was worth the read. I’ve been matching outer and inner radii for years without realizing why it felt off.
outer = inner + padding— that’s the whole rule.Same — once you see it, you can’t unsee the mismatch on nested cards.
Exactly. Glad this landed.
Also useful with Typeset measure caps — nesting and measure fight each other if you’re not careful.
Clear writing on a topic that usually gets hand-waved. Would love a follow-up on how this plays with nested dialogs.