How to perfectly align numerals using CSS

This content was written more than a year ago. Please note that some (or many) of its recommendations, code samples, resources or solutions may be outdated.

Important! It is quite possible that you may not see this example well, OpenType support is still very precarious.

When designing an element that uses numbers (such as a stopwatch) in a non-monospaced typeface, it is normal for the width of the number to vary as the widths of the digits that compose it are different. For example:

121416 is narrower than
234567

...due to the presence of several "1's" in the first string.

This will cause an ugly effect on a counter (of time, visits, etc).

12345

and although it is not so serious, it also looks bad in tables:

Concept I	12312
Concept II	99876

Para solucionar esto podemos beneficiarnos de la fantástica y poco conocida propiedad CSS font-variant-numeric. Esta propiedad permite aplicar a números y cifras varias modificaciones tipográficas, entre las que destaca tabular-nums .

To solve this we can take advantage of the fantastic and little known CSS property font-variant-numeric. This property allows us to apply several typographic modifications to numbers and digits, among which tabular-nums .

.numeral {
  font-variant-numeric: tabular-nums;
}

With this simple CSS line, the figures equal their width. The typeface, which is not monospaced, behaves as if it was:

12345

Concept I	12312
Concept II	99876

font-variant-numeric and OpenType

For the font-variant-numeric values to take effect, it is important that the font in use implements the necessary OpenType features.

In the examples on this page we use Montserrat, which includes variants for numerals. Although not yet mainstream, it is becoming more and more common for fonts to implement OpenType features.