Typography
The type scale, weights, and usage rules.
The scale
Standard Tailwind step names, so what you already type works. Each step carries its own line-height.
Grumpy wizards make a toxic brew
text-7xl
60 / 68
Grumpy wizards make a toxic brew
text-6xl
48 / 56
Grumpy wizards make a toxic brew
text-5xl
40 / 48
Grumpy wizards make a toxic brew
text-4xl
32 / 42
Grumpy wizards make a toxic brew
text-3xl
28 / 36
Grumpy wizards make a toxic brew
text-2xl
24 / 32
Grumpy wizards make a toxic brew
text-xl
20 / 28
Grumpy wizards make a toxic brew
text-lg
18 / 26
Grumpy wizards make a toxic brew
text-base
16 / 24
Grumpy wizards make a toxic brew
text-sm
14 / 20
Grumpy wizards make a toxic brew
text-xs
12 / 20
Grumpy wizards make a toxic brew
text-2xs
10 / 18
Weights
Light 300 — display only
Regular 400 — body copy
Medium 500 — labels and UI
Semibold 600 — headings
Bold 700 — sparingly
Guidance
Use tabular figures for anything that changes in place — timers, counters, stat tiles. The .tnum utility stops digits from jittering.
Don't use proportional figures for live numbers. Each digit has a different width, so the layout twitches on every tick.
Why not semantic names?
text-body-01. Two problems: developers had to learn a mapping before they could type anything, and tailwind-merge couldn't tell text-body-01 (a size) from text-body (a colour) — so it silently dropped colours from every component that set both. Standard names avoid both.