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.