Designing for the second read

There is a moment, somewhere in the first ten seconds on a page, when a reader
decides whether they are in the right place. Every blog template is tuned for
that moment. The border radius, the hero image, the font size, the contrast
ratio — all of it is aimed at the glance.

The second read is a different problem, and almost nobody optimises for it.

## The first read and the second read are different jobs

The first read is **triage**. The reader is deciding, at speed, whether to keep
going. It wants: high contrast, obvious structure, a headline that promises
something specific.

The second read is **comprehension**. The reader has already decided to stay.
They want: a comfortable measure, enough leading, and nothing in the margins
pulling at them.

These two jobs want opposite things. A page optimised for triage is usually
loud. A page optimised for comprehension is usually quiet. Most sites pick
triage, because triage is the visible one — it’s what you can screenshot and
show a client.

### What triage actually requires

Only three things, really:

1. A headline that makes a specific claim.
2. Enough contrast that nothing is hard to find.
3. A visible path to more content.

Everything else in the “engagement” playbook is noise at this stage. Carousels,
animated counters, newsletter modals that appear after four seconds — all of it
is a bet that the reader is still in triage. Most of them are wrong, because the
reader who was still in triage just left.

## What comprehension actually requires

This is the part that gets skipped. Long-form reading in a monospace face is a
genuinely unusual choice, and it is unforgiving:

“`css
/* The line-height that makes mono prose bearable. */
.prose {
font-family: var(–font-mono);
line-height: 1.75;
max-width: 66ch;
}
“`

Three values carry almost all of the weight:

| Property | Value | Why |
| ——— | ——– | ———————————————— |
| Measure | `66ch` | Monospace glyphs are wide; more characters per line is unreadable. |
| Leading | `1.75` | Mono has no ascender/descender variation to rely on for separation. |
| Body size | `16px` | Below this, mono strokes start to crowd at 1x DPR. |

Go below 16px and the whole thing starts to look like a terminal emulator
screenshot rather than a page someone is meant to read.

> The measure is the single highest-leverage decision on the page, and almost
> nobody gets a second look at it once the design is signed off.

## The uncomfortable conclusion

If you only have budget for one thing, spend it on the article body. Not the
hero, not the nav, not the footer. The body.

The hero earns its place once, at the very start, and then it is a rectangle
taking up a third of the viewport. The body is what the reader is actually
looking at for the next eight minutes.

## A quick audit

If you want to check your own site, disable images and read it. If the page
still works as a document, the typography is doing its job. If it collapses
into a wall of undifferentiated text, the hierarchy was living in the images
the whole time.