Peter Mekhaeil

CSS property: font-variant-numeric

Some OpenType fonts support alternate numeric glyphs that can be styled using font-variant-numeric.


Here is a CodeSandbox that demonstrate each value. This demo uses the "Source Sans Pro" font which supports these features.

Take a look at the tabular-nums feature - it can make the design of tabular data very satisfying.


/* normal: Disable using alternate glyphs */
font-variant-numeric: normal;

/* ordinal: Use letters to represent numeric order */
font-variant-numeric: ordinal;

/* slashed-zero: Use a 0 with a diagonal slash */
font-variant-numeric: slashed-zero;

/* lining-nums: Use glyphs that are all aligned by their baseline. */
font-variant-numeric: lining-nums;

/* oldstyle-nums: Use glyphs where some numbers have descenders */
font-variant-numeric: oldstyle-nums; 

/* proportional-nums: Use glyphs where numbers are not all of the same size */
font-variant-numeric: proportional-nums; 

/* tabular-nums: Use glyphs where numbers all have the same width */
font-variant-numeric: tabular-nums; 

/* diagonal-fractions: Use diagonal fractions (numbers are made smaller and separated by a slash) */
font-variant-numeric: diagonal-fractions; 

/* stacked-fractions: Numbers are made smaller, stacked and separated by a horizontal line */
font-variant-numeric: stacked-fractions; 

Values can be combined together:

font-variant-numeric: slashed-zero tabular-nums;


Not all fonts support these features. The values will have no effect if the font family does not have support.

Learn More