Web/CSS/font-variant-numeric

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;

This property can take one of two forms:

either the keyword value normal
or one or more of the other values listed below, space-separated, in any order.

Values

normal: This keyword leads to the deactivation of the use of such alternate glyphs.
ordinal: This keyword forces the use of special glyphs for the ordinal markers, like 1^st, 2^nd, 3^rd, 4^th in English or a 1^a in Italian. It corresponds to the OpenType values ordn.
slashed-zero: This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values zero.
<numeric-figure-values>: These values control the figures used for numbers. Two values are possible:

lining-nums activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType values lnum. oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType values onum.

<numeric-spacing-values>: These values controls the sizing of figures used for numbers. Two values are possible:

proportional-nums activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values pnum. tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values tnum.

<numeric-fraction-values>: These values controls the glyphs used to display fractions. Two values are possible:

diagonal-fractions activating the set of figures where the numerator and denominator are made smaller and separated by a slash. It corresponds to the OpenType values frac. stacked-fractions activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. It corresponds to the OpenType values afrc.

Formal definition

Initial value	`normal`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]

Examples

Setting ordinal numeric forms

HTML

<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>

CSS

/*
This example uses the Source Sans Pro OpenType font, developed by Adobe
and used here under the terms of the SIL Open Font License, Version 1.1:
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
}

.ordinal {
  font-variant-numeric: ordinal;
  font-family: "Source Sans Pro";
}

Result

Specifications

Specification	Status	Comment
CSS Fonts Module Level 3The definition of 'font-variant-numeric' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`font-variant-numeric`	Chrome Full support 52	Edge Full support 79	Firefox Full support 34 Full support 34 No support 24 — 34 Disabled' Disabled' From version 24 until version 34 (exclusive): this feature is behind the `layout.css.font-features.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 39	Safari Full support 9.1	WebView Android Full support 52	Chrome Android Full support 52	Firefox Android Full support 34 Full support 34 No support 24 — 34 Disabled' Disabled' From version 24 until version 34 (exclusive): this feature is behind the `layout.css.font-features.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 41	Safari iOS Full support 9.3	Samsung Internet Android Full support 6.0

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.

font-variant-numeric by Mozilla Contributors is licensed under CC-BY-SA 2.5.