ThePudding

Longform design study  ·  No. 10

The Pudding — a longform design study, number ten

By the Longform Library  ·  a stylistic homage

July 2026

A design study of The Pudding's data-essay format — where a visual lands on almost every screen and the prose plays annotation to the charts.

How it works

How it structures longform content

The Pudding builds a story out of pictures. Prose sets up a question, a chart answers it, and the next chart pushes the argument forward — so the page reads as a run of visual beats rather than a wall of text.

The reading field

Everything sits on a calm pale blue-grey field, not white. The tint takes the glare off a long read, warms the page, and gives every chart the same quiet stage to stand on. Body copy is held in a narrow column around 640 pixels wide, which keeps the measure near 75 characters a line no matter how large the monitor gets.

Hierarchy, kept quiet

The type never shouts. A high-contrast display serif marks the title, small sans labels tag the data, and a transitional serif carries the body. The loudest thing on any screen is deliberately not a headline — it is the chart. Structure comes from the rhythm of visuals, not from a ladder of headings.

Imagery is the spine

On the pockets essay there are roughly 110 significant visuals — about a hundred of them hand-built, interactive SVG charts — against just 30 paragraphs. There is more picture than prose. The words are the connective tissue between the things you are meant to look at.

The measurements

Desktop vs mobile

The system barely changes shape on a phone. The body shrinks a single step, the column goes full-width, and the charts reflow to one column while staying interactive. The rhythm survives the resize.

Measured treatment — desktop (1366) vs mobile (390)
PropertyDesktopMobile · 390
Reading fieldPale blue-grey #E7EEF8 (not white)Same tinted field
Body facePublico Text serif (Source Serif 4 here)Same face
Body size / leading17px / 28.9  (1.7)16px / 27.2  (1.7)
Measure / CPL640px column, ~75 CPL375px full-width, ~47 CPL
Display faceCanela contrast serif (Fraunces here)Same, scales down
Labels / UIAtlas Grotesk sans (Inter here)Same
HeroDashed sewing-pattern title on a mid-blue fieldSame motif, tighter frame
ChartsFull-width interactive SVG, ~1 per screenSingle-column, still interactive
BrandRed vertical "ThePudding" tab + menuSame tab, top-right
Length~12.2 screens tallLonger scroll, same beats

The point of the study

Visual cadence

This is the move worth stealing. The Pudding paces the essay with images, not headings. A visual appears about every screen, and because each chart is built in SVG it animates, snaps and resizes as you scroll — so the diagram does the work a paragraph would do elsewhere.

Figure 1 · Visuals vs paragraphs, four viz-led essays

Significant visuals plotted against paragraph count. The Pudding is the only one where the blue bar clears the pale bar — where the page draws more than it writes.

Visuals versus paragraphs across four data- and diagram-led longform essays. Grouped bar chart. The Pudding: about 110 visuals versus 30 paragraphs. Our World in Data: 22 visuals versus 82 paragraphs. Wait But Why: 10 visuals versus 69 paragraphs. Stripe: 11 visuals versus 42 paragraphs. The Pudding is the only essay whose visual count exceeds its paragraph count. 0 30 60 90 120 COUNT IN ONE ESSAY Visuals Paragraphs 110 30 22 82 10 69 11 42 draws > writes The Pudding OWID Wait But Why Stripe
Significant visuals vs paragraphs across four data- and diagram-led essays (measured, this study). The Pudding is the only one that draws more than it writes — about 110 visuals, a hundred of them hand-built SVG charts, against thirty paragraphs. Everywhere else the prose still outnumbers the pictures. Source: forensic capture of pudding.cool/2018/08/pockets and the wider library.

Spread across roughly 12.2 screens, that budget works out to a visual about every half-screen. The prose never has to describe the trend in words — the reader simply watches it move. Cadence, not headings, is what tells you where you are in the argument.

Figure 2 · The cadence of visual beats

Each dash is one visual, set along the scroll. The denser the rail, the faster the beat — and a picture is never more than half a screen away.

Visual pacing compared: The Pudding places a visual on roughly every half-screen, versus about one every two screens in a typical explainer. Two horizontal dashed rails plotted over a scroll-depth axis running from zero to 12.2 screens. The upper rail, The Pudding, is a dense, evenly spaced run of visual beats at roughly two per screen. The lower rail, a typical explainer, is sparse, at about one beat every two screens. THE PUDDING · ≈2 VISUALS PER SCREEN TYPICAL EXPLAINER · ≈1 VISUAL / 2 SCREENS 0 2 4 6 8 10 12 SCROLL DEPTH — SCREENS (ESSAY ≈ 12.2 TALL)
A schematic of pacing, not a literal count: each dash is a visual beat set along the essay’s 12.2-screen scroll. The Pudding keeps a visual on nearly every half-screen, so the eye is never far from something to read into; a conventional explainer spaces them out and leans on prose. Cadence, not headings, is what moves you down the page.

The parts list

The design system

Type pairing
Display: Fraunces, standing in for Canela — a high-contrast serif for the title. Body: Source Serif 4 for Publico Text. Labels & UI: Inter for Atlas Grotesk.
Type scale
Body 17px on desktop, 16px on mobile. Section titles clamp up to ~2.6rem in the display serif. Labels sit at ~0.72rem, letter-spaced, uppercase.
Measure & leading
Reading column ~640px, about 75 characters per line, line-height 1.7. On mobile the column goes full-width at ~47 CPL, leading held at 1.7.
Signature devices
A tinted reading field, a dashed sewing-pattern hero tied to the subject, a red vertical brand tab, and a chart on almost every screen.

Palette

  • Reading field#E7EEF8
  • Hero blue#8FB2DD
  • Ink#282828
  • Chart blue#6E9BD6
  • Chart deep#2E5E9E
  • Brand red#E5233D
  • Hairline#C9D6E8

Takeaways

What to steal

  1. Put the data first. Lead a section with the chart and let the prose annotate it. When the claim is quantitative, the figure is more persuasive than the sentence describing it.
  2. Tint the field. A pale blue-grey stage beats white for a long, chart-heavy read. It cuts glare and gives every visual a consistent, calm background.
  3. Pace with pictures. Aim for a visual roughly every screen. That cadence, not a ladder of headings, is what carries the reader through a long argument.
  4. Keep the measure tight. Hold body copy near 640px and ~75 characters a line even when the charts run full-width. The reading column stays comfortable; the visuals get the room.
  5. Theme the furniture. A subject-grounded motif — here, dashed sewing-pattern outlines — ties the chrome to the story and makes the piece feel authored, not templated.

Source

Visual reference

Desktop · the dashed-outline hero

The Pudding pockets essay on desktop: a mid-blue hero field with the word POCKETS drawn as dashed sewing-pattern outlines, two serif lines above it, a centred byline, and a red vertical ThePudding tab at top-right.

Mobile · 390

The Pudding pockets essay on a phone: the dashed POCKETS hero shrinks into a tighter frame above a full-width serif reading column on the pale blue field.
Screenshots of The Pudding — “Women’s Pockets are Inferior”, captured for commentary in this design study. Reproduced small and attributed; all rights belong to The Pudding. The homage above evokes the layout and the dashed sewing-pattern motif with original CSS and SVG rather than the source artwork or charts.