CSS font-variant-numeric Property

Description

The font-variant-numeric CSS property is used to control the display of numeric characters within text. It allows web designers to specify various numeral styles, such as proportional numbers (which adapt their width to the individual character), tabular numbers (which have uniform widths for better alignment in tables and columns), and slashed zero (where the digit '0' is represented with a diagonal slash to distinguish it from the letter 'O'). This property is particularly useful for improving the typographic consistency and readability of numbers in web content, especially when dealing with data tables, financial reports, or any content where numerals play a significant role.

Initial value
normal
Applies to
All elements
Inherited
Yes
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.fontVariantNumeric

Interactive Demo

0
3.14
2.71

Syntax

font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] 

Values

  • normalNone of the features listed below are enabled.
  • <numeric-figure-values> = [ lining-nums | oldstyle-nums ]lining-nums - Enables display of lining numerals (OpenType feature: lnum).
    oldstyle-nums - Enables display of old-style numerals (OpenType feature: onum).
  • <numeric-spacing-values> = [ proportional-nums | tabular-nums ]proportional-nums - Enables display of proportional numerals (OpenType feature: pnum).
    tabular-nums - Enables display of tabular numerals (OpenType feature: tnum).
  • <numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]diagonal-fractions - Enables display of lining diagonal fractions (OpenType feature: frac).
    stacked-fractions - Enables display of lining stacked fractions (OpenType feature: afrc).
  • ordinalEnables display of letter forms used with ordinal numbers (OpenType feature: ordn).
  • slashed-zeroEnables display of slashed zeros (OpenType feature: zero).

Example

.class {
   font-variant-numeric: oldstyle-nums diagonal-fractions;
}

Browser Support

The following table will show you the current browser support for the CSS font-variant-numeric property.

Desktop
Edge Chrome Firefox Opera Safari
795234399.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
5234419.3652

Last updated by CSSPortal on: 2nd January 2024