Tabular numbers for data

Quarterly revenue uses proportional figures by default; tabular figures keep the decimal columns visually stacked.

Regional sales (USD)

Figures set with font-variant-numeric: tabular-nums on the table.
Region	Q1	Q2	Q3
Nordic	128,400.00	94,250.50	201,990.25
Iberia	88,090.10	76,400.00	112,005.75

Widely Supported

typographytabular-numsno-js

Quick implementation

.data-table {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.data-table th,
.data-table td { text-align: right; }
.data-table th:first-child,
.data-table td:first-child { text-align: left; }

Prompt this to your LLM

Finance dashboards and analytics tables.

You are styling a data table of currency amounts.

Goal: Right-align numeric columns while keeping digit widths equal so decimals line up.

Constraints:
- Apply font-variant-numeric: tabular-nums (and font-feature-settings: "tnum" 1 as fallback) on the table or tbody.
- First column stays left-aligned for labels.

Return CSS only.

Why this matters in 2026

Scanning columns is faster when numbers share width; proportional figures jitter visually on every row.

The logic

OpenType tabular figures swap to fixed-width digit glyphs without changing the font family.

Accessibility & performance

This is pure presentation; screen readers still announce the numeric values. No layout thrash.