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

font-variant-numeric: normal;

font-variant-numeric: slashed-zero;

font-variant-numeric: tabular-nums;

font-variant-numeric: oldstyle-nums;

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
79	52	34	39	9.1

Tablets / Mobile
52	34	41	9.3	6	52

Last updated by CSSPortal on: 2nd January 2024