Tabular numbers in CSS: the one line that fixes jumpy figures
Proportional digits make prices wobble and columns misalign. What font-variant-numeric: tabular-nums does, where it belongs, and what to use without it.
In most fonts, the digit 1 is narrower than the digit 8. In a sentence that is correct, because it reads naturally. In a column of prices, a countdown or a live balance it is a bug: decimals do not align and a changing number jiggles sideways every time a digit changes.
The fix
.figure, td.num, .price, .timer {
font-variant-numeric: tabular-nums;
}That asks the font for its tabular figures, digits drawn on equal widths. It is supported in every current browser. Pair it with right alignment in tables and the decimal points line up down the column.
Where it belongs
| Use tabular figures | Keep proportional figures |
|---|---|
| Table columns of numbers | Numbers inside sentences |
| Prices in a list or on cards | Dates in body copy |
| Counters, timers and live values | Large display headlines |
| KPI tiles and stats | Page numbers and footnotes |
When the font does not have them
If the property does nothing, the font has no tabular set. Two options: set figures in a monospace face, which is tabular by nature and gives numbers a precise, instrument-like look; or pick a text face that ships the feature. Many products do both on purpose: a sans for words and a mono for money, which is the pairing we describe in fintech dashboard design.
Two related settings worth knowing
slashed-zerodistinguishes 0 from O, useful for codes and keys.lining-numskeeps digits at cap height in fonts whose default figures dip below the line, which looks odd in tables.
Small as it is, this is one of the details people read as quality without knowing why. Editorial Ledger UI sets every money value in JetBrains Mono and will not render one without a label and a timestamp, so the figures on a page are always aligned and always accountable.
Questions
What does font-variant-numeric: tabular-nums do?
It switches the font to digits that all have the same width, if the font includes them. Columns of numbers then line up and counters stop shifting as digits change.
Does every font support tabular numbers?
No. Most professional sans and serif faces do, but some display fonts do not. If the property changes nothing, the font lacks the feature, and a monospace face for figures is the fallback.
Should body text use tabular numbers?
No. In running text proportional digits read better. Use tabular figures where numbers are compared or change in place: tables, prices, stats, timers.