TIL: How to monospace numbers in fonts

I stumbled upon a CSS property I wasn’t aware of: font-feature-settings.

Ever had the “joy” of using a non-monospace font and working with numbers in a table? Or any other occassion where the different width of each number just didn’t look great? Then you have to check out this CSS:

font-feature-settings: "tnum";

With tnum, the browser will handle the numbers as monospace figures.

Check out the MDN web docs for more information and other possible values. All modern and even older browsers support this, see caniuse.com.

Leave a Reply