CSS Quickie: font-variant-numeric

Numbers are a very important aspect of any platform. Ranging from analytics, to finance, and wrapping all the way to the social media space, numbers are key to properly express information. So with that being said, making them as appealing as possible is needed. Luckily in CSS, there are a few ways to target numbers directly. One is font-variant-numeric.

This property is pretty cool because it allows you to have some control over the glyphs used to display numbers. Let’s take a look at a few of the options here you’re most likely to use.

• normal: Deactivates the use of alternate glyphs
• ordinal: Allows for special glyphs for ordinal markets, i.e. 1st, 2nd, 3rd, etc.
• slashed-zero: Adds a slash inside 0 to distinguish between 0 and O
• tabular-nums: Keeps all glyphs the same size
• oldstyle-nums: Numbers like 3, 4, 7, and 9 will have decending origins

Now that we got that overview, let’s look at some code.

.NumericParagraph {
  width: 200px;
  height: 200px;
  color: #000000;
}

.NumericParagraph--normal {
  /* Everything should be the same as if this isn't set */
  font-variant-numeric: normal;
}

.NumericParagraph--ordinal {
  /* Allows for glyphs for ordinal numbers like 1st...9th */
  font-variant-numeric: ordinal;
}

.NumericParagraph--slashed-zero {
  /* Allows for 0 to have slash in the middle */
  font-variant-numeric: slashed-zero;
}

.NumericParagraph--tabular-nums {
  /* Allows for numbers to be the same size */
  font-variant-numeric: tabular-nums;
}

.NumericParagraph--oldstyle-nums {
  /* Allows for decending origins on numbers like 4 and 9 */
  font-variant-numeric: tabular-nums;
}