Tabular Numbers
Apr 24 2026
In a regular font, each digit has a natural width — a “1” is narrower than an “8”, and a “4” is wider than a “1”. This is called proportional spacing, and it works fine for body text where numbers don't change.
Tabular numbers override this by assigning every digit from 0 to 9 the exact same fixed width. So a “1” takes up as much horizontal space as an “8”. This means any number, regardless of its digits, occupies a predictable and stable width in your layout.
In CSS it's enabled with font-variant-numeric: tabular-nums and in a design tool like Figma you can toggle it in the typography settings under “number spacing.”
When to use Tabular Numbers
The most common case is when numbers change rapidly in your UI, like video playback timers, transaction amounts updating in real time, or any live counter.
The two timers below illustrate this clearly. The first shows what tabular numbers enabled looks like, stable and consistent, every digit occupying the same width. The second shows what happens without them, the layout shifts as digits change width.
Tabular Numbers Demo
Next Read