FoundationsTypography
One serif. One sans. A single mono stack. Nothing else.
The site is set in a tight, neutral pair: Instrument Serif for display and emphasis, DM Sans for everything else. Two faces is the right number of faces.
The two typefaces
Instrument Serif is the only display face. It is a 21st-century reading face with high contrast, sharp serifs, and a faint calligraphic influence. It is set in 400 only, and it gets out of the way of the body.
DM Sans is the workhorse. Body, UI, navigation, tables, labels, forms. It is geometric enough to feel modern, humanist enough to feel warm, and neutral enough to never compete with the display face.
| Family | Weights | Role | Tailwind class |
|---|---|---|---|
| Instrument Serif | 400 | Display, headings, lede paragraphs, pull quotes, italic emphasis | font-serif |
| DM Sans | 400 / 500 / 600 | Body, UI, labels, navigation, table content | font-sans |
| System mono stack | — | Code, table token names, numeric metrics | ui-monospace, SFMono-Regular, Menlo, ... |
Display sizes (serif)
Six sizes, one family, all in the display role. Anything above 24 px and anything that introduces a section is set in font-serif at 400.
Body sizes (sans)
Three body sizes cover 95% of the site. Anything smaller is a label, an eyebrow, or a code block — not body text.
Common pairings
If you can pick a pairing from this table, do. New pairings are easy to add and hard to take away; this list is the one the rest of the system is built against.
| Combination | Where |
|---|---|
display-xl + body-base | Marketing home hero |
h1 + body-lg | Case study page header |
h2 + body-base | Section header in any page |
h3 + body-base | Subsection |
label + body-base | Form, table column, figure caption |
eyebrow + h1 | Page header in case study and articles |
eyebrow + h2 | Section header |
Numeric treatment
Numbers in the case study (the participant funnel counts, the metrics block, the time-on-task figures) are set in DM Sans 500 with tabular-nums enabled. The reason: when a column of numbers lines up by the decimal point, the reader can compare them without re-parsing each value.
Default
3,539 — 1,847 — 412 — 89 — 21
With tabular-nums
3,539 — 1,847 — 412 — 89 — 21
Fallbacks and the system mono stack
The mono stack is the system mono stack: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace. It is the default Tailwind mono, and we keep it because a custom mono would add one more asset to the bundle for almost no visible benefit.
.ds-prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-size: 0.9em;
}Why two faces
The site is editorial, not utilitarian. A single sans typeface would read as a SaaS dashboard, not as a long-form portfolio. A single serif would lose the UI clarity needed for forms, tables, and the case study diagrams. A pair gives both.
Why these two in particular: Instrument Serif has the warmth of a 19th-century reading face with the geometric discipline of a 21st-century interface. DM Sans is humanist, neutral, and designed to live next to a serif without fighting for attention. They were not chosen as a brand pairing. They were chosen because they sit well together on a single line.