Your pricing table updates every few seconds. The column with dollar amounts shifts left and right as values change. A $1 is narrower than a $8. The numbers are the right size. They're the wrong width.

Most fonts ship with two numeral styles: proportional figures, where each digit is as wide as it needs to be, and tabular figures, where every digit is the same width. Proportional looks better in flowing text. Tabular looks better in columns.

Numeric Figures

Variable fonts	$1,111.11
Typeface license	$888.88
Annual hosting	$47.14
Webfont subsetting	$1,817.00
Total	$3,864.13

font-variant-numeric: normal — column shifts

Toggle between proportional and tabular. The amounts don't change. With proportional, rows dominated by 1 (narrow) and 8 (wide) make the right column visibly shift. With tabular, every digit is the same width and the column locks.

The Rule

Set font-variant-numeric: tabular-nums on any column or element where numbers need to align.

/* Pricing, tables, stats, timers */
.price,
.stat-value,
td,
.timer {
font-variant-numeric: tabular-nums;
}

/* Pricing, tables, stats, timers */
.price,
.stat-value,
td,
.timer {
font-variant-numeric: tabular-nums;
}

Tabular figures make every digit — 0 through 9 — occupy the same horizontal space. A column of numbers lines up at the decimal point. Totals align with line items.

This requires that the font includes tabular figure support. Most modern web fonts do. If the font doesn't have the feature, font-variant-numeric is silently ignored.

Lining vs. oldstyle

font-variant-numeric also controls whether figures sit on the baseline (lining) or hang below it (oldstyle).

Lining figures (lining-nums) are the default in most fonts. They look like capital letters: 1234567890. They work for UI, data, and anywhere numbers appear alongside uppercase text.

Oldstyle figures (oldstyle-nums) have varying heights and descenders: numbers like 3, 4, 5, 7, and 9 hang below the baseline. They read well in long prose because they match the rhythm of lowercase text, but they look wrong in a data table.

/* Numbers in body prose */
.prose {
font-variant-numeric: oldstyle-nums;
}

/* Numbers in UI, data, pricing */
.ui-number {
font-variant-numeric: lining-nums tabular-nums;
}

/* Numbers in body prose */
.prose {
font-variant-numeric: oldstyle-nums;
}

/* Numbers in UI, data, pricing */
.ui-number {
font-variant-numeric: lining-nums tabular-nums;
}

You can combine values. lining-nums tabular-nums is the right combination for any column of data.

Common Mistake

Applying font-variant-numeric: tabular-nums globally to the body. Tabular figures in body prose create unnatural spacing between digits because they're wider than needed. Use it only where numbers need to align.

font-feature-settings fallback

If a font doesn't respond to font-variant-numeric, you can try the low-level OpenType syntax. tnum enables tabular figures, onum enables oldstyle, lnum enables lining.

.price {
font-variant-numeric: tabular-nums;
/* Fallback for fonts that don't map the CSS property */
font-feature-settings: "tnum" 1;
}

.price {
font-variant-numeric: tabular-nums;
/* Fallback for fonts that don't map the CSS property */
font-feature-settings: "tnum" 1;
}

font-variant-numeric is the correct modern property. Use font-feature-settings only as a fallback.

font-variant-numeric is supported in every major browser.