CSS font-variant-numeric Property

❮ Prev Next ❯

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>

Try it Yourself »

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.