The comfortable measure, and why every redesign forgets it

Every few years someone redesigns a publication I read, and every few years the column gets wider. The type gets bigger too, which is meant to compensate, and for a paragraph it does. Then the eye reaches the end of a line, swings back, and lands a line off. You reread. You don't notice you've reread. You just notice, eventually, that you're tired.1

The measure — the length of a line, counted in characters — has a comfortable range, and it's narrower than most screens. Somewhere between 45 and 75 characters, with 66 as the number the old manuals give. Not because 66 is magic, but because it's roughly the width your eye can take in at the start of the swing back, so it knows where it's going before it goes.

What the wide column is compensating for

Nobody widens a column because they've decided readers should be uncomfortable. They widen it because the screen is wide and the empty space looks like a mistake. It isn't. Empty margins are where the reader's attention rests between lines; they're doing work. But a stakeholder looks at a mockup and sees waste, and the column grows.

The fix that follows is to grow the type, which restores the character count but not the comfort: now each line is a mouthful, the paragraph is a wall, and the page scrolls forever. You've traded one kind of fatigue for another.

figure · the same paragraph at 55, 66 and 95 characters

Leading is the other half

A line of 66 characters wants a little more space between lines than a line of 45 — the swing back is longer, so the landing needs to be clearer. On screen, something around 1.5 to 1.6 for body text at 18 pixels; less for larger type, more for smaller. Get this wrong and even a perfect measure feels cramped.2

The margin is not the absence of the page. It is where the reader lives.

Doing it in CSS, honestly

The whole trick is one declaration, and the temptation is to make it clever. Don't. A max-width in rem on the text column, set from the font, and nothing else.

.prose {
  max-width: 40rem;      /* ≈ 66 characters at this size */
  font-size: 1.125rem;   /* 18px, from html { font-size: 112.5% } */
  line-height: 1.6;
}

Using ch units is the clever version — max-width: 66ch — and it works, but it measures the width of a zero, which in most serifs is wider than the average letter. You'll land nearer 75 real characters. Fine for a sans; a little long for this one.

The redesign that got it right

It exists. It's the one you didn't notice, because you read the whole article and didn't feel anything about the layout at all. That's the entire ambition: to be the thing nobody mentions.