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:
Use lining numerals for the h1 element:
Use proportional-width numerals for the blockquote element:
|Specifies the default display of numeric characters for the font
|Enables the display of ordinal markers, such as superscripted st, nd, rd, and th
|Enables the display of a slashed zero for the 0 character
|Enables the display of numerals that have the same height as uppercase letters
|Enables the display of numerals that have varying heights and shapes, similar to lowercase letters
|Enables the display of numerals that have varying widths and spacing
|Enables the display of numerals that have a fixed width and equal spacing
|Enables the display of diagonal fractions, such as ½ and ⅔
|Enables the display of stacked fractions, such as 1⁄2 and 2⁄3
|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
|Sets the property to its default value
|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.