Tabular vs proportional figures

Fixed-width numerals that keep columns and counters from jiggling, versus naturally spaced ones that read better in a sentence.

numbers jump when they changealign the pricesmonospaced numberstabluar numbersfixed width digitstimer digits keep shiftingmake the numbers line up in the columnwhy does my counter wobble

See it

Live demo coming soon

What it is

Tabular figures give every digit the same advance width, so 1 occupies as much room as 8 and a stack of numbers lines up unit under unit. Proportional figures give each digit its natural width, which spaces better inside a sentence. Most fonts default to proportional, a few default to tabular, and a good font ships both.

Use tabular anywhere numbers sit in a column or change in place: price tables, invoices, dashboards, countdown timers, live counters, sports scores, code. The wobble you see in a ticking clock is proportional figures re-measuring the line on every tick. CSS fix: 'font-variant-numeric: tabular-nums'.

Two clarifications. Tabular versus proportional is about width, and it is a different axis from lining versus oldstyle, which is about height (oldstyle figures rise and dip around the baseline like lowercase letters). You can combine them. And do not blanket-apply tabular figures to body copy: the narrow digits float in oversized slots and the text develops visible gaps, especially around 1 and the punctuation next to it.

Ask AI for it

Apply 'font-variant-numeric: tabular-nums' to every number that lives in a column or updates in place: the pricing table, the metrics on the dashboard cards, the countdown timer, and the order totals. Leave body copy on the default proportional figures. Add 'slashed-zero' to the monospaced and data contexts, and right-align numeric table cells so the decimal points stack.

You might have meant

opentype featuresoldstyle vs lining figuresmonospacevertical rhythmglyph

Go deeper