The type ladder is the tell: what four world-class landings have in common
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.