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.
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-numericCSS property (which I recently stumbled upon) with the valuetabular-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.
