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.