What happens when a browser is launched for the first time? A lot.

Using 'tabular figures' for more elegant dynamic number rendering

If your interface has elements with changing digits, such as a video timestamp or a user controlled numeric slider, then it may be worth considering using a font that supports monospaced numbers (a.k.a. tabular figures) to improve the user experience.

The animation below perfectly demonstrates the difference, with the proportionally spaced digits jumping around erratically as the values change:

This indicative image comes from Lior Azi's superb related article , which does a great job of highlighting plenty of real world examples of dynamic vs static numeric labels (both good and bad).

The easiest way to make this change? Use the following declaration in your CSS:

font-variant-numeric: tabular-nums;

Now, the above (which has around 90% global broswer support ) will only work if your font has an appropriate alternative fixed-width glyph available to use — but there is a growing selection of monospaced fonts available, such as these options at Google Fonts .

Finally, if you want to know more about the font-variant-numeric property, then Geoff Graham has this handy write-up over at CSS Tricks .

This weeks Tip of the Week is sponsored byProgress. Progress Named a Leader in First Ever 2019 Gartner Magic Quadrant for Multiexperience Development Platforms.