Wake up! Are your numbers aligned?

I recently came across a neat post on LinkedIn [yeah, some people actually post useful stuff there] that pointed out a subtle typography quirk that simply can’t be unseen once you become aware of it.

Standard web typography is optimized for reading flow, not mathematical alignment. By default, most fonts use proportional spacing, where a slim character like - 1; takes up less horizontal space than a wide character like - 8.

While this looks better in a paragraph, it makes numbers look misaligned when stacked on top of each other in tables or lists.

Proportional Spacing

This is the browser default for most sans-serif fonts (Inter, Roboto, Segoe UI, etc.). Because the digit widths vary, the decimal points fail to align vertically.

.price {
  font-family: system-ui, sans-serif; 
}

Rendered Output

111,111,111
888,888,888
123,456,789

Monospace

As some comments on the original post point out, this can easily be fixed by using a monospace font. This guarantees alignment because every character box is identical in width. However, this might clash with the design of your website if you don’t want it to look like terminal output. [who wouldn’t though…right???]

.price {
  font-family: 'Menlo', 'Consolas', monospace;
}

Rendered Output

111,111,111
888,888,888
123,456,789

Tabular Nums to the rescue!

The solution that Theodore showcases uses the OpenType feature tabular-nums. This instructs the font file to use a set of glyphs where all numbers are mono-spaced, while keeping the standard proportional spacing for letters and punctuation. You get the polish of a brand font with the precision of a code font.

.price {
  font-family: system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  /* Fallback for older browsers/fonts */
  font-feature-settings: "tnum";
}

Rendered Output

111,111,111
888,888,888
123,456,789
Note: This relies on OpenType features embedded in the font file. Most system fonts and professional web fonts support it. If you apply this CSS and see no change, the font file itself likely lacks the tabular glyph set.

Congratulations! Now you have another detail to obsess about — that 99% of your users will probably never notice. But hey, at least you’ll sleep good knowing that the numbers on your website are perfectly aligned!