By default, most modern fonts use proportional numerals: the digit 1 is much narrower than the digit 8 or 0. In body paragraphs, proportional figures look natural and elegant.
However, in data tables, financial ledgers, and countdown timers, proportional numbers cause an unsightly problem: columns of numbers wobble and fail to align vertically:
Proportional: Tabular (Fixed Width):
$1,111.11 $1,111.11
$8,888.88 $8,888.88
Design systems solve this by activating OpenType tabular figures:
.font-tabular {
font-variant-numeric: tabular-nums;
}
This ensures all digits share an identical bounding width, keeping decimals and columns perfectly straight.
Level 3 · Design Tokens & Foundations