A short note on Geist Mono

This is a short post. It exists partly to say something about the monospace font, and partly to make sure the layout holds up when there are only two headings and no cover image — the header art you see above is generated from the slug.

Why Geist Mono#

Most monospace fonts are designed for the editor: high contrast, distinctive glyphs, ligatures that turn => into an arrow. Geist Mono is designed for the page. It's a little lighter, a little quieter, and it sits next to a sans-serif without shouting.

export const fonts = {
  sans: 'var(--font-instrument)',
  mono: 'var(--font-geist-mono)',
  serif: 'var(--font-platypi)',
} as const;

The key is that inline code like useEffect should read as part of the sentence, not as a quotation from another document. Geist Mono at 0.875em inside body text does that. Most other monos need to drop to 0.8em before they stop looking oversized, and by then they're hard to read.

The one thing I turn off#

Ligatures. Geist Mono ships with them, and they're lovely in an editor, but in a blog post they quietly change what the reader sees. If I'm explaining that !== is three characters, I want three characters on the screen.

pre {
  font-variant-ligatures: none;
}

That's the whole note. Back to the longer one about the layout if you want the rest of the thinking.