Digits can have two kinds of widths.
Proportional figures use the natural width of each shape: 1 is narrow,
while 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 align vertically.
Changing values
A timer made with proportional figures changes width as it runs. Everything beside it moves too. Watch the blue edge:
Tabular figures turn every character into a stable slot. Use them for clocks, counters, scores, prices, and live metrics.
The usual instinct here is to switch to a monospace font, but you don't need to. A mono font changes the whole voice of the interface. Often, you just need to use tabular figures.
Tables
In a numeric column, equal-width digits create a vertical grid. Repeated places line up, so differences are easier to scan. It feels much better to see data this way.
Right-align numeric columns as well. Right alignment keeps numbers with different lengths anchored to the same edge.
Usage
<span class="tabular-nums">12:45</span>.numeric-column {
font-variant-numeric: tabular-nums;
}The font must include tabular figures for this to work. If tabular-nums
makes no visible difference, drop the font file into
Wakamai Fondue and check whether it lists tnum
among its features.