font-variant-numeric | WebReference

Definition

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

Use old-style numerals for the body element:

body {
  font-variant-numeric: oldstyle-nums;
}

Use lining numerals for the h1 element:

h1 {
  font-variant-numeric: lining-nums;
}

Use proportional-width numerals for the blockquote element:

blockquote {
  font-variant-numeric: proportional-nums;
}

Value	Description
`normal`	Specifies the default display of numeric characters for the font
`ordinal`	Enables the display of ordinal markers, such as superscripted st, nd, rd, and th
`slashed-zero`	Enables the display of a slashed zero for the 0 character
`lining-nums`	Enables the display of numerals that have the same height as uppercase letters
`oldstyle-nums`	Enables the display of numerals that have varying heights and shapes, similar to lowercase letters
`proportional-nums`	Enables the display of numerals that have varying widths and spacing
`tabular-nums`	Enables the display of numerals that have a fixed width and equal spacing
`diagonal-fractions`	Enables the display of diagonal fractions, such as ½ and ⅔
`stacked-fractions`	Enables the display of stacked fractions, such as 1⁄2 and 2⁄3
`<feature-value>`	Enables a specific set of numeric display features for the font, such as ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, or stacked-fractions
`initial`	Sets the property to its default value
`inherit`	Inherits the property from its parent element

Use font-variant-numeric to control the display of numeric characters for better readability and aesthetics of text, especially for numerically heavy content such as financial reports, statistical data, and scientific articles.
Choose numeric display settings that are appropriate for the specific content and context, as different settings may have different legibility and aesthetic effects.
Be aware that not all fonts support all numeric display types or feature values, so test your font choices and settings on different devices and browsers to ensure consistent rendering.
Consider using fallback fonts and feature values for greater compatibility and consistency across different devices and platforms.

Chrome	Firefox	Safari	Internet Explorer	Microsoft Edge	Opera
Yes	Yes	Yes	Yes	Yes	Yes