CSS font-variant-numeric Property

The CSS font-variant-numeric property controls the use of alternate glyphs for numbers, fractions, and ordinal markers. It is a shorthand-friendly part of the font-variant family that exposes OpenType numeric features without dropping to the low-level font-feature-settings property.

This page covers what each value does, when to reach for it, the gotchas around font support, and a runnable example.

Why use it

Numbers can be rendered in several styles: ordinals (e.g. 1^st), fractions (e.g. ½), lining vs. old-style figures, and proportional vs. tabular spacing. Unlike letters, these variants don't change the meaning of the text, but they add context and affect legibility:

Tabular figures make every digit the same width so numbers line up in tables and price columns.
Old-style figures have ascenders and descenders that blend into running prose instead of standing out like a heading.
Slashed zero disambiguates 0 from the letter O in code, IDs, and serial numbers.
Diagonal fractions turn 1/2 into a single typeset ½ glyph.

The main limitation is font support: the feature only works if the typeface actually ships the corresponding OpenType table. Most system fonts support a few features (lining, tabular), but diagonal-fractions, stacked-fractions, and slashed-zero are present in far fewer faces. When a font lacks a feature the value is silently ignored and the default glyphs are shown.

Initial Value	normal
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	Discrete.
Version	CSS3
DOM Syntax	object.style.fontVariantNumeric = "slashed-zero";

Syntax

font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ];

The figure, spacing, fraction, ordinal, and slashed-zero values can be combined in a single declaration because they control independent aspects of the glyphs:

/* Tabular lining digits with a slashed zero */
font-variant-numeric: tabular-nums lining-nums slashed-zero;

Example

Example of CSS font-variant-numeric Property with oldstyle-nums and diagonal-fractions values

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      .p1 {
        font-variant-numeric: oldstyle-nums;
      }
      .p2 {
        font-variant-numeric: diagonal-fractions;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-numeric property example</h2>
    <p class="p1">001528931</p>
    <p class="p2">1/2</p>
  </body>
</html>

Try it Yourself »

Result

Comparing several features

This example sets each numeric feature on its own paragraph so you can see them side by side (in a font that supports them, such as many Google Fonts faces).

<!DOCTYPE html>
<html>
  <head>
    <title>font-variant-numeric features</title>
    <style>
      .lining   { font-variant-numeric: lining-nums; }
      .oldstyle { font-variant-numeric: oldstyle-nums; }
      .tabular  { font-variant-numeric: tabular-nums; }
      .diagonal { font-variant-numeric: diagonal-fractions; }
      .slashed  { font-variant-numeric: slashed-zero; }
    </style>
  </head>
  <body>
    <p class="lining">lining-nums: 0123456789</p>
    <p class="oldstyle">oldstyle-nums: 0123456789</p>
    <p class="tabular">tabular-nums: 1111 vs 8888</p>
    <p class="diagonal">diagonal-fractions: 1/2 3/4</p>
    <p class="slashed">slashed-zero: 1000 2030</p>
  </body>
</html>

Values

Value	Description
normal	Alternate glyphs are not enabled.
`<numeric-figure-values>`	Controls the figure style. Keywords: `lining-nums`, `oldstyle-nums`.
`<numeric-spacing-values>`	Controls the spacing width. Keywords: `proportional-nums`, `tabular-nums`.
`<numeric-fraction-values>`	Controls the fraction style. Keywords: `diagonal-fractions`, `stacked-fractions`.
ordinal	Replaces digits with superscript ordinal glyphs (e.g., ¹ˢᵗ, ²ⁿᵈ) instead of adding text like "st" or "nd". Maps to OpenType `ordn`.
slashed-zero	Forces a zero with a slash. Maps to OpenType `zero`.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

font-variant-numeric is one of several longhands of the font-variant shorthand. The others target different glyph categories:

font-variant-caps — small caps, petite caps, and titling glyphs.
font-variant-ligatures — common, discretionary, and contextual ligatures.

It is supported from CSS3 onward.

Practice

What does the CSS font-variant-numeric property do?

It is used to change the color of the fontIt enables characters coming from different scripts to better mixingIt allows control over the usage of alternate glyphs for numbers, fractions, and ordinal markersIt is used to set the font sizeIt encourages the use of particular styles in a typeface