sdfkjh · design study

The editorial spread

The magazine opening as a working artifact: two facing pages, a drop cap, measured columns on a baseline, a quote that interrupts, footnotes that keep the receipts. Print's reading devices, set live on the web.

Study page. Noindex; linked only from the home page. After a convention rather than one artifact: the postwar editorial spread.

typography · in working order

The devices of the page

Five centuries of print solved most of what makes long text readable. This spread sets the old devices working on the web, and every claim in it can be checked against the page it sits on.

Every device on this spread is older than the screen drawing it. The drop cap, the measured column, the pull-quote, the footnote, the folio in the corner: each one is a solved problem, worked out by hand across five centuries of print and then largely left behind when text moved to the web. What follows is a working tour. Each device named here is also in use here, so nothing has to be taken on faith.

The spread has already used its loudest device by the time you reach these columns. The opener is a strict hierarchy: the kicker names the territory, the headline makes the claim, the standfirst makes the promise, and only then does the body pick up in a quieter voice. Three sizes, one order. The reader is never left to decide what to read first; the page decided.

Start with the letter you could not miss. The drop cap descends from the illuminated initial: before title pages and running heads existed, an oversized letter was how a manuscript said begin here. It still does that job.¹ The eye lands on the big letter first and the paragraph collects you from there. It is an entrance, and a page, like a building, wants one obvious door.

The column is the quieter device. Its whole job is to keep the measure short. The old working band is 45 to 75 characters for a single column, and 40 to 50 when columns share a page.² Past the band, the eye starts losing the return trip to the next line; well short of it, the setting falls apart. A magazine runs narrow columns at small sizes not as a style but because that is where reading is fastest.

Justification is the device you notice least. Print justifies with hand-fit hyphenation and a compositor who sweats the rivers out of the block. The web justifies with whatever the engine ships.³ These columns default to justified, hyphens on, because the spread should look like what it is quoting. The seams are part of the demonstration: switch the setting to ragged above and watch the grey of the page change.

A pull-quote is theft in plain sight. A line is lifted from the body, set three or four times the size, and dropped back in the reader's path. In print it earns its keep twice over: it gives the scanning eye a hook before any commitment is made, and it gives the reading eye a place to rest. On the web it mostly survives as decoration between blog paragraphs, full width, interrupting nothing. Set properly, it breaks the very measure it was pulled from, the way it does a few lines down.

The footnote is the page's original hyperlink. A claim keeps its receipt without breaking the sentence, and the reader decides whether to follow. It also carries a tone the main text cannot: the aside, the concession, the source given straight. The three notes on this page hold the technical caveats, which is the honest modern use. The body makes the claim; the note admits the machinery.

The chrome earns a word too. The running head at the top and the folio in the corner are print's navigation: at any opening you know what you are reading and where you are in it. The scroll traded that for a scrollbar, which answers how far but not where. On this spread they are reproduced mostly as furniture, and marked as furniture, so a screen reader is not made to read the wallpaper.

None of this is nostalgia. Reading did not change when the medium did. Attention still wants an entrance, a short line, a resting point, and a receipt; the devices are just the names print gave those wants. Whether they hold here is not something to take on trust either. The overlay above exposes the baseline, the column switch bends the measure until it breaks, and the notes below admit what the engine is really doing. Look.

notes

Set the old way: a floated first letter sized to the type. Engines that support CSS initial-letter set the cap on the grid itself; the float is the fallback everything else gets. Same look, different machinery. ↩
The band is Bringhurst's, from The Elements of Typographic Style: 45 to 75 characters as the satisfactory single-column range, 40 to 50 for multiple columns. ↩
hyphens: auto and the browser's line-breaker, which fits one line at a time. Print justification is fit by hand, or paragraph-at-a-time; the web is only beginning to grow that. Any river you can find in these columns is the gap between the two. ↩

Why two columns: measured live at this window width, two columns hold about 40 characters to the line, at or near print's 40-to-50 multi-column band; three drops to about 26, far below it, and the justified setting turns to gravel. The numbers in this sentence are computed from the page, not typed into it. The switch above is the rest of the argument: flip it to three and look at the rivers.

A two-page editorial spread built from live text: kicker, headline and standfirst on the verso, justified columns on a 22px baseline, a floated drop cap, a pull-quote spanning the measure it interrupts, footnotes with real references, running heads and folios. Desktop only as a spread: on phones the pages stack and the columns give way to one measure.

The source

No single artifact this time. The editorial spread is a convention, worked out across the postwar magazines: the art-director era of Brodovitch's Harper's Bazaar openings, the news weeklies, the literary reviews with their footnoted essays. The sketch is the composite opening everyone recognizes: headline low on the verso, columns marching right, one quote breaking the grid, the notes anchored at the foot.

Structure only: the composite convention, no one magazine's page.

taken

the facing-page spread as the unit of composition
the kicker, headline, standfirst hierarchy
justified narrow columns on a fixed baseline
the drop cap as the entrance
the pull-quote breaking the measure
footnotes, running heads, folios

invented

the article is about its own devices, so the page is its own evidence
live column, setting, and baseline switches in place of ink
note references print never needed: doc-noteref semantics for assistive tech
a stacked single-page translation below 960px

Six devices

The entrance.A drop cap marks begin here; the eye wants one obvious door.
The measure.Columns keep the line short: 45 to 75 characters alone, 40 to 50 shared.
The interruption.A pull-quote breaks the measure it was lifted from. A hook, then a rest.
The receipt.Footnotes hold sources and concessions without breaking the sentence.
The chrome.Running heads and folios answer where am I; the scroll never quite does.
The baseline.One fixed rhythm under the body; every space a multiple of it.

Mobile is a decision, not a breakpoint. Below 960px the spread stops pretending: the pages stack, the duplicate running head and folio drop, and below 620px the columns give way to a single measure at a larger size on a looser baseline. A phone is not a small magazine; it is a different reading surface, and the single column is the honest translation.

Caveats: the drop cap is progressive enhancement, a floated first letter with initial-letter layered on where the engine has it. The pull-quote is hidden from assistive tech because it duplicates body text verbatim; hearing the same line twice is print aesthetics leaking into someone's ears. The baseline overlay draws the 22px rhythm the body is set on, not true optical baselines. And multicolumn on the web balances columns automatically, which print never promised: resize the window and watch the columns re-pour.