Feature — 12 minutes
The measure is the argument
By Bruno Oteiza · Illustrated with photographs credited at the end.
Every decision a page makes about reading is made twice: once for the eye that scans it and once for the eye that gets tired. A column of sixty-six characters is not a rule handed down from a print shop; it is the width at which a reader can find the beginning of the next line without thinking about it. Miss it by twenty characters in either direction and the reader starts doing work the designer should have done.
What is certain is the page you are reading it on: one stylesheet, one optional script, no fonts fetched from anywhere, no analytics, no requests at all. The bar at the top of the window is the reading position. The pale underline under the words below opens a note.
The argument for a narrow measure , and most of it is recycled from typesetters who never had to think about a phone held at arm's length in a bus. The useful part survives anyway: shorter lines, more leading, and a body size that does not shrink on the device where most of the reading happens.
“A page is not a container for text. It is an instrument for a particular kind of attention, and attention is the thing in short supply.”
What a margin is for
A margin is not empty. It is the part of the page that tells the eye where the text is not, and that job matters more as the screen gets smaller. When a layout runs its text to both edges it has not gained space; it has removed the frame that made the column readable in the first place.
The gutters on this page are set with a single clamp, so the same rule produces twenty pixels on a phone and seventy-two on a wide screen. The reading column never grows past sixty-six characters no matter how much room there is, because a wide screen is .
Notes in the margin, not in a new tab
The two underlined phrases above open small panels anchored to the word that raised them. They are native popovers, so they open without any JavaScript at all; with the script they position themselves next to their button and the keyboard can reach and dismiss them. Nothing is fetched to fill them: the text was served with the page.
The gallery below is the plate section of this issue. Each plate is a link to its own file, so it works before any script runs; with the script a click opens the viewer, the arrow keys walk the set and Esc returns focus to the plate you came from.
