Field notes · edition
The library, re-measured.
Three weeks on, every source was measured again from scratch. Almost nothing moved — and the one thing that did changes how the law should be stated.
Verdict: the engineering is settled
Every one of the twelve sources is still live, still serving the same reading system. Body font, size, leading and measure did not move on a single site. Three display headlines grew by two to three pixels, which is clamp() responding to the viewport, not a new type decision.
No link rot — even the Netlify deploy-preview from the first pass still resolves.
Column width and characters-per-line identical on every site.
Body line-height unmoved, 1.50 to 1.85 as before.
Penguin 61→63px, UNSW 63→65px, Honda 84.8→88px. Fluid clamps, not redesigns.
That stability is itself the finding. Measure and leading are not fashion choices that drift with a refresh cycle; they are settled engineering, which is exactly why they are safe to copy.
What is new: cadence, for all twelve
The first pass counted images but never timed them. This one measures both halves of visual cadence on every site: density (visuals per 100 paragraphs) and rhythm (median screens of scroll between visuals). Splitting them apart is what produced the sharper law below.
The law, restated
The first pass said: a visual beat every one to three screens. The re-measure supports it and sharpens it into three claims that can each be checked.
- Rhythm is near-universal. Nine of ten measurable sites beat between 0.35 and 2.56 screens, across genres that share no visual language at all.
- Density is genre-specific, spanning 0 to 793 visuals per 100 paragraphs. Choose it from your content type, not from a site you admire.
- Density does not track seriousness — placement beats quantity. NN/g, dry UX research, runs 67 visuals per 100 paragraphs. Wait But Why, famous for its drawings, runs 14. WBW's diagrams are rare and land exactly where the reader cannot picture the thing.
Aim for the rhythm, pick the density from the genre, and spend the effort on where each beat lands.
For generated content — AI explainers, audits, research digests: target the rhythm (a beat every one to three screens), take the density from the genre, and place each beat at the moment the reader is about to lose the picture. The design system works this through on a real audit report.
The numbers
| # | Site | Body | Measure / CPL | Lead | Per 100 ¶ | Screens / beat | Drift |
|---|---|---|---|---|---|---|---|
| 01 | Tubik Studio | TWK Lausanne 20px | 900 / 90 | 1.75 | 19 | 1.28 | none |
| 02 | Notes on Remix 3 | Source Sans 18px | 740 / 82 | 1.55 | 0 | — | none |
| 03 | Postcards by Elle | Spectral 20px | 728 / 73 | 1.60 | 39 | — | none |
| 04 | NN/g | Source Serif 20px | 835 / 84 | 1.85 | 67 | 0.91 | none |
| 05 | Shorthand | CircularWeb 20px | 700 / 70 | — | 75 | 5.03 | none |
| 06 | Penguin | Avenir 18px | 540 / 60 | 1.70 | 69 | 2.05 | H1 +2px |
| 07 | UNSW Newsroom | Roboto 20px | 540 / 54 | 1.70 | 21 | 2.56 | H1 +2px |
| 08 | Honda | Tahoma 16px | 540 / 68 | 1.70 | 793 | 0.39 | H1 +3px |
| 10 | The Pudding | Publico Text 17px | 640 / 75 | 1.70 | 323 | 0.35 | none |
| 11 | Wait But Why | Noto Sans 16px | 780 / 98 | 1.50 | 14 | 0.75 | none |
| 12 | Our World in Data | Lato 18px | 628 / 70 | 1.55 | 15 | 2.15 | none |
| 13 | Stripe | Söhne 18px w300 | 810 / 90 | 1.56 | 33 | 1.16 | none |
Full per-site record, including the first pass for comparison: design-tokens.md.
Method & honest caveats
Identical to the first pass, so the two are comparable: load the live page at 1366×900, read the computed styles of the median-length visible paragraph (true body copy, since headings and captions are outliers), compute characters-per-line as width ÷ (0.5 × font size), then count every img, svg, canvas, figure and video over 120px in both directions and take the median vertical gap between them.
Where these numbers are soft
Two sites undercount. Our World in Data lazy-loads its interactive charts, so a single viewport pass sees 12 of roughly 22. Postcards by Elle stacks unloaded images at the same offset, which makes the median gap meaningless — its density figure stands, its rhythm does not. Counts also include code blocks on Stripe, which is deliberate: a code block is a visual rest for a reading eye.
Reproduce or extend it with forensics-snippet.js — paste it into any page's console. The loop for adding sources is in the playbook.