On tabular figures

There is a category of interface bug that is not a layout bug at all. It is a typography bug, and it is fixed with one line of CSS that most designers have never typed.

The symptom is familiar. A column of prices that does not line up. A countdown timer that jitters sideways as the seconds tick. A table of figures where the decimal points wander. A dashboard number that nudges left and right as it updates, half a pixel at a time, just enough to look unsettled. The designer reaches for the layout. The layout is fine. The problem is the figures.

Most modern typefaces ship with proportional figures by default. A proportional 1 is narrower than a proportional 8, because that is what reads best in running prose, where numbers appear mid-sentence and should sit comfortably between the words. This is the right default for body text. It is the wrong default the moment numbers have to align vertically, or change in place, because every digit now occupies a different width and the column can no longer hold a straight edge.

The fix is tabular figures. Every digit is set to the same fixed width, so a 1 takes the same space as an 8, and a column of numbers lines up on the right without any help from the layout. In CSS it is one declaration:

.price, .timer, td.number {
  font-variant-numeric: tabular-nums;
}

The MDN reference on font-variant-numeric covers the full set, but tabular-nums is the one that earns its keep. Apply it to tables, to prices, to anything that counts or updates, and leave the body text on the proportional default where it belongs. The rule of thumb I use: if a number sits in a sentence, leave it proportional. If a number sits in a column, or changes while the user is looking at it, make it tabular.

There is a second axis to this, which is lining versus oldstyle figures, and it is a separate decision from proportional versus tabular. Oldstyle figures have ascenders and descenders, so they sit in text the way lowercase letters do, and they are lovely in long-form prose set in a serif. Lining figures sit on the baseline at cap height and are the right call for interfaces, tables, and anything technical. A well-built typeface gives you all four combinations, and font-variant-numeric lets you ask for the one you want without switching fonts. The foundries that take this seriously, Klim chief among them, document exactly which figure sets ship with each family, and it is worth reading the specimen before you commit a brand to a face that only has one.

None of this is new. Tabular figures predate the web by a few centuries; they are why a printed ledger holds its columns. What is new is how easy it is to get wrong, because the web default optimised for the common case and the common case is prose. The companion habit, covered in the post on type at small sizes, is the same instinct applied one level down: the setting that looks right at display size is rarely the setting that holds up where the type is actually doing its work.

Matthew Butterick’s Practical Typography is the single best free reference on this and most other things, and his treatment of figures is more thorough than mine. Read it once, then turn tabular-nums on the next time a column refuses to line up. The layout was never the problem.