Skip to content
← writing

Use tabular-nums for any number that changes

css
typography
ui

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).

Ask your agent to implement this

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.

Paste into Claude Code, Codex, Cursor, or any agent. view raw .md