Tokens

Typography

Sizes from text-lg up are fluid. A size class sets no line height, so pair it with leading-* or use a composed text-display-* or text-ui style.

Open in all tokens

Font families

Ag
'Intermission', 'Inter', ui-sans-serif, system-ui, sans-serif
Ag
'IBM Plex Mono', ui-monospace, monospace
var(--font-sans) → 'Intermission', 'Inter', ui-sans-serif, system-ui, sans-serif
var(--font-sans) → 'Intermission', 'Inter', ui-sans-serif, system-ui, sans-serif

Font sizes

Ag
0.75rem
Ag
0.875rem
Ag
1rem
Ag
clamp(1.125rem, 1.0147rem + 0.3676vw, 1.25rem)
Ag
clamp(1.25rem, 1.0294rem + 0.7353vw, 1.5rem)
Ag
clamp(1.5rem, 1.0588rem + 1.4706vw, 2rem)
Ag
clamp(1.75rem, 1.0882rem + 2.2059vw, 2.5rem)
Ag
clamp(2rem, 1.1176rem + 2.9412vw, 3rem)
Ag
clamp(2.25rem, 0.7059rem + 5.1471vw, 4rem)
Ag
clamp(2.5rem, 0.5147rem + 6.6176vw, 4.75rem)
Ag
clamp(2.75rem, -0.1176rem + 9.5588vw, 6rem)

Font size line heights

Size classes set no line height, so pair them with leading-*.

initial
initial
initial
initial
initial
initial
initial
initial
initial
initial
initial

Line heights

Line one line two line three
1
Line one line two line three
1.2
Line one line two line three
1.35
Line one line two line three
1.5
Line one line two line three
1.625
Line one line two line three
1.75
Line one line two line three
2
Line one line two line three
1.2
Line one line two line three
1.35
Line one line two line three
1.5
Line one line two line three
1.625

Letter spacing

Aa
-0.03em
Aa
-0.02em
Aa
-0.01em
Aa
0em
Aa
0.01em
Aa
0.02em
Aa
0.03em
Aa
-0.02em
Aa
-0.01em
Aa
-0.01em
Aa
0em

Display styles

Size, weight, leading and tracking for headings, in UI and prose flavours.

Body styles

Composed body text for interfaces, prose and code.

Previous page← Emphasis and states Next pageShape and layout →