Typography

Font families#

Two bundled typefaces, both variable fonts loaded via next/font. font-sans (Inter) is the workhorse for UI, body and the smallest headings (h5–h6); font-heading (DM Sans, with an optical-size axis) carries the headings h1–h4, so the display voice reaches the content-level titles too. font-mono falls back to the platform UI monospace - nothing to download. A heading that acts as a 14px UI label rather than a title opts back into Inter with a plain font-sans, which beats the bare element rule.

Type scale#

Sizes are absolute (rem). Each ships a paired line-height that snaps the rendered leading onto the 4px / 0.25rem grid - the lead column.

These are raw sizes, not heading roles. A bare h1–h4 carries the DM Sans face (with the negative tracking on h1–h2 only) while h5–h6 stay in Inter (see Font families), but none carry an intrinsic size, so each context steps off this scale on its own. For the document scale the Rich Text Editor maps onto H1–H4 and body copy, see its Prose scale.

Weights#

Four stops off the variable weight axis, shared by both faces. We skip 100–300 (too fragile at text sizes) and everything above 700 (heavier than the brand needs).

Tracking#

letter-spacing in em, so it scales with size. The px column is resolved at this 18px sample. Rule of thumb: tighten large display text (tracking-tight), leave body at normal, and only open up small all-caps labels.

Leading#

Unitless line-height, multiplied by the font-size. The px column is resolved at this 16px sample. Most components inherit the type scale’s paired leading; reach for these only to override it.

Eyebrow#

The small tracked caps line that names a group or a section from above it: a sidebar group, a table-of-contents title, a band in a comparison table, a panel’s “Recent activity”. It is a role, not a size, so it ships as one utility from the token layer instead of five classes copied from screen to screen, where the size and the tracking used to drift a step apart at every call site.

eyebrow is the sans label of the UI. eyebrow-mono is the typed-note voice (a Hero sign-off, a spec or build line); mono is already wide, so it opens less. Both carry the meta ink and sit on text-xs with its paired 16px leading. They set the role and nothing else: spacing and alignment stay where the label is used, and any one trait yields to the matching utility on the same element (font-semibold, tracking-wide, text-brand, text-white/80 on a photo). Never shrink one to 10 or 11px: a caps label smaller than the scale is a Badge.

// ✓ The role, in one class.
<p className="eyebrow">Recent activity</p>
<span className="eyebrow-mono">Build 2.4.1 · eu-west</span>

// ✓ One trait tuned, the rest of the role kept.
<h3 className="eyebrow font-semibold">On this page</h3>
<p className="eyebrow text-brand">New in 2.4</p>

// ✗ Hand-rolled: the size and tracking drift one call site at a time.
<p className="text-[0.6875rem] tracking-wide uppercase text-muted-foreground">Recent activity</p>