The fastest way to make a layout look unfinished is to pick every font size in the moment. Twenty two here, because the heading felt small. Fifteen there, because the caption felt heavy. Six months later the stylesheet has nineteen sizes in it and no two headings match.
A scale fixes this by turning a hundred small decisions into six.
Start from the paragraph
Most guides build a scale downward from the largest size. I build upward from body text, because body text is the size doing the actual work.
I use eighteen pixels with a line height around 1.65 for anything meant to be read in full. That is larger than the default most frameworks ship, and the difference is felt most by the reader you never hear from: the one on a laptop at the end of a long day.
Set that first. Everything else is a relationship to it.
Pick a ratio, then break it once
A ratio between 1.2 and 1.33 produces a calm scale suited to pages made of text. Multiply upward from your body size, round to whole pixels, and stop at five steps.
- 18 for body copy
- 22 for lead paragraphs and large labels
- 27 for section headings
- 33 for card and subsection titles
- 44 for page headings
Then break it deliberately in exactly one place: the display size at the top of a page, where you want a jump rather than a step. A hero at seventy or eighty pixels is not on the scale, and that is the point. It reads as an intentional gesture instead of the next increment.
Weight and spacing belong to the scale too
A set of sizes still looks amateur if weight is applied at random. Two weights is usually enough: one for text, one for emphasis. Large sizes want slightly tighter letter spacing, and small uppercase labels want slightly looser.
The pattern I use everywhere:
- Long text: normal weight, normal spacing.
- Headings above thirty pixels: semibold, letter spacing tightened a couple of percent.
- Small labels: uppercase, medium weight, letter spacing opened by eight percent.
Fewer sizes, more contrast
The instinct when a hierarchy is unclear is to add a size between two existing ones. It almost never helps, because the problem is rarely resolution, it is contrast. If a heading does not separate from the paragraph beneath it, the gap is usually space or weight, not half a step of size.
Delete a size before you add one. A page that uses four sizes confidently reads as designed. A page that uses nine reads as negotiated.
A type scale is not there to be noticed. It is there so that nothing on the page has to be explained.
Write it down where the code is
The last step is the one people skip. Put the scale in the same place as the code that uses it, as named steps rather than raw numbers, and then use only those names. A scale that lives in a design file and not in the stylesheet is a suggestion, and suggestions lose to deadlines.
Written by
Ari Bennett
Software engineer and writer
I build web software for a living and write about the parts that are hard to search for: the trade-offs, the dead ends, and the small habits that make a codebase pleasant to come back to a year later. A decade in, I still keep a paper notebook next to the keyboard.
More about the writer
