Colophon
Two serifs, one sans, four colours and a great deal of restraint.
Newsreader Display, drawn from its own outlines.
48Newsreader Display
32Headlines and drop caps
22Pull quotes, set in italic
The faces
Aa Bb Cc · 0123456789
Display: the wordmark, headlines, drop caps and pull quotes.
Variable 400 to 700, roman and italic 271 KB
A transitional serif drawn for screen reading at larger sizes. It carries the masthead, so it is the face that has to be recognisable at a glance and still hold up at fourteen pixels in a caption.
Aa Bb Cc · 0123456789
Body: every paragraph of every essay.
Variable 400 to 600, roman and italic 168 KB
Chosen for the same reason most book faces are chosen, which is that it disappears. If you notice the body face while reading, something has gone wrong with it.
Aa Bb Cc · 0123456789
Interface: small caps labels, navigation, metadata.
Variable 400 to 600 43 KB
The only sans on the site, used at eleven pixels and below and never for anything a reader would call content. It exists so the labels do not compete with the prose.
Aa Bb Cc · 0123456789
Code, and strictly nothing else.
Variable 400 to 700 30 KB
Loaded only where there is code to set. Monospace anywhere else, in navigation or labels or buttons, is the loudest way a site can announce that a developer built it.
The inks
The oxblood is the whole restraint of the palette in one rule: it appears on the wordmark rule, drop caps and pull quote bars, and nowhere else. It is never a link colour, never a button, never a hover state. A colour used everywhere stops meaning anything.
The measure
Essays are set at nineteen pixels on a line height of 1.7, in a measure of thirty-six rems. That works out at roughly seventy characters a line, which is close to the width printed books settled on long before anyone was arguing about it on the web. The text is justified with hyphenation enabled, because justification without hyphens produces rivers of white space, and rivers are worse than a slightly ragged edge.
Turn the grid on and the horizontal rules sit on the baselines, 32.3 pixels apart. The vertical rules mark the measure. Nothing here is snapped to a grid programmatically; the rhythm is what falls out of setting one line height and leaving it alone.
The imprint