Control changing numbers with font variant numeric

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.

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 to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.