font-variant-numeric

Values

The initial value normal keeps the font's default glyphs. Otherwise, pick at most one keyword from each group below and list them separated by spaces, in any order.

• Figure height: lining-nums makes digits as tall as capitals. oldstyle-nums uses digits that behave like lowercase letters, with 6 and 8 rising above and 3 and 9 dropping below, so numbers stand out less in running text.
• Figure width: with proportional-nums each digit has its own width (a 1 is narrow), while tabular-nums gives them all the same width. Use it to line up amounts in a table, or to keep a timer from jittering as its value changes.
• Fractions: diagonal-fractions turns "1/2" into a fraction with a slash, and stacked-fractions stacks the numbers over a horizontal bar.
• ordinal: raises and shrinks ordinal letters, such as the "st" in "1st".
• slashed-zero: draws a slash through 0 so it is easy to tell from the letter O.

Only works when the font has the glyphs

Every value just turns on an OpenType feature of the font (tnum, frac and so on), so nothing changes when the font has no such glyphs. To look the same everywhere, the preview on this page uses Inter from Google Fonts. That copy of Inter has no glyphs for oldstyle-nums, stacked-fractions, ordinal or slashed-zero, so choosing them changes nothing. Inter's digits are also capital-height and proportional to begin with, so lining-nums and proportional-nums look the same as normal.

Some fonts shrink every digit for fractions, not just the ones around the slash. It is safest to put diagonal-fractions only on an element that wraps the fraction.