Four sizes, chosen once

The list you should be able to write down

A finished design should have four or five text sizes and you should be able to name all of them from memory. If you cannot, the page has sizes in it that nobody decided.

A typical honest set:

12px  captions, legal, metadata
16px  body
20px  lead paragraph, card titles
28px  section headings
40px  page title

Five values. Every piece of text on the page is one of them. That constraint is the whole technique, and it does more for coherence than any choice of typeface.

Building the scale

Pick a base — almost always 16px, because it is the browser default and the size most readers have implicitly agreed to — and a ratio, then multiply.

1.2   (minor third)   16 → 19 → 23 → 28 → 33 → 40
1.25  (major third)   16 → 20 → 25 → 31 → 39 → 49
1.333 (perfect fourth) 16 → 21 → 28 → 38 → 51 → 67
1.5   (perfect fifth)  16 → 24 → 36 → 54 → 81 → 122

Round to whole numbers. The musical names are borrowed and decorative; there is no evidence that a page set on a perfect fourth is more harmonious than one set on 1.3. What the ratio genuinely buys you is that every size is guaranteed to clear the perceptual threshold against every other size — which, from the first block, is the thing that makes a difference read as a rank rather than as an error.

Go down as well as up. From 16 at 1.25, the step below is 12.8, which rounds to 13. Many designers set captions at 14, which is not on the scale and is close enough to 16 to look accidental.

The scale has to change size with the screen

A 1.333 scale looks excellent at 1440 pixels and ridiculous at 390. A 51px page title on a phone occupies 13% of the screen width per character and forces a two-word line. The correct response is not a different design but a compressed ratio on small screens: use around 1.2 on a phone and let it open up as the viewport grows.

CSS does this in one declaration per size:

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

That reads: never below 28px, never above 48px, and in between it grows with the viewport. Including a rem term in the middle value matters — a value expressed purely in vw ignores the reader's own font-size setting, which is an accessibility failure that passes every visual review.

Why fewer sizes is better

Three reasons, in order of how much they matter:

1. Each size means something. With five sizes, a reader learns within one screen that 28px means new section. With eleven, 28 and 26 both appear and neither means anything.
2. Differences clear the threshold. Sizes one or two pixels apart read as production errors.
3. It is cheaper to change. Five values in one place, adjusted once, versus forty declarations across the project.

The audit is the same as for spacing: list every distinct size on a page and count. More than six on a single screen is a finding.

Size is not the only rank

The commonest misuse of a type scale is trying to express every level of hierarchy through size alone, which ends with six heading sizes and a page that looks like a ransom note.

Weight, colour and space are all available. A subheading can be the same size as the body text, set in semibold, with 32px above it and 8px below. That is three channels doing the work of one size step, and it reads more clearly than a 17px heading ever will.

In long-form text this is the normal solution: two or three sizes for the whole document, with weight and space carrying the structure beneath the top level.

The honest limitation

A modular scale is a convenience, not a law. Real typographic settings break it constantly: a price that has to be exactly as wide as a card, a logotype that was drawn at a fixed size, a legal notice a regulator specifies in points.

The workable position is that the scale is the default and departures are deliberate and documented, which is the same rule as for spacing. What you are avoiding is not the existence of an off-scale value; it is a page with nine of them and no memory of why.