Notes on reading, on paper and on glass

Reading on a screen is not reading on paper with the lights on. The differences are small individually and they compound, and almost all of them push in the same direction: a screen needs more air.

Contrast is not the same problem

On paper, ink is darker than anything a screen emits, and the page reflects the light in the room. On a screen the page is the light source, so pure black on pure white is harsher than the equivalent on paper. Most well-set screen text is not black; it is a very dark grey, and the reason is comfort rather than style.

The resolution argument is mostly over

For twenty years the honest answer to "why does this look worse on screen" was pixel density. That argument has largely expired: a modern phone resolves type better than newsprint. What remains is variability — the same page renders on a hundred different panels at a dozen brightnesses, and unlike a printed book you cannot tune for the medium because there is no single medium to tune for.

Distance is the variable nobody designs for

A book is held where the hands put it, and the hands are consistent. A screen is read wherever it happens to be standing, and the span is enormous:

The same pixel size is four different reading experiences, which is the honest argument for letting the reader change the type size and for testing a page at arm's length, not just at a desk. The setting on this site that scales the whole page exists because of the bottom half of that table.

What actually helps

Slightly more leading than you would set in print. A slightly shorter measure, because a screen is read at a less predictable distance. And a size chosen for the worst case rather than the best: someone reading on a bus, one-handed, at arm's length.

Put a number on it. If $L_t$ is the luminance of the text and $L_b$ that of its background, the contrast ratio is $C=(L_b+0.05)/(L_t+0.05)$ — and pure black on pure white gives

which is roughly double what ink on good paper manages. That surplus is not a bonus. It is the glare, and dropping the ground to a paper white takes $C$ back to about seventeen without costing a reader anything they were using.

None of that is exotic. It is the same craft, applied to a surface that moves.

What that looks like in a stylesheet

Three declarations, and the third is the one everybody forgets:

.prose {
  max-width: 34rem;      /* the measure, not the window */
  line-height: 1.7;      /* looser on glass than on paper */
  hyphens: auto;         /* only once the column is wide enough */
}

Set the measure in rem rather than in characters: ch is the width of a zero, and a zero is not the average letter in any language with diacritics.