Use tabular-nums for any number that changes

Most fonts ship proportional figures, where a 1 is narrower than a 0. That's great for prose. But the moment a number updates in place (a timer, a counter, a price, a live score) the digits change width and the whole value twitches left and right. The fix is one line of CSS.

default (proportional)$1,207.40

tabular-nums$1,207.40

Both sides above tick with the same value. The left one jitters. The right one holds still, because it uses tabular figures, where every digit takes the same width.

The property

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

tabular-nums turns on the tnum OpenType feature. Reach for it on anything that updates in place:

countdowns and stopwatches (01:09 → 01:08, no shuffle)
counters, view counts, vote tallies
prices and currency that recalculate
percentages, progress, live metrics
table columns of numbers (they align right, cleanly)

Leave it off for body copy, though. Proportional figures read better in running text. This is specifically for numbers that change or need to line up.

In Tailwind it's the tabular-nums utility. In plain CSS it's the property above. Same one-liner either way, and the kind of detail nobody notices until it's missing.

Spotted by Soren (@sorenblank).

Read the full writeup at https://seangeng.com/writing/tabular-nums-for-changing-numbers.md and implement it in my project. It covers: Use tabular-nums for any number that changes. Timers, counters, prices, scores, live data. If a number updates in place, give it tabular figures so it stops jittering. One CSS property: font-variant-numeric: tabular-nums. Requirements: - Follow the technique/approach exactly as described in the writeup. - Adapt names, colors, and styling to my project's existing conventions. - If it's a component, make it reusable with sensible props and TypeScript types. - Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion. - When done, tell me which files you created or changed and how to use it.

The property

Ask your agent to implement this

The property