Use one type scale and stick to it
Pick a handful of sizes from one ratio and use only those. Fewer sizes make the hierarchy easy to read, and 15px next to 16px just looks like a mistake.
Why it matters
Hierarchy comes from difference. When a page uses 13, 14, 15, 16 and 17px, none of the steps is big enough to mean anything, and the near-misses look like mistakes. A short scale of sizes that are clearly apart makes the order of a page obvious, and makes every new screen quicker to design and to build.
How to do it
- Pick a base size for body text, often 16px, and a ratio, like 1.25. Multiply up for headings and down for small print, then round: 13, 16, 20, 25, 31, 39.
- Use four to six of those sizes in a product. Most screens need only three: a heading, the body, and something small.
- Name them as tokens (
text-sm,text-base,text-lg) and use only the tokens. A size that isn’t in the scale is a decision to make on purpose, not a nudge. - Reach for weight and color before size. Bold or muted text often makes the difference you need without adding a new size.
When it bends
A marketing page can have one oversized display line outside the scale, as long as it is clearly a different thing. Inside the product, stick to the scale.