Typography on the web isn’t just about picking pretty fonts. Sometimes, the finer details—like how numbers are displayed — make all the difference between average and professional-looking design.
That’s where the CSS property font-variant-numeric steps in!
In this post, we’ll explore what font-variant-numeric is, why it matters, and how you can use it with examples.
What is font-variant-numeric?
The font-variant-numeric property controls the way numbers and numeric punctuation (like fractions and ordinal markers) are displayed within your text.
It allows you to switch between different typographic styles of numbers that many modern fonts (especially OpenType fonts) provide.
Usage of font-variant-numeric
- Improve readability and legibility of numeric data.
- Match the aesthetic tone of your content (e.g., old-style numerals for historical designs).
- Achieve professional-grade typography without needing images or custom code.
font-variant-numeric: normal | [ <feature-value>+ ];
<feature-value> =
lining-nums | oldstyle-nums |
proportional-nums | tabular-nums |
diagonal-fractions | stacked-fractions |
ordinal | slashed-zeroBrowser Support
Supported by most modern browsers like Chrome, Firefox, Safari, and Edge.
Not all fonts support every numeric variant. Always test with your chosen font. Ensure you are using a font that supports OpenType features like Roboto, Merriweather, Inter, or Georgia.