Steady digits for values that change.
Digits come in two widths. Proportional figures use the natural width of each shape, so a 1 is narrow and an 8 is wide. Tabular figures give every digit the same width.
Use proportional figures when numbers sit inside a sentence; they read more naturally. Use tabular figures when changing values need to stay steady or line up vertically.
A timer in proportional figures changes width as it runs, and everything beside it shifts. Watch the marker on the right edge.
Tabular figures turn every character into a fixed slot. Use them for clocks, counters, scores, prices and live metrics.
The usual instinct is to reach for a monospace font, but you do not need to. A mono font changes the whole voice of the interface; most of the time you only wanted the digits to hold still.
In a numeric column, equal-width digits create a vertical grid. Repeated places line up, so differences are easy to scan. Right-align the column too, so numbers of different lengths stay anchored to the same edge.
One declaration:
font-variant-numeric: tabular-nums;
The font has to actually contain tabular figures. If it makes no visible difference, drop the font file into Wakamai Fondue and check whether tnum is listed among its features.
The clock in this site’s footer uses it, which is why the seconds do not make the line twitch.
