0066: Geist and Geist Mono
On this page
Status: accepted. Replaces the type in 0023.
Context
Paper (ADR 0023) set every word of the app in Recursive's monospaced style, with Newsreader for titles. With everything monospaced, labels, buttons and paragraphs read like a terminal: dense, and dated next to current desktop apps. Identifiers were meant to stand out by color and tabular figures, but in a page that's all mono they didn't. A board compared the Sites screen in the current type, in Inter with JetBrains Mono, and in Geist with Geist Mono; Frank chose Geist.
Decision
- Interface text and titles: Geist (SIL Open Font License), variable weight, self-hosted from Fontsource.
--dk-fontnames it. Titles (.dk-title,.dk-title-sm) are Geist at weight 600 with slightly tight letter-spacing, not the serif: a screen's title at 24 px and a section's, panel's or dialog's at 15 px. The serif's 32 and 21 px looked shouty at that weight. Home has no visible title; the rail already says where you are. - Identifiers and code: Geist Mono, with tabular figures.
--dk-font-mononames it;.idand.dk-monoapply it, andcode,kbd,preandsampuse it. Terminals and the code editor draw Geist Mono's static 400 and 700 (--dk-font-terminal), since a canvas can't use a variable font's weights reliably. - Website: the same two families. Newsreader stays for the website's display headings (hero, promises, questions, docs headings) through
--dk-serif; the app never uses it. - Elsewhere: Pair's browser page embeds a Geist subset; the proxy's own pages, which can't load Short Leash's fonts, use the system's sans and monospace; Pair's name tags draw with a static Geist instance.
- The wordmark (
short leashbeside the mark) is Geist Mono at weight 760.
Consequences
- Text is lighter to read and identifiers stand out again by their face, not only by color.
- Every rule that made text monospaced through Recursive's
MONOaxis became a font-family rule, and markup that leaned on everything being mono had to say which text is an identifier. - Two families to load instead of one, at a similar size.
- The design boards change with the code: every board sets its type the same way.