Widely availableSupported across all major browsers. Safe to use in production.
Typography Widely available

font-variant-numeric

The font-variant-numeric CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash.

Typography

Overview

The font-variant-numeric CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-numeric
52
79
34
9.1
52
9.3
diagonal-fractions
52
79
34
9.1
52
9.3
lining-nums
52
79
34
9.1
52
9.3
normal
52
79
34
9.1
52
9.3
oldstyle-nums
52
79
34
9.1
52
9.3
ordinal
52
79
34
9.1
52
9.3
proportional-nums
52
79
34
9.1
52
9.3
slashed-zero
52
79
34
9.1
52
9.3
stacked-fractions
52
79
34
9.1
52
9.3
tabular-nums
52
79
34
9.1
52
9.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.price {
  font-variant-numeric: tabular-nums;
}
.body-text {
  font-variant-numeric: oldstyle-nums;
}
.code-num { font-variant-numeric: slashed-zero; }

Live demo

tabular-nums

CSS Tabular-nums demo.

PreviewFullscreen

oldstyle-nums

CSS Oldstyle-nums demo.

PreviewFullscreen

slashed-zero

CSS Slashed-zero demo.

PreviewFullscreen

Use cases

  • Using font-variant-numeric

    The font-variant-numeric CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features