A type scale has to survive real content
Every scale looks balanced against three words of placeholder. The test is a heading an editor actually wrote, on a phone, in two languages.
Type scales are designed against sample text and then handed to people with something specific to say. The heading that read beautifully at three words wraps to four lines the first time somebody writes a real one.
Spacing belongs to the rhythm, not the heading
Headings in this starter carry no vertical margin of their own. The spacing lives on the flow, in em units, so every level separates in proportion to its own size and the first block in a field never gets a stray top margin.
Steps down, not just up
The same scale cannot serve a marketing hero and a 2,000-word article. On a post the whole scale steps down together — a 48px display heading is right above a landing page and wrong above a paragraph somebody is trying to read.
Balance and pretty are free
Two lines of CSS — text-balance on headings, text-pretty on body copy — fix most of what makes editor-written text look ragged, and cost nothing when unsupported.
Test it with the worst case you have
Take the longest title in the dataset, the one with a compound word in it, and put it on a 320px viewport. That is the design. The three-word version was never going to break.
Written by
Priya Raman
Design Systems Engineer
Priya works on the seam between design tokens and the components that consume them, and is unreasonably interested in how colour behaves when someone else picks it.
