Codectionary / Developer documentation / CSS

Aligned Numbers with font-variant-numeric

Numeric font variants request specialised digit forms supported by the chosen font.

What it is and why to use it

Numeric font variants request specialised digit forms supported by the chosen font. Tabular figures use equal advance widths, making changing counters and numeric columns easier to scan. Lining figures align with a consistent uppercase-like height; the font must actually provide the requested features.

Common mistakes and limitations

CSS cannot invent OpenType features absent from the font. Tabular digits do not automatically align decimal separators or make a financial table accessible. Use appropriate table structure, text alignment and numeric formatting as well.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="scores"><span>1111</span><span>2888</span><span>9000</span></div>

Syntax

font-variant-numeric: tabular-nums lining-nums;

Examples

Aligned Numbers with font-variant-numeric

Run the CSS against the supplied HTML, then experiment with the values.

.scores { font: 1.5rem/1.6 system-ui; font-variant-numeric: tabular-nums lining-nums; }
.scores span { display: block; }
  1. tabular-nums requests equal digit widths.
  2. The same-length number rows can align more consistently without switching every letter to a monospace font.
  3. The result depends on font support. This is useful for timers, scoreboards and financial displays where digits frequently change.
HTML used by this example
<div class="demo"><div class="scores"><span>1111</span><span>2888</span><span>9000</span></div></div>

Best practices

  • CSS cannot invent OpenType features absent from the font. Tabular digits do not automatically align decimal separators or make a financial table accessible. Use appropriate table structure, text alignment and numeric formatting as well.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading