This is an important message requiring you to make a choice if you're based in the EU.

CSS font-variant-numeric Property

The font-variant-numeric property takes control of the usage of alternate glyphs for numbers, fractions, and ordinal markers.

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";


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


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


Value Description
normal The use of alternate glyphs are not enabled.
<numeric-figure-values> Controls the figures which are used for numbers.
<numeric-spacing-values> Controls the sizing of figures which is used for numbers.
<numeric-fraction-values> Controls the glyphs which are used for fractions.
ordinal Forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd. It corresponds to the OpenType values ordn.
slashed-zero Forces the use of a 0 with a slash. This is needed when O and 0 are not differentiated. It corresponds to the OpenType values zero.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

52.0+ x 34.0+ 9.1+ 39.0+

Do you find this helpful?

Related articles