Control changing numbers with font variant numeric

Categories

Get the benefits of monospaced fonts with your favourite (supported) non-monospaced fonts.


Say you’ve got a countdown timer. The UI can jump around, depending on what sort of font you’re using, which can be a pain.

One option is to use monospaced fonts, but another smart approach is using font variant properties.

Code language
CSS
.my-tabular-element {
	font-variant-numeric: tabular-nums;
}

As long as your font supports, it you can totally transform how numbers render in your chosen font. Some CDN fonts, like Google Fonts, strip this support out though, so remember that if it’s not working for you.

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.