Ion Prodan, 16+ yrs of frontend dev, mostly in Angular.
Published at

tabular-nums for numbers that line up

Use font-variant-numeric: tabular-nums when digits need to stay aligned. It gives every digit the same width, so counters, prices, timers, and table columns do not wiggle as values change.

CSS snippet illustrating font-variant-numeric: tabular-nums for aligning numbers

What changes?

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.

.amount {
font-variant-numeric: tabular-nums;
}

When to use it

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.

Tailwind utility

Tailwind exposes the same declaration as tabular-nums, which is usually enough for table cells and compact numeric UI.

<tdclass=“text-right tabular-nums”>
${amount}
</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.

Default

128,000

tabular-nums

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