Typography
IBM Plex Sans for body and display. IBM Plex Mono for code, labels, and numeric grids. The scale is fluid above the body size and fixed at the body size and below.
Font stacks
Four semantic tokens, one family
--font-body
IBM Plex Sans: body prose, the workhorse
--font-mono
IBM Plex Mono: code, labels, numerics, eyebrows
--font-ui
UI labels: same as body by default; sites can flip to mono
--font-display
Display headings: same as body by default; serif if a site overrides
Type scale
Fluid above body, fixed at and below body
--text-xs
0.72rem
The quick brown fox
--text-sm
0.85rem
The quick brown fox
--text-base
1rem
The quick brown fox
--text-lg
1.2rem
The quick brown fox
--text-xl
clamp(1.35rem, 1.15rem + 0.4vw, 1.55rem)
The quick brown fox
--text-2xl
clamp(1.6rem, 1.25rem + 0.6vw, 1.85rem)
The quick brown fox
--text-3xl
clamp(1.9rem, 1.45rem + 0.8vw, 2.35rem)
The quick brown fox
--text-4xl
clamp(2.4rem, 1.8rem + 1.2vw, 3.2rem)
The quick brown fox
--text-display
clamp(2.375rem, 1.2rem + 4.9vw, 5.25rem)
Display
--text-label
0.6875rem
MONO CAPS LABEL
Line heights
| Token | Value | Use |
|---|---|---|
--lh-base |
1.55 |
body prose |
--lh-tight |
1.3 |
meta, dense lists |
--lh-hero |
1.15 |
large display headings |
--lh-display |
0.9 |
the hero title |
Sample prose
How body, mono, and display work together
This is a section heading
Plex Sans handles body text without complaint. Reading column kept narrow keeps the line length within a comfortable range; lines that get too long force the eye to track too far between row returns and reading slows down.
Inline code references and emphasis sit naturally in
the text. Links pick up the accent color and stay
readable when the page flips to dark mode.
Subhead level
Sub-headings step down from the section title without disrupting the
body grid. Numerics like 2026-04-28 or $48.27
align nicely when set in mono.
// Code blocks use --font-mono
const accent = getComputedStyle(root).getPropertyValue('--accent');
console.log(accent.trim());