font-variant-numeric

Summary

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

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;

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 controls 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 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

p {
  font-variant-numeric: ordinal;
}

Specifications

Browser Compatibility

[1] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.