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”.
- Click the 3 dots (...) on Text
- Click Details
- Choose Style (if supported)
In Webflow
And on the web just use the CSS property of font-feature-settings, and "tnum" as the value.
- In Custom Properties choose the property font-feature-settings.
- Add the value of "tnum" (with the parenthesis).
In Elementor
- Add the following code to your page/site.
- 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…
