The type ladder is the tell: what four world-class landings have in common

7 min read

Eduardo Calvo

Eduardo CalvoWrote the skill and the detector this post measures with

Design critique usually stops at “it feels off”. That is not actionable for a human and it is useless to an agent. So we wrote a probe — a page of JavaScript that walks the rendered DOM and reports what is actually there — and pointed it at four landing pages whose typography is the reason people copy them, at a 2120x1143 viewport.

The numbers

Linear Vercel ElevenLabs Medusa ours, before
distinct font sizes in the fold 9 4 5 4 14
sizes below 14px 4 0 2 2 7
display size 64 64 48 64 56
next size used below it 20 24 16 16 44
the jump 3.2x 2.7x 3.0x 4.0x 1.27x
weight of the display type 510 450-500 400 500 700
first headline pixel, down the fold 24% 64% 20% 19% 12%

Three findings fall out of that, and every one of them is checkable.

1. The ladder needs a cliff, not a gradient

Each of the four uses four to nine sizes and separates the display step by 2.7 to 4 times from the next size actually used. Nothing lives in between. A page with twelve evenly spaced sizes has no display type — it has slightly bigger text, over and over.

This is the trap in modular scales. A 1.2 ratio from 16px gives you 16, 19, 23, 28, 33, 40 — and if you emit all of them, you have built the gradient. Pick four. Skip the rest.

2. Display type is not bold

None of the four sets its largest type above weight 510. Not one. Big and bold reads like a poster made in a hurry; big and medium reads like the size was already enough. Reserve 600-700 for 13-16px labels and buttons, where weight is the only emphasis available.

3. Small type is where a landing leaks

Seven sizes below 14px is how a marketing page ends up reading as a dashboard. Two of the four have zero sizes under 14px. None has more than four.

What we did with it

All three became rules in ui-craft-detect: type/crowded-ladder fires above seven distinct sizes in a file, type/display-not-separated fires when the largest is under 2x its neighbour, and type/bold-display fires on 40px+ at weight 700 or more.

They immediately failed our own pages, which is the point of writing rules rather than opinions. The uncomfortable part: an earlier pass had “fixed” our type scale by putting every size on one twelve-step ladder. That was the wrong fix, applied with confidence, and only measurement caught it.