Tabular numbers

One of my favorite underrated (and underused!) CSS properties is font-variant-numeric: tabular-nums.

Tabular numbers are monospaced, which keeps their sizes consistent and keeps numbers with the same amount of digits aligned.

There are two common cases that warrant tabular numbers: tabular data and moving numbers.

Tabular data

I suppose it's in the name. Numbers (especially large numbers) are easier to scan when they're tabular.

When numbers are updated in place (like a timer), tabular numbers keep them in place.

PS: font-variant-numeric: tabular-nums is available as .tabular-nums in Tailwind.