Craft

How We Set Type for the Screen

Line length, leading and a little restraint: the handful of typographic decisions behind this journal.

Abstract illustration: a black letterform, a terracotta bar and a pale circle sitting on a ruled baseline.

People sometimes ask why this journal looks the way it does. The honest answer is that we made a few typographic decisions early and then tried hard not to undo them.

Line length first

A comfortable line of text holds somewhere between fifty and seventy-five characters. Longer, and the eye loses its place on the way back; shorter, and reading turns choppy. Everything else follows from the width of the reading column, so we set it first and let the page grow around it.

Leading follows width

Line height (leading, from the strips of lead printers once slid between lines) needs to grow with line length. Our body text sits at about 1.6 times its size. Headings get tighter leading, because they are short and large.

Good typography is mostly the decisions you notice only when they are wrong.

Fewer fonts, used well

We use a serif for reading, a second serif for headings and a sans serif for small labels like dates and categories. Three families, each with one job. The fonts are served from our own site rather than a font service, which keeps pages fast and keeps readers' visits to ourselves.

Contrast is not optional

Every colour combination on this site is checked against the WCAG contrast guidelines, including the dark mode. Pale grey text on white looks elegant in a mock-up and is miserable to read on a phone in sunlight.

None of these ideas is new. They are borrowed from centuries of book design, and they still work.

at-setup-7q4x

All posts by at-setup-7q4x

Leave a comment

Your email address will not be published. Required fields are marked *