Align Numbers in Financial Tables with CSS tabular-nums

Displaying financial data accurately requires strict visual alignment across columns so users can easily scan, compare, and calculate values. The CSS property font-variant-numeric: tabular-nums solves column misalignment by forcing numeric glyphs to share identical horizontal widths, similar to monospaced typefaces. This guide explains the mechanics of tabular figures, why default proportional fonts fail in financial design, and how to implement this property to create clean, aligned data tables.

The Problem with Proportional Figures

Most modern web fonts use proportional figures by default. In a proportional layout, each digit occupies only the horizontal space it naturally requires. For instance, the numeral "1" is significantly narrower than "8" or "0".

When numbers with different digits are stacked vertically in a data grid, proportional spacing causes the columns to wobble. Even if the numbers have the exact same number of digits and identical decimal places, their widths will vary. In financial applications, this makes vertical scanning difficult, distorts decimal alignment, and degrades the readability of balance sheets, stock tickers, and pricing tables.

How tabular-nums Fixes the Issue

The font-variant-numeric: tabular-nums rule activates an OpenType font feature (specifically the tnum feature) that swaps out proportional numeric glyphs for tabular ones.

Under tabular spacing:

• Uniform Digit Width: Every digit from 0 through 9 is rendered with the exact same advance width (bounding box). A "1" takes up the same horizontal space as an "8".
• Consistent Place Values: Tens, hundreds, and thousands columns line up vertically without requiring dedicated monospaced fonts (like Courier or Roboto Mono) for the entire interface.
• Punctuation Balance: In well-designed typefaces, currency symbols, commas, and periods are often sized or centered consistently within tabular modes to prevent decimal drift.

Implementation in CSS

To achieve proper alignment in a financial table, apply font-variant-numeric: tabular-nums alongside right-aligned text.

/* Apply to all table cells containing numerical data */
.financial-table td.numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

Right-aligning the content ensures that values with different magnitudes (such as hundreds versus thousands) align correctly by their decimal points, while tabular-nums ensures that values with identical lengths stay pixel-perfect.

For older browsers or legacy systems, the low-level property font-feature-settings can serve as a fallback:

.numeric {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

Font Support Considerations

The CSS property relies entirely on the underlying font file providing tabular alternate glyphs. Most system fonts (such as Inter, Segoe UI, San Francisco, and Roboto) and high-quality commercial typefaces include tabular numbers out of the box.

If a custom web font does not include OpenType tabular figures, font-variant-numeric: tabular-nums will simply fall back to proportional figures without throwing an error. Always verify that your chosen font family includes tabular numbers when building data-dense or financial web applications.