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.
Moving numbers
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.