📋 What was this drill?

Drill: Type scale: build a page using only type for hierarchy (no boxes, no color, no icons). 6 levels deep. Target: hierarchy readable at a glance.

Interpretation: Built as a long-form editorial essay for a fictional publication ('The Marginalia') about how interface typography inherited print habits. Serif/sans split (Newsreader + Inter) is the primary tonal contrast since hue is forbidden. Aesthetic reference: Stripe Press editorial restraint + literary magazine craft.

The Marginalia

Essay · No. 14 · On Typography

Reading at
Thirteen Pixels

How the interface inherited the habits of the printed page, kept most of them too long, and what a careful editor would change first—if anyone still edited interfaces the way they once edited books.

There is a number that almost no one who designs interfaces can name, and yet nearly every one of them obeys it. The number is thirteen. It is the body text size of the modern product dashboard, the help center, the settings panel, the changelog. It is not chosen. It is inherited—the way a kitchen inherits the height of its counters from the carpenter who first set them, and every counter after measures itself against that original hand.

The strange part is not that thirteen pixels is too small. It may be. The strange part is that the question of whether it is too small is almost never asked. The size arrives fully formed from the component library, and the library inherited it from the design system, and the design system inherited it from a Figma file that opened, one morning in 2019, with its default text frame set to thirteen.

Books do not work this way. A typesetter setting a novel in 1962 would have held the page at arm's length, squinted, and asked the simplest possible question: can a tired person read this in the evening?1 The interface has no such ceremony. Its text is sized by precedent, and the precedent was set by a screen that no longer exists, viewed at a distance no one sits at anymore.

The interface inherited the habits of the printed page and kept them past the point where the page stopped making sense.

The Inheritance

Consider what a book does that a screen does not. A book commits to a measure—the width of a line of text—and holds it for three hundred pages. The measure is not arbitrary. It is set so that the eye, at the end of a line, can find the start of the next without hunting. Too wide and the return sweep loses its place; too narrow and the text fractures into a column of broken phrases. The comfortable measure is somewhere between forty-five and seventy-five characters, and every trained typesetter knows this the way a carpenter knows the reach of an arm.

The web knows it too, in theory. In practice, the web sets its measure to whatever the container allows, and the container is whatever the grid spat out. A settings panel renders its help text at six hundred and forty pixels wide regardless of whether anyone is reading it, because six hundred and forty is the column width and the column width is sacred and the text is merely its guest.

What we kept, and what we dropped

We kept the paragraph. We kept the heading. We kept, grudgingly, the italic. We dropped almost everything else. We dropped the leading that made a page breathable, replacing it with a line-height of one point five because a tutorial said so. We dropped the old-style figures that kept numbers from dancing above and below the line, because the default font didn't have them and no one thought to ask.2 We dropped the small caps, the drop caps, the careful indentation that told you a new paragraph had begun without wasting a blank line to say so.

What remained was text that was recognizably descended from a book but had lost the things that made a book readable for hours at a stretch. It was text engineered to be scanned, not read. And so we scanned it, and complained that no one reads anymore, and made the text a little smaller to fit more of it on the screen.

The Measure, Revisited

Here is an experiment worth performing. Open any interface you use daily—your email, your project tracker, your banking app. Find a paragraph of body text. Count the characters across the longest line. The number will almost certainly be wrong: either so narrow that the eye snaps back and forth like a metronome, or so wide that by the time you reach the period you have forgotten where the line began.

The fix is not difficult. It is a single CSS declaration—a max-width on the reading container, set in the unit built for the purpose, the ch, which is exactly the width of the zero in the current font. A measure of sixty-two characters is a line you can read without moving your head. The interface knows this. It simply does not do it, because doing it would make the text narrower than the column, and an empty column is, to a layout engine, a kind of failure.

A measure of sixty-two characters is a line you can read without moving your head. The interface knows this. It simply does not do it.

A Note on Leading

Leading—the space between lines—is the quietest lever in typography and the most abused. A book sets its leading as a fraction of its body size, usually around one point two for a well-set page, sometimes lower for display, never higher than one point four for sustained reading. The web, having no patience for fractions, multiplies by one point five and calls the matter settled.

One point five is too much for body text. It opens gaps between lines wide enough that the eye, descending, begins to read the spaces as much as the words. The text becomes a ladder rather than a fabric. And yet one point five is everywhere—in documentation sites, in marketing pages, in the very essay you are reading now, because someone long ago decided that generous was the same as readable, and no one since has had the patience to disagree.3

The Authority of Restraint

What a careful editor understands, and what the interface has forgotten, is that readability is mostly a discipline of removal. The readable page is not the page that adds features to its text. It is the page that refuses them. It refuses the colored callout box that breaks the measure. It refuses the icon that sits beside the heading and competes with it. It refuses the second typeface that was added for emphasis and delivers only confusion. It refuses, above all, the assumption that more visual signal means more clarity—when almost always the opposite is true.

This essay has no boxes. It has no color beyond the black of its ink and the white of its page. It has no icons. Its headings are larger than its body, and its body is larger than its notes, and that is the whole of its hierarchy. You knew, before you read this sentence, which part of the page you were looking at—not because something drew a box around it, but because the type told you. That is the entire craft. Everything else is decoration applied to hide the fact that the type was never set properly in the first place.

What an editor would do first

If someone were to edit interfaces the way books are edited, the first thing they would change is not the font. Fonts are a fetish; the difference between one good serif and another is felt only by the people who argue about them. The first thing they would change is the size. They would set the body to something a person could read at the end of a twelve-hour day, and they would let the measure follow from that size rather than the other way around. They would treat the line of text as the atom of the page, and build everything—the column, the grid, the nav, the chrome—in service of it.

Instead, we build the grid first, and ask the text to fit. The text always fits. It has been fitting, obediently, at thirteen pixels, for a decade. It will fit at twelve if we ask it to. It will fit until someone reads it and finds they cannot, and by then the page will have shipped, and the counter will have been built to its height, and the next interface will measure itself against this one, and inherit the number, and never ask where it came from.

§
Set in Newsreader & Inter.
Body 18 / 24. Measure 62 characters. Leading 1.62.
No boxes, no color, no icons. Hierarchy by type alone.

Notes

  1. The question is recorded nearly verbatim in Bringhurst’s account of setting poetry for evening reading; the “tired person” is his, not mine, and it is the only test of a body size that has ever mattered.
  2. Old-style figures—the kind where the 3 and the 9 drop below the line and the 7 sits high—are the reason a date set in a good book does not look like a date set in a spreadsheet. Their absence in interfaces is not a limitation of the screen. It is a limitation of care.
  3. This essay, being set on the web, inherits the problem it describes. Its leading is 1.62—a compromise toward readability that a book typesetter would find generous to the point of looseness. The medium is not neutral.