Editorial web design, measured and copyable

Editorial design is four numbers and one grid: a measure, a baseline unit, a scale ratio, and a small set of rule weights. Get those four right and a page reads as a magazine before a single image loads. Get them wrong and no amount of serif typeface will rescue it.

The measure is 66 characters, which is Robert Bringhurst's stated target inside a workable range of 45 to 75. The baseline unit is 4px. The ratio is 1.333, a perfect fourth. The rule weights are 1px, 2px and 4px, and there is no fourth weight anywhere.

why shadows somewhere and not for other cards? why so many different font sizes with no hierarchy?

A developer on Hacker News, reading a generated page

That pair of questions is the whole diagnosis. Editorial pages answer both by construction: the grid decides the sizes, so a size that is not on the ladder cannot exist, and the shadow question never arises because there are no shadows. The call, early: write the grid down before you write the page. The Thanor library writes each design's grid into its prompt for exactly this reason.

Measure, and the width that follows#

Set max-width: 66ch on every paragraph and stop tuning it. At 19px in a text serif that resolves to roughly 620px, and the ch unit means it stays correct if you change the face later.

The rest of the page is built outward from that column, not inward from the viewport:

• Text column: 66ch, roughly 620px. This is the spine.
• Figure, standard: 66ch, flush with the text. The default.
• Figure, wide: 880px, centered, breaking the column on both sides.
• Figure, full bleed: 100vw, used at most twice per article.
• Sidenote column: 180px, offset 48px to the right of the text column, collapsing to an inline block under 1100px.
• Page gutter: clamp(20px, 5vw, 64px), so the column never touches a phone edge.

Three widths for figures, not five. The reason to have exactly three is that a reader registers a change in width as emphasis, and a page with seven widths has emphasized nothing. The full bleed is the loudest move available on an editorial page, which is why the budget is two per article and a page that spends both in the first screen has nothing left.

Body copy sets at 19px, weight 400, in a text serif, with text-wrap: pretty on paragraphs and text-wrap: balance on every heading. Those two properties remove the single ragged widow that makes otherwise careful typography look untended, and they cost one line of CSS between them.

Hyphenation stays off on the desktop measure and on under 480px, where a 66ch column has become 34ch and unhyphenated rag turns into holes.

No Thanor design is a long-read page, but these three carry editorial discipline into louder work:

The scale, on a four pixel baseline#

Ratio 1.333 from 19px. Every line height in the table is a multiple of 4, which is what lets two adjacent columns share baselines.

Note that steps 0 and 1 share a 32px line height. That is deliberate: a standfirst at 25px set on the body's own leading sits tighter than the copy below it and reads as a distinct voice rather than as large body text.

Vertical spacing is every multiple of 8: 8, 16, 24, 32, 48, 64, 96, 128. Paragraph spacing is 24px with no indent, or a 1.5em first line indent with zero spacing, and the paragraph immediately after a heading is never indented.

• Space above an h2: 64px. Below it: 16px.
• Space above an h3: 48px. Below it: 12px.
• Figure margin: 48px above, 48px below, caption 8px under the image.

Rule weights, and the paper palette#

Three weights, one color each, and every horizontal line on the page is one of them.

And five ink values, on paper rather than on white:

The muted gray is at 7.29:1, which is well past the 4.5:1 floor, and that matters more here than anywhere else: captions carry real information on an editorial page and a caption at 3:1 is a decorative element pretending to be text. There is no surface color in this palette. Editorial pages do not raise things onto cards, which is why the shadow question never comes up.

The five devices, specified#

An editorial page has a fixed vocabulary. Five devices, each with values, and nothing outside the list.

1. Drop cap, first paragraph of the article only. initial-letter: 2 2 on ::first-letter, with a fallback of float: left, font-size: 82px, line-height: 0.74, padding-right: 10px, nudged until the cap's baseline sits on the second line's baseline.
2. Standfirst, one paragraph at step 1 in ink, 44ch wide, 24px under the headline. It summarizes, it does not tease.
3. Byline, step -2 all caps at 0.16em, in muted, with a 1px rule beneath at 16px clearance. Date on the same line, right aligned.
4. Pull quote, step 2, weight 400, roman not italic, 40ch wide, a 4px accent rule 120px long above it, 48px of margin top and bottom. At viewports over 1200px it hangs 64px left of the text column.
5. Caption, step -1 in muted, 52ch maximum, left aligned under the image at 8px. Never centered, never italic, and it always says something the picture does not.

The pull quote has one rule that is worth more than its specification: it must be text that appears in the article. A pull quote invented for the layout is the editorial equivalent of a stock photo, and readers who skim quotes to decide whether to read notice immediately.

Each device appears once per article, except the caption. Two drop caps means neither one marks the beginning. Three pull quotes means the article has no argument, only highlights. The scarcity is what makes any of the five land, and it is the rule a generated page breaks first because a device is easy to repeat and a reason is not.

The order, and the little motion there is#

An editorial page has almost no motion, and the absence is a decision rather than an omission. One curve, cubic-bezier(0.61, 1, 0.88, 1), at 320ms, on links and figure hovers only.

• Link hover: text-decoration-thickness 1px to 2px over 160ms. Color does not change.
• Figure hover, when the figure is a link: caption color muted to ink over 320ms. The image does not scale.
• No scroll triggered entrance animation anywhere. Text that fades in as you reach it is the opposite of a page designed to be read.

The animation effects catalog has values for every other effect, and an editorial page needs almost none of them.

The sequence, and the reason for it:

1. Kicker, step -2, naming the section. It orients before the headline claims anything.
2. Headline, step 4, text-wrap: balance, at most three lines.
3. Standfirst, then byline and rule. Attribution goes above the article because a reader deciding whether to invest twelve minutes wants to know who is asking.
4. Lead figure, at the wide width, with a caption. Not full bleed: the bleed is spent later.
5. Body, drop cap on paragraph one, first subhead no sooner than 250 words in. An earlier subhead admits the opening did not hold.
6. Pull quote at roughly 40% depth, inside the argument rather than at its top.
7. Second figure, then the closing 2px rule and one line of ask.

A reading progress bar is permitted and a sticky share rail is not. The bar is information about the document, 2px tall in the accent, and the rail is furniture that covers the measure you spent the article protecting.

The verdict on editorial as a system#

Editorial is the most transferable of the looks, because almost none of it is taste. A measure is arithmetic. A baseline is arithmetic. A ratio is arithmetic. The only genuinely aesthetic decisions in this entire article are the accent color and the choice of text serif, and both survive being wrong far better than an inconsistent grid does.

Which is also why a model gets it wrong most predictably. Unspecified, you get 16px sans across a 1100px container, a card grid where a column should be, a shadow under every figure, and eleven font sizes. The objection that prompting harder fixes this fails in a specific way: an instruction to look editorial resolves to an average of every editorial page in training, while 66ch resolves to 66ch.

Take these five values and you have the look:

• 66ch measure, three figure widths, 4px baseline.
• 1.333 from 19px, every line height a multiple of 4.
• 1px, 2px, 4px rules, one color each, no fourth weight.
• Five inks on #FCFBF7, no surface, no shadow.
• 320ms out sine on links, and no entrance animation at all.

Store them as design tokens and every page of the site inherits the same grid.

Every prompt in the Thanor library resolves its own type layer the same way, as faces, sizes and spacing written as values, for whichever model you build in. For a darker, image led brief the luxury specification is the counterpart, and the general expensive look is the version for a normal commercial page. Then open Octavo, pull a book off the shelf and see how a press's type holds up on a page that moves.