Type Scale

Definition

A type scale means you pick one base size and then multiply or divide it by a fixed ratio, over and over, to generate all your text sizes at once — H1, H2, body, caption, and so on. Say you set your body text to 16px and choose a ratio of 1.25. Going up, your headings fall into place automatically at 20px, 25px, 31px; going down, your caption size comes out naturally too. Just as a musical scale steps through fixed intervals, text sizes sound harmonious together when they follow a steady ratio. In other words, instead of hand-picking every size one by one, you generate the whole set of sizes from a single rule.

Why does it matter?

Any screen mixes text of different importance — headings, subheadings, body, supporting notes. When those sizes are set to unrelated numbers, the hierarchy goes fuzzy and it's hard to tell at a glance what matters most. A type scale ties every size to the same ratio, so a steady rhythm forms between heading and body and the whole layout feels composed. And because you're not eyeballing sizes, values stop drifting apart from page to page. Once the sizes are calculated in advance, you don't have to agonize over them on every new screen — you just pick from the steps you already have. The upshot is that readers parse the structure of your text effortlessly, and you only manage a handful of fixed sizes, which keeps maintenance far simpler.

Common mistakes

• Picking sizes by feel each time. When arbitrary values like 18px, 22px, 28px pile up across screens, the hierarchy gets muddy and pages start looking subtly different from one another, so the whole thing feels messy. Changing a size later is hard too, because you never know where or how much to touch.
• Slicing the steps too finely. If you keep several sizes with barely any difference — 15px, 16px, 17px — users can't perceive the gap between them, and you've only added more values to manage, which is confusing rather than helpful.
• Choosing a ratio without considering the screen. On an information-dense dashboard, a large ratio that blows headings up dramatically fills the screen fast, so you end up short on space and everything feels cramped.

Practical tips

• Generate sizes from a ratio instead of guessing. A bigger ratio (1.5) makes headings grow dramatically for a bold, striking feel, while a smaller one (1.2) reads calm and information-focused. Choose the ratio to match the mood of the screen first — that's the right order.
• Limit the steps you actually use to around five to seven. Two or three heading levels, body, and caption cover most screens, and fewer options mean faster decisions each time and consistency across screens almost for free.
• Save your scale values as design tokens. Instead of hard-coding numbers all over your code, reference tokens — then changing just the base size or ratio re-adjusts every text size across the whole screen at once, saving you a lot of manual work.

Related concepts