---
title: "Use tabular-nums for any number that changes"
description: "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."
date: "2026-03-26"
tags: ["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.

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

```css
.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.

  src="/videos/tabular-nums.mp4"
  className="my-6 w-full rounded-xl border border-[hsl(var(--border))]"
  autoPlay
  muted
  loop
  playsInline
/>

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)](https://x.com/sorenblank/status/2028520200417706017).