Align Numbers Perfectly with CSS tabular-nums

Ever noticed how numbers often look misaligned?

That’s because most fonts use proportional numbers by default. Each digit takes up a different amount of space.

But there’s a fix for that.

In CSS, you can opt in to tabular numbers, where all digits have the same width. That makes columns of numbers line up perfectly.

Here’s how to enable it:

.after {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

This works best with fonts that support OpenType features. But most system fonts and many web fonts do.

Clearer layouts, cleaner data tables, and a subtle polish your UI users will feel.

To learn more tips about CSS, make sure to join my newsletter below ❤️