CSS font-variant-numeric Property

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

Numbers can have variants such as ordinals (e.g. 1st), fractions (e.g. 1/2). Unlike letters, they don’t change the content’s meaning but these variations add additional context and can have an effect on legibility.

The main concern is that there is a limited number of fonts that can maximize the use of font-variant-numeric and font-variant. There is a large number of OpenType-compatible fonts, but there aren’t many options that use all the features of font-variant-numeric.

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;

Example of the font-variant-numeric property:

<!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">952321313500</p>
  </body>
</html>

Result

Values

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