font-variant-numeric
Choose numeric glyph variants supported by the current font.
Overview
| Class | Declarations |
|---|---|
font-variant-numeric:normal | font-variant-numeric: normal;
|
ordinal | font-variant-numeric: ordinal;
|
slashed-zero | font-variant-numeric: slashed-zero;
|
lining-nums | font-variant-numeric: lining-nums;
|
oldstyle-nums | font-variant-numeric: oldstyle-nums;
|
proportional-nums | font-variant-numeric: proportional-nums;
|
tabular-nums | font-variant-numeric: tabular-nums;
|
diagonal-fractions | font-variant-numeric: diagonal-fractions;
|
stacked-fractions | font-variant-numeric: stacked-fractions;
|
font-variant-numeric:<value> | font-variant-numeric: <value>;
|
Examples
Align tabular numbers
Tabular digits have equal advance widths, which helps align equally formatted values. Geist is proportional by default; this comparison uses identical strings and no padding between digits.
<!-- proportional-nums --><div id="target" class="proportional-nums font-3xl leading-sm"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></div><!-- tabular-nums --><div id="target" class="tabular-nums font-3xl leading-sm"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></div>Decimal points, signs and different digit counts still need an appropriate table or alignment strategy.
Show slashed zeroes
slashed-zero selects the font’s alternate zero when available. This example loads the site’s JetBrains Mono face, where the dotted default zero changes to a slashed form.
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fonts/JetBrainsMono[wght].ttf') format('truetype');}@theme { --font-family-code-demo: 'JetBrains Mono', monospace;}<!-- font-variant-numeric:normal --><p id="target" class="m:0 font-variant-numeric:normal font-3xl leading-sm font-code-demo">0O 00 2026</p><!-- slashed-zero --><p id="target" class="m:0 slashed-zero font-3xl leading-sm font-code-demo">0O 00 2026</p>An unsupported OpenType feature is ignored. The computed property alone does not prove that the glyph changed.
Reset numeric variants
font-variant-numeric:normal resets inherited numeric variants on the child. It does not cancel a separate raw font-feature-settings override.
<!-- Tabular parent · proportional child --><div id="context" class="tabular-nums font-3xl leading-sm"> <p class="m:0"><span id="inherited" class="inline-block">11111</span></p> <p id="target" class="m:0 font-variant-numeric:normal"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></p></div>Apply conditionally
Focus the sample with the keyboard or hover it to enable tabular digits. Read the actual glyph-run widths below.
<!-- A real state change --><div id="target" tabindex="0" role="group" aria-label="Numeric variant sample" class="proportional-nums font-3xl leading-sm tabular-nums:hover tabular-nums:focus-visible"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></div>