A size difference must clear the discrimination threshold before it makes a level

What it is

A help article sets section heads at 18 px and body at 16 px, same weight, same colour. On a phone at real width, many people cannot say which line is the heading. They can read the words. The size difference never crossed the just noticeable difference. For size to found a level, the gap between two rungs has to stay separable at the target viewing distance and type size. A 2 px gap that “has a step” on a zoomed artboard is often one level on a device.

Why it happens

Discrimination of length and area roughly follows Weber’s law: the just-noticeable increment scales with the base size; it is not a fixed 2 px. Adding 2 px onto 16 is about a 12% relative step, which, after reading distance, anti-aliasing and compressed weight, often sits on or under the threshold. If the heading also carries a little extra weight or colour, a review will credit size for work those other channels are doing; strip them (same colour, same weight) and size hands in a blank. The threshold also rises with viewing distance: hold the phone farther away and 16 versus 18 collapses first, while 16 versus 24 still splits. “I can see a difference on the file” was never “users will treat these as two levels.”

Studying it

The classic task is two-interval discrimination: two passages of the same copy, size only changed, forced choice of “which is larger,” a psychometric curve of accuracy against ΔS/S, and the ~75% point taken as the JND for that size, face and distance. Independent variables include size, weight, distance and anti-aliasing; dependents are accuracy and latency. Interface work need not run a full staircase, but it does need a forced choice on a real device at design distance — not an eyeball pass on a 200% canvas.

Where it stops holding

The threshold is not a constant across typefaces. A large x-height makes the same pixel gap easier to read as “bigger”; thin weight and pale grey eat effective contrast and raise the threshold. Chinese characters fill a square, so small size steps get less help from word shape than Latin, and often need a larger relative step. Once the size gap is already large, adding weight becomes dual coding rather than “size starting to work.” Far-view digital signage and watch-sized screens need their own measurements; they do not inherit phone-reading numbers.

Applying it

• Set neighbouring heading and body sizes as a ratio, not as two handy rungs on a spacing grid. Around typical phone body sizes, do not treat a relative gap under about a quarter as a hierarchy device.
• Shrink the review to device width and look from standing distance for three seconds. If you cannot tell which is larger, that pair is not a size level yet.
• Do not let “I can see 16 and 18 on the artboard” stand in for a device. Zooming the file makes the task easier.
• Check: on a real device, pair the same sentence at both sizes, with weight and colour equalised. Ask which line is larger. If two of five hesitate or point wrong, widen the gap until nobody pauses, then lock that pair into the type scale.

Related

• Same group: F3.02.2 More levels compress the step between them · F3.02.3 Hierarchies of three levels or fewer are the most stable
• Nearby: F3.01.1 Size, luminance, colour, position and whitespace jointly set visual weight · F4.01 Type-size ladder · F4.08 Legibility and readability
• Search terms: just noticeable difference · Weber fraction · type scale · size contrast