Type Scale
Three to four sizes is enough. More levels and hierarchy actually scatters.
Use only three to four font sizes across the whole site. The fewer the levels, the clearer each one's meaning.
What you'll run into:
- The page has seven or eight sizes, but it still reads flat
- Every new element means agonizing over which size to use
- The same kind of information uses different sizes on different pages
More sizes doesn't mean more hierarchy. When adjacent levels differ by only a pixel or two, users can't perceive the difference — they just feel it's "a bit uneven." Hierarchy comes from gaps, not from the number of levels. There's a simple way to check whether you have too many: list every size on the page from smallest to largest. Past five, the problem usually isn't content — it's that nobody dared to cut. Left to itself, the AI tends to pick a "suitable" size for every element, which lands you with seven or eight near-identical sizes; constraining it to three or four forces hierarchy instead of guesswork.
How to define the scale
| Level | Desktop | Mobile | Where it's used |
|---|---|---|---|
| Display | 28–32px | 22–24px | Main page heading — one per screen |
| Subheading | 16–18px | 16px | Section titles, card titles |
| Body | 14–15px | 15–16px | Main reading content. Mobile is actually larger |
| Caption | 12–13px | 12px | Timestamps, status, notes |
Adjacent levels should differ by at least 1.25x. The gap from 14 to 16 is hard to see; 14 to 18 is obvious. Mobile body text is larger than desktop because viewing distance is closer while the screen is smaller. When you need more steps, generate them with a geometric ratio: starting from body text, multiply by 1.25 or 1.333 going up and divide by the same ratio going down. The result is naturally harmonious — the modular scale in web typography works exactly this way. modular-scale Define the scale from the body-text baseline, not from the heading — however big the heading gets, it still has to return to the body's rhythm.
Once set, each level owns one job: display states the point, subheadings divide the page, body carries the reading, captions explain. Use the same value for the same level everywhere — no fine-tuning. To verify, shrink the page: if you can tell headings from body at a glance, the scale works; if you can't, widen the gaps rather than adding levels.
Three dimensions beyond size
Hierarchy doesn't have to come entirely from size — much of it can come from dimensions other than size. Most of the time, bolding and graying are more restrained than enlarging.
| Dimension | How to use it | Payoff |
|---|---|---|
| Weight | Regular and bold are enough | Doesn't change the footprint, so the layout doesn't shift |
| Color depth | Main text near-black, secondary mid-gray, captions light gray | Three levels from one size |
| Spacing | More space around what matters | Doesn't touch the type at all — the cleanest option |
Four sizes times two weights times three colors gives twenty-four combinations in theory; in practice you'll use fewer than eight. That's enough. Since weight and color can both create hierarchy within one size, the places that genuinely need a size change are few.
- Don't go too thin with Chinese. Light blurs at small sizes. Use regular for body, medium or bold for emphasis.
- Set font size and line height as a pair. Each size gets a fixed line height — don't let the AI compute it fresh every time.
- Use variables. Same as spacing — define them as tokens, change once, applies everywhere.
The type scale, together with spacing, color, and corner radius, makes up the four variable groups of a minimal design system. Once all four converge to fixed values, AI-generated screens start to look consistent at a glance.