# Our World in Data — Longform Design Study No. 12

Study of the longform data-explainer layout at Our World in Data (OWID), a research commons where charts are the primary evidence. Reference article: "The short history of global living conditions and why it matters that we know it."

## Overview

OWID is a data-explainer, not a blog: the charts carry the argument and the prose is connective tissue between them. The whole layout is engineered for one feeling — trust — manufactured with a small, disciplined kit: a Playfair Display serif headline, a Lato body set in navy (#1D3D63) rather than black, a navy-and-gold brand with a rationed red accent, heavy citation and reuse affordances in the byline, and a steady visual cadence of roughly one chart per screen.

The signature to reproduce: a serif headline used exactly once over an all-sans page; navy ink instead of black; a white content card floating on a gold banner beneath a navy header bar and a thin red rule; a citation-forward byline (cite / reuse / versions before the read); and charts metered evenly down the page as pacing instruments.

## How it structures longform content

Reading order, top to bottom, unchanged between breakpoints:

1. Navy header bar: wordmark ("Our World in Data", two lines), nav (Browse by topic, Data, Latest, Resources, About), Subscribe (outline) + Donate (red) buttons.
2. A thin red rule under the header.
3. Gold banner with a breadcrumb (Home › topic).
4. White content card holding the centred Playfair H1 and a centred muted deck.
5. Citation-forward byline block: "By [author]", "Cite this article", "Reuse our work freely", "Browse past versions".
6. Body: Lato 18px / 1.55 in navy, with muted Lato H2 section heads.
7. Interactive chart cards embedded at a steady cadence — each titled, subtitled, sourced, with download/share controls.

Hierarchy is built from **typeface and colour contrast, not size explosions**. The Playfair H1 is the only serif on the page and is centred on a white card so it reads as a masthead. Section heads drop to a quiet 24px Lato in muted blue-grey so they behave as pauses. Colour is rationed: navy is the ink, gold frames and highlights, and a single red marks the brand rule and the Donate call — because red appears so rarely it carries weight.

The defining move: charts are paragraphs. They are steps in the argument, not illustrations beside it, and the prose exists to set up the next chart and read out the one above.

## Desktop treatment

- Body: Lato, 18px, line-height 27.9px (1.55), colour navy #1D3D63 (not black).
- Measure: 628px column, ~70 characters per line — the centre of the readable range.
- H1: Playfair Display, 40px, weight 600, centred on a white card over a gold banner.
- H2 section heads: Lato, 24px, muted blue-grey #577291.
- Deck: Lato, centred, muted, ~1.28rem.
- Byline: two-column, citation-forward (author · cite / reuse / versions).
- Visual cadence: 22 interactive charts across 82 paragraphs / ~20 screens ≈ 1 chart per screen.

## Mobile treatment (390px)

- Body shrinks to ~14px / 21px (1.5), still navy — unlike some publications, OWID lets type and measure contract on the phone.
- Measure: 295px column, ~42 characters per line.
- H1: reduces to ~20px, still centred Playfair.
- H2: ~20px, still muted Lato.
- Hero card fills the width; the gold banner shows at the top and sides rather than as a floating frame.
- Byline stacks from two columns to one, keeping the same cite/reuse links.

The contract that survives: navy ink, Playfair headline, citation-forward byline, and the one-chart-per-screen rhythm. The layout adapts; the cadence does not.

## Visual cadence (imagery / diagram strategy)

This is the point of the study. Counting figures against the scroll gives an unmistakable pattern: **22 interactive charts across 82 paragraphs, over a page ~20 screens tall — about one chart per screen.** The charts are not clumped into a gallery near the top and they do not thin out after the intro; they are metered evenly.

Plotting the running total of charts against scroll depth yields a near-straight diagonal that hugs an even-pace reference of ~1.1 charts/screen — the signature of deliberate, metered cadence. If charts were front-loaded the curve would leap early then flatten; if they trailed off it would sag. It does neither.

The consequence: imagery is a pacing instrument. Each chart breaks the scroll into a readable beat — a place to pause, absorb one fact, and push off into the next paragraph. Remove half of them and the prose would not get shorter, it would get harder to read. In the homage this is demonstrated two ways: a cadence ribbon (20 screen ticks, a gold dot on each screen that carries a chart) and a hand-built SVG line chart (navy cumulative line vs a gold dashed even-pace reference, with a gold-highlighted cluster point, labelled axes, a caption, and a "Data: illustrative" note).

## Design system (tokens)

Type:
- Headline (H1): Playfair Display, 40px, weight 600, centred.
- Body: Lato, 18px / 1.55 (27.9px), weight 400, navy #1D3D63.
- Section head (H2): Lato, 24px, muted blue-grey #577291.
- Deck: Lato, ~1.28rem, centred, muted, weight 400.
- Eyebrow / chip: Lato, 0.72rem, weight 700, uppercase, .16em tracking.
- Google Fonts: `family=Playfair+Display:wght@600;700&family=Lato:wght@300;400;700&display=swap`.

Colour:
- Navy ink `#1D3D63`
- Gold banner `#F5C33B`
- Red accent `#C0392B`
- Muted blue-grey `#577291`
- White `#FFFFFF`
- Hairline `#E3E3E3`

Layout:
- Measure 628px (~70 CPL desktop, ~42 CPL mobile at 390px).
- Leading 1.55 on an 18px body.
- Navy header bar + red rule → gold banner → white content card holding the centred headline; body in a single centred ~640px measure with chart cards embedded at one-per-screen cadence.

## Signature techniques

- **Charts as evidence, metered evenly** — roughly one figure per screen, spaced rather than clumped, each a titled and sourced card.
- **Citation-forward byline** — cite, reuse, and version links appear before the first paragraph; trust is stated structurally, not rhetorically.
- **Navy ink, not black** — a dark navy body reads as considered while staying above 4.5:1 on white.
- **One serif, used once** — a single Playfair headline over an all-sans page buys ceremony without slowing the read.
- **Framed masthead** — a white card floating on a gold band gives the title a stage and separates brand from argument.
- **Rationed red** — reserved for the brand rule and the Donate call, so it reads as intentional; colour is never the only signal.

## What to steal

1. Meter your imagery — one meaningful figure per screen turns a long read into readable beats; space them evenly instead of front-loading a gallery.
2. Lead the byline with citation — "Cite this" and "Reuse freely" before the first paragraph signal a sourced, trustworthy document.
3. Set the body in navy, not black — softer than black, just as legible, comfortably above 4.5:1.
4. Spend one serif, once — a single serif headline over an all-sans page adds ceremony cheaply.
5. Frame the masthead — a white card on a colour band gives the title a stage and separates identity from message.

## Visual references

- Desktop: ../assets/screenshots/12-owid-desktop.jpeg
- Mobile: ../assets/screenshots/12-owid-mobile.jpeg

## Source URL

https://ourworldindata.org/a-history-of-global-living-conditions