How big a difference has to be

Small differences read as errors

A heading at 17px above body text at 16px does not create a hierarchy. It creates the impression that something went wrong in production. The reader cannot tell whether the difference is deliberate, and a difference that might be an accident carries no information.

This is the single most common technical fault in beginner work, and it is entirely fixable with arithmetic. The rule is that every difference you introduce has to clear a threshold, and below that threshold you are better off with no difference at all.

The thresholds, channel by channel

These are working numbers rather than laws of nature, drawn from what holds up in practice on ordinary screens at ordinary distances.

Size. A step needs to be at least 1.2 times the size below it to read as deliberate, and 1.25 is more comfortable. From a 16px body, that is 20px minimum for the next step up. In practice most designers use a modular scale — pick a ratio and multiply repeatedly:

ratio 1.25 from 16px:  16 → 20 → 25 → 31 → 39 → 49
ratio 1.333 from 16px: 16 → 21 → 28 → 38 → 51 → 67

Round to whole pixels. The point of a scale is not mathematical purity; it is that every size on the page is guaranteed to clear the threshold against every other size, without you checking each pair.

Weight. On most screen typefaces, 400 against 500 is invisible at body size — the two render nearly identically after hinting and anti-aliasing. 400 against 600 reads. 400 against 700 reads clearly. If a family only offers Regular and Bold, you have one weight step, not three.

Lightness. Two greys need roughly 15 to 20 points of difference on a 0-100 lightness scale before the difference is unambiguous rather than suspicious. Text at 40% grey beside text at 45% grey looks like a rendering bug.

Spacing. A gap that separates groups should be at least twice the gap inside them. 8px inside and 12px outside is ambiguous; 8px inside and 24px outside is not. This one has the most slack — going to three times is usually better, never worse.

Position. A 4px indent reads as a misalignment. An indent needs to be at least a full space unit — 16px or more — to read as an indent.

Why thresholds exist at all

Perception of most quantities is proportional rather than absolute. The difference you notice depends on what you are comparing against: adding 1px to a 16px letter is a 6% change and invisible, while adding 1px to a 4px border is a 25% change and obvious. This is why design scales are multiplicative rather than additive, and why a spacing system of 4, 8, 12, 16, 24, 32, 48, 64 works better than 4, 8, 12, 16, 20, 24, 28, 32 — the first keeps the proportional gap roughly constant as the numbers grow, the second lets it collapse.

There is a second reason, and it is about trust rather than optics. Work that contains many small unexplained differences reads as careless even when the reader cannot name why. Three sizes used consistently looks designed. Eleven sizes, several of them one pixel apart, looks like a document that six people edited.

The counter-rule: sometimes go far past the threshold

Clearing the threshold is the minimum, not the target. A poster read from three metres away needs its primary element at maybe four or five times the body size, not 1.25 times. A price on a product card might be twice the size of everything else. Threshold arithmetic tells you the floor; the job tells you the ceiling.

The failure at the other end is real but rarer: a heading so large it stops being read as text and becomes a texture, or a value difference so extreme the page looks like two unrelated designs stapled together.

How to audit a design for this

List every distinct value you have used, per channel, and count them.

sizes:    13, 14, 15, 16, 18, 20, 22, 24, 32
weights:  400, 500, 600, 700
gaps:     4, 6, 8, 10, 12, 16, 18, 20, 24, 32

That list is a diagnosis on its own. Nine sizes for a page that needs four. Ten gap values where five would do. The repair is to map each stray value onto the nearest value you intend to keep and delete the rest, which usually improves the design immediately and always makes it easier to change later.

Browsers make this auditable for free: open developer tools on any page you have built, and the computed styles panel gives you the actual rendered values rather than the ones you believed you had set.

The honest caveat

These numbers are thresholds for a reader with ordinary vision, on a reasonable screen, at ordinary distance, paying attention. Every one of those conditions can fail. A reader at 200% browser zoom is seeing proportions unchanged, so ratios survive — which is an argument for ratios. A reader in bright sunlight is losing lightness contrast, so value steps need more headroom than the minimum. When in doubt, exceed the threshold rather than sit on it; nothing is ever ruined by a hierarchy that is slightly too clear.