# Use one type scale and stick to it

UI Tip #003 · Typography & color · 2026-10-12 · https://ui.praveenjuge.com/3/type-scale

> 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.

*Figure: A page whose text goes from seven near-identical sizes to three sizes from one scale, with its list of text styles shrinking to match.*

## 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.

## Sources

- [More Meaningful Typography, Tim Brown, A List Apart](https://alistapart.com/article/more-meaningful-typography/)
- [Visual Hierarchy in UX, Nielsen Norman Group](https://www.nngroup.com/articles/visual-hierarchy-ux-definition/)

---

From [UI Tips by Praveen Juge](https://ui.praveenjuge.com). Free to share, with a link back to https://ui.praveenjuge.com/3/type-scale.