Skip to content
← All notes

Web typography: what an 11–17px type scale actually does

Why 11 to 17

A tight scale — 11, 12, 13, 14, 15, 16, 17 pixels — covers every interface need: labels, meta, body, headings inside cards, and small section titles. Designers default to 18–32px scales and get hierarchy by accident; a compact scale forces hierarchy through weight and color, which reads calmer.

The pattern: labels at 11, meta at 12, body at 13–14, card titles at 15–17. Display sizes above that are reserved for hero moments, not reused in body copy.

Size is hierarchy, not decoration

When every size is 4 pixels apart, the eye reads the page like a paragraph — it scans. When sizes jump in usable steps and weight changes do the emphasis, the page reads like a designed object.

Pair the scale with two weights: a regular for body and a 500–600 for emphasis. That is enough. More weights make the scale feel like a font specimen, not a product.

The mono counter-voice

A mono face for labels, years, and meta — 11–12px, uppercase, letter-spaced — gives a technical, precise voice to an otherwise humanist sans. It is the cheapest personality move in interface design.

Keep it to one job. Mono for body copy exhausts the eye and the novelty.

Keep reading

Want this applied to your product?