Why Typographic Scale Is a Decision, Not a Default
Most designers don’t have a type scale. They have a framework default they’ve never touched.
Tailwind gives you text-sm, text-base, text-lg, text-xl, and then four exponentially increasing sizes that live in header tags and never get used. Bootstrap has its own version. Material has its own. Each one is a reasonable guess at what most products might need, made by people who’ve never seen your product.
That’s the thing about a default: it wasn’t designed for anything specific. It was designed to not be wrong about anything.
Which is different from being right.
A scale is a hierarchy, and hierarchy is your opinion
When you choose a type scale, you’re deciding how much bigger one level of information is than another. That ratio — the interval between your sizes — is a design opinion dressed as a technical choice.
A tight scale (1.125, minor second) says everything is almost the same importance. It works for dense UIs where you want users to read, not scan. A wider scale (1.5, perfect fifth) says some things shout and some things whisper. It works for editorial layouts where hierarchy is the whole point.
Neither is correct. Both are decisions. Borrowing a default means someone else made that decision — not that it was the right one for your product.
The three questions a scale has to answer
I don’t start with a ratio anymore. I start with these:
- What’s the reading distance? Desktop body text lives at arm’s length. Mobile is closer. Distance changes everything — what reads clearly at 60cm looks too small at 90.
- What’s the density target? A dashboard and a long-form blog have opposite needs. One wants compact, efficient text that doesn’t eat screen space. The other wants generous line heights and breathing room between ideas.
- How many levels of hierarchy does this actually need? Not how many your framework has. How many does your content have.
If your answers are “arm’s length, generous density, four levels,” you have a type scale in everything but name. Write it down with numbers and stop approximating it from a dropdown.
The part where you actually build it
Pick a base size. 16px is fine — it’s what browsers assume and what eyes are calibrated for at a screen. Pick a ratio. 1.25 is a good starting point for most product interfaces. Apply it. Round to even numbers. Name the stops by their role, not their size.
--type-body, --type-label, --type-heading, --type-display. Not 14px, 16px, 20px, 25px.
Role names survive a redesign. Pixel names don’t.
Limit yourself to five stops. If you need six, one of them is probably doing two jobs and should be split into two tokens with different weights instead. Adding a size is almost never the answer — clarifying a role usually is.
The framework scale isn’t wrong. It’s just not yours.
And the moment your product looks almost like everything else but not quite, it’s worth asking whether the blur starts in the type. It usually does. A borrowed scale makes a borrowed hierarchy, and a borrowed hierarchy tells the user how important things are based on someone else’s product, not yours.
Build the scale. It takes an afternoon. It changes everything downstream.