Design Better Countdown Timers

In this video I talk about how In Elementor, I used to make these countdown timers on every Black Friday sale.

The numbers were always shifting - especially when it comes to the digit of 1, because the font wasn't a monospace font, and I couldn't replace it with a font that wasn't "in brand".

There’s one setting to go from unevenly spaced digits to perfectly aligned bliss.

In Figma:

If you’re designing in Figma, tick the option of “Monospace lining”.

1. Click the 3 dots (...) on Text
2. Click Details
3. Choose Style (if supported)

In Webflow

And on the web just use the CSS property of font-feature-settings, and "tnum" as the value.

1. In Custom Properties choose the property font-feature-settings.
2. Add the value of "tnum" (with the parenthesis).

In Elementor

1. Add the following code to your page/site.
2. Add the class of monospace to the Countdown widget (or any text).

<style>
.monospace {
	font-feature-settings: "tnum";
｝
</style>

The catch

But there’s a catch - this OpenType feature is supported only on fonts that have been updated to support it.

As uncle Ben once said, with great fonts comes great responsibility.

Until next time, cheers…