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.

Code language
.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.



If you liked this post, you might like these ones, too

  1. Use a set to remove array duplicates

    🔥 A handy quick tip.

  2. Create a line break while maintaining inline status

    🔥 A handy quick tip.

  3. CSS Frameworks, hype and dogmatism

    Some notes on the dogmatism and gatekeeping themes of Tech Twitter and how they can generate often incorrect and naive statements—specifically about frameworks and methodologies.


Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.