Colophon

Two typefaces, one column, no accent colour. The rule that decides which face goes where is that mono is for the record and serif is for the argument. Anything that is a fact, a label, a timestamp, a number, or a piece of navigation is set in mono. Anything making a case is set in serif.

Type

The record face is Commit Mono, by Eigil Nikolajsen. A mono was the obvious choice for a site organised as a register: it is the native face for records and figures, and its digits align without being asked to. It is also the largest type here, which is the part people find strange.

The argument face is Newsreader, used only for essay body copy, the line under my name, and photograph captions. It never exceeds 18px. Promoting it to headlines would produce a perfectly nice editorial site that looks like every other editorial site.

Both are self-hosted, subset to Latin, and served as woff2. Commit Mono ships static weights rather than a variable build, so 400 and 500 are two files and both are preloaded.

Palette

The paper is a cool grey rather than cream, and the ink is blue-black rather than neutral. There is no accent colour. The only chroma on the site comes from two places: numbers that carry a sign, and photographs.

Green and red are reserved for signed numbers — a return, a P&L figure, a delta. They are never used for links, buttons, borders, status indicators, or decoration. That restriction is the whole reason they mean anything when they do appear.

Stack

Astro with MDX, plain CSS with custom properties, and no framework on the page except one small React island for the hover preview. Every route is static HTML and renders completely with JavaScript disabled. The previous version of this site was a Create React App build that served an empty <div> to anything that could not run JavaScript, which meant search engines and link previews saw nothing at all. That was the actual reason to rebuild.

Hosted on Netlify. Source is public.

One decision that was hard

The brief said every number on the site had to be set in tabular figures, and that both faces had to be checked rather than assumed. Checking felt like ceremony — mono is monospaced, so its digits are identical by construction, and the roman serif turned out to be uniform too.

Then the italic serif came back with a 7 that is 1300 units wide against 1133 for every other digit. Italic serif is what photograph captions and figure captions are set in, and those captions carry ISO dates. Every date containing a seven would have sat a hair out of line down the whole page — the kind of thing you would feel without being able to name it. The check I nearly skipped was the only one that found anything.

The awkward part is that the fix, font-variant-numeric, does nothing at all on the mono face, because Commit Mono ships no figure features to switch on. So the declaration that makes the site correct is inert almost everywhere it appears. I left it applied globally anyway, rather than surgically on the serif, because the next face someone swaps in will not necessarily be so well behaved.

Source repository

Index