One CSS Property That Makes Numbers Look Instantly Better

When you’re working with fonts, especially for displaying numbers, there’s something called proportional spacing that can make a huge difference in how your numbers look when they’re animated.

Essentially, most fonts (apart from monospaced fonts) use proportional spacing, which means that each character takes up a different amount of horizontal space. This can lead to numbers looking uneven and misaligned, especially when they’re displayed in a tabular format.

Here’s what it looks like.

This creates issues when numbers change, let’s say in clocks or counters, the text/numbers shifts horizontally, which can be visually jarring. In other words, it will cause a layout shift, which is not a good user experience.

To fix this issue, you can use the font-variant-numeric CSS property (which I recently stumbled upon) with the value tabular-nums.

This will force all the numbers in the font to take up the same amount of horizontal space, creating a more uniform and visually appealing look. Once this property is applied, the numbers behave like monospaced digits, even in proportional fonts.

I’ve created a CodePen demo to show you how it works.

See the Pen Tabular Numbers Demo by Amit Merchant (@amit_merchant) on CodePen.

Now, you might be wondering, what are all the places where this can be useful?

Well, here are a few examples:

• Clocks and timers
• Financial tables
• Analytics dashboards
• Scoreboards
• Any place where numbers are displayed in a tabular format

Also, this property is supported in all modern browsers, so you can safely use it in your projects without worrying about compatibility issues.

Read more about the font-variant-numeric property on MDN Web Docs.