CSS font-variant-numeric: keep changing values aligned

When to use it

A payment dashboard updates several amounts while operators compare rows. Apply tabular numerals to the amount column and any changing count, then align the cells at the appropriate edge. The sample keeps the underlying values as real text; CSS does not format currency, choose a locale, or add separators. Test the chosen font and its fallback because one may not supply the expected glyph feature. A label beside the number may still move if its container is sized by the whole changing string. Use a data table when the relationship among rows and columns matters, and keep each amount's meaning in a header. Do not convert numbers into images or pseudo-element content to get alignment.

.payment-table__amount { font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.payment-summary__count { font-variant-numeric: tabular-nums; }

Cost and verification

The glyph feature adds negligible rendering cost. The more important cost is ensuring the font files and fallbacks produce a stable table under real data. A wider tabular digit can make a dense column overflow, so test the largest expected amount, negative values, and a translated currency label. White-space nowrap should be limited to the amount itself; it can cause horizontal scrolling in a narrow table. Numeric alignment supports scanning but cannot replace server-side validation or locale-aware formatting of the underlying value.

Common Mistakes

• Do not assume every font supports tabular numeral glyphs.
• Do not use CSS to generate the only copy of an amount.
• Do not apply nowrap to the whole table to protect one value.

Connected lessons

• CSS Property Decisions
• CSS data tables: preserve headers when columns get narrow
• CSS font shorthand and fallback stack: keep type stable during loading
• HTML data tables: name row and column relationships explicitly