1. css
  2. /properties
  3. /font-variant-numeric

font-variant-numeric

Definition

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

Examples

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

Values

ValueDescription
normalSpecifies the default display of numeric characters for the font
ordinalEnables the display of ordinal markers, such as superscripted st, nd, rd, and th
slashed-zeroEnables the display of a slashed zero for the 0 character
lining-numsEnables the display of numerals that have the same height as uppercase letters
oldstyle-numsEnables the display of numerals that have varying heights and shapes, similar to lowercase letters
proportional-numsEnables the display of numerals that have varying widths and spacing
tabular-numsEnables the display of numerals that have a fixed width and equal spacing
diagonal-fractionsEnables the display of diagonal fractions, such as ½ and ⅔
stacked-fractionsEnables 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
initialSets the property to its default value
inheritInherits the property from its parent element

Best Practices

  • 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.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes