Typography
One grotesque and one mono, swapped as a pair. Four pairings ship, and the switcher in the top bar changes the live page — the faces are a token like any other.
The four pairings
A pairing sets --font-sans and --font-mono together, so there is no way to mismatch them. Each carries a full fallback stack, which means an app that loads no webfonts lands on System rather than on Times.
SF Pro on Apple hardware, Helvetica Neue elsewhere. Zero bytes over the wire, and already the Swiss face.
Built for screens, enormous weight range, tight default tracking. The closest thing to a neutral grotesque that was designed for pixels.
A corporate grotesque with actual warmth — slightly humanist, less anonymous than Inter.
Grotesque with a wider lowercase and firmer terminals. Holds up best at display sizes.
The scale
A modular scale at roughly 1.2, on a 15px body. The product default is 14px — a dashboard set at 16px reads as a marketing page, and the two sizes below the body are where most of a real interface actually lives.
Set running text to roughly 65 characters and leave it alone. Flush left, ragged right, never justified — justification without hyphenation opens rivers, and Swiss setting is ragged by conviction rather than by compromise.
Weight stops at 600
Swiss hierarchy is built from size and space, not from weight. Three weights exist — regular, medium, semibold — and headings never go past the last of them. An 800-weight interface reads as a startup landing page, which is the opposite of what a tool should sound like.
Where mono belongs
Mono plus caps plus tracking is a real device, and the fastest way to make a system look like a template is to use it on every label. It is restricted to data chrome — table headers, menu group labels, token names, code — and form labels are plain sentence-case sans at 13px instead.
| Item | Pins | Change |
|---|---|---|
| Jeanne Dielman | 1,284 | +112 |
| Hats | 977 | −8 |
| Pond | 412 | +1,001 |
Anything numeric that sits in a column gets font-variant-numeric: tabular-nums, so digits line up. Tables and [data-numeric] pick that up automatically from base.css.
Supplying the faces
A pairing references var(--font-inter) and friends; the consuming app supplies them. Here that is next/font, which also means no layout shift and no external request at runtime.
// apps/docs/app/fonts.ts
export const inter = Inter({
subsets: ["latin"],
variable: "--font-inter", // <- the contract with tokens.json
display: "swap",
});
// then put the variable classes on <html>
<html className={fontVariables}>