Adjacent scale steps must be discriminable
Aliases: type scale contrast · size JND · rung discrimination
What it is
If two neighbouring rungs differ by a single pixel, people cannot tell which is larger when the sizes sit on the same screen. Hierarchy that speaks through size has to clear a discrimination threshold, not merely look different in a spreadsheet. This is not about how many rungs the ladder has. It is about two rungs reading as two things.
A CSS pixel gap is not an ocular size gap. The same +2px is nearly invisible on a Latin face with a small x-height, and may be just enough on a CJK face whose glyphs fill the em. Discriminability is of the chosen face, weight, and viewing condition — not of the number table.
Why it happens
Size contrast is read as “more important” only after it outruns a just-noticeable difference; below that it reads as uneven setting. A large part of how the visual system encodes type size is face height — x-height in Latin, the ideographic face in CJK — not the nominal em. When two rungs differ by 1px on paper and overlap in x-height, they collapse into one size, and heading semantics are left to weight or colour.
A second failure is the compromise size slipped “between title and body.” Three levels become four, each relative gap shrinks, and rungs that used to separate glue back together. Adding levels does not strengthen contrast; it thins the difference allotted to each step.
The small-size band is especially brittle. 14 versus 16 is a larger relative jump than 28 versus 30: the same absolute increment is conspicuous near body and ignored on display numerals. A uniform +2px across the whole scale looks tidy and then barely works for body while wasting rungs at display.
Studying it
When print experiments treat type size as an independent variable, they do not ask “was there a 1px gap?” They ask whether observers can rank sizes, and whether reading speed moves with size. Tinker-style print-legibility work used page reading and rated clarity, not pairwise pixel judgements; the variables are still the right ones: size, x-height, letter-spacing, viewing distance.
A method closer to a scale is paired comparison: same word, same weight, size only, “which is larger?” or “are these the same?” Independent variables: ratio or pixel gap between rungs, x-height of the face, presence of bold. Dependent variables: ranking accuracy, time to judge, rate of “they look the same.”
In product work, turn the actual scale into specimen lines, shuffle them, and ask people to order “which looks more like a heading.” An unstable order means the steps are not carrying hierarchy.
Where it stops holding
Display numerals and hero titles already fill the field; the need for a further discriminable step drops — contrast is saturated, extra pixels do not add “more important.” Captions and badges sit near the floor, where 1px may be the line between readable and not; that is a floor problem, not a step-contrast problem.
Dark backgrounds, light weights, and low luminance contrast eat size cues, so the same step looks weaker. After the user enlarges system type, absolute gaps grow: a barely separable scale can start to shout, and a previously cramped one can finally split. Discriminability has to be checked at the default setting and at the enlarged one.
Applying it
- Do not separate heading levels by 1px. Set the two rungs as the same word, strip colour and weight, and see whether size still ranks.
- Accept the step against the face’s x-height or CJK face height, not the CSS pixel table. Changing the typeface means re-checking the gaps.
- Spend discriminability first near body; display rungs can take a larger ratio. Equal steps across the whole ladder are not required.
- How to check: print or crop the same word at adjacent rungs, hide the role names, and ask someone outside the team to rank them. Every pair that is mis-ordered or called “about the same” is a step that did not open.