Tabular numbers in CSS | Labs Published at May 14, 2026
What changes?<br>By default, many fonts use proportional numbers: a 1 is narrow, an 8 is wider, and the whole number can shift when the value changes. tabular-nums makes each digit take the same horizontal space, so the number keeps its shape and the right edge stays steady.<br>.amount {<br>font-variant-numeric: tabular-nums;
When to use it<br>Use it for numbers that sit in rows, columns, or changing UI: prices, balances, timers, analytics cards, tables, and counters. Leave normal proportional numbers for paragraphs, where mixed digit widths usually read more naturally.<br>Tailwind utility<br>Tailwind exposes the same declaration as tabular-nums, which is usually enough for table cells and compact numeric UI.<br>tdclass=“text-right tabular-nums”><br>${amount}<br>td>
Scrub the slider and compare the same number on both sides. The left side uses normal digit spacing; the right side uses tabular-nums. Watch how the right edge stays snapped to the purple rail.
Slide to change · 128,000<br>Default<br>128,000
tabular-nums<br>128,000
Bold purple rail — digits stack on 1 ch guides
Same integer—only font-variant-numeric differs. Right: violet grid + glow show where tabular glyphs lock before the snap rail . No difference? Likely missing OpenType tnum.
Further reading<br>MDN: font-variant-numeric<br>Tailwind CSS: font-variant-numeric
Buy me a coffee