Editorial systems for the web
What print taught me about building websites that feel composed rather than assembled: type scales, baseline grids, and the discipline of the hairline rule.
- design
- typography
- process
An editorial system for the web is a small set of typographic rules — a modular type scale, one body measure, and a consistent hairline grid — that every page inherits, so a site reads like a composed publication rather than an assembled pile of components.
There's a moment in every project where a website stops being a stack of components and starts being a publication. It usually happens when the typography earns its keep, when the headline, the standfirst, and the body finally agree on a rhythm.
Why start with the type scale, not the layout?
Most layouts fail because they're decided before the type. I now begin every build by setting a modular scale and a single measure for body text. Everything else (spacing, grid, even color) falls out of those two decisions.
A page is a paragraph of paragraphs. Get the paragraph right and the page mostly designs itself.
Why is the hairline rule underrated?
A single one-pixel line does more structural work than a card with a shadow ever will. It separates, it aligns, it implies a grid without drawing one. Print designers have known this for a century; the web keeps rediscovering it.
Why is restraint a feature?
The hardest part of an editorial system is leaving things out. One accent color. One display face. One idea per screen. The result reads as intentional, and intention is the whole game.