Display and Align Numbers Neatly with One Line of CSS

This post has been translated by DeepL . Please let us know if there are any mistranslations!

As a frontend developer, you've probably had a conversation like this at least once:

💬 Designer: "Why are these table numbers so uneven? The widths are all different."
Developer: "That's because each number has a different width in this font..."
Designer: "Do we have to use a monospace font then?"

After reading this article, you'll be able to answer:

"No, one line of font-variant-numeric will solve it."

The font-variant-numeric Property

font-variant-numeric is a CSS property that controls how numbers are displayed, allowing you to apply specific number-related styles. It's primarily used in typography to finely adjust the appearance, spacing, and alignment of numbers.

Width Control (numeric-spacing-values)

tabular-nums: Makes the width of proportional font numbers uniform.
css
```
font-variant-numeric: tabular-nums;
```
before
0123456789
1231231231
after
0123456789
1231231231
proportional-nums: Conversely, makes monospace font numbers proportionally spaced.
css
```
font-variant-numeric: proportional-nums;
```
before
0123456789
1231231231
after
0123456789
1231231231

Style Control (numeric-figure-values)

lining-nums: Aligns all numbers to the baseline with uniform height.
css
```
font-variant-numeric: lining-nums;
```
before
0123456789
after
0123456789
oldstyle-nums: Displays certain numbers (3, 4, 5, 7, 9) lowered like lowercase letters.
css
```
font-variant-numeric: oldstyle-nums;
```
before
0123456789
after
0123456789

Fraction Control (numeric-fraction-values)

diagonal-fractions: Automatically converts standard fraction notation (1/2, 3/4) to diagonal fractions (½, ¾).
css
```
font-variant-numeric: diagonal-fractions;
```
before
Flour 1/2 cup
Sugar 3/4 cup
after
Flour 1/2 cup
Sugar 3/4 cup
stacked-fractions: Displays fractions in a stacked format.
css
```
font-variant-numeric: stacked-fractions;
```
before
1/2
Sugar 3/4
after
1/2
Sugar 3/4

Other Useful Features

slashed-zero: Adds a slash to the number 0 to clearly distinguish it from the letter O.
css
```
font-variant-numeric: slashed-zero;
```
before
ID: U00123O0
after
ID: U00123O0
ordinal: Displays text like 1st, 2nd, 3rd in ordinal format.
css
```
font-variant-numeric: ordinal;
```
before
1st, 2nd, 3rd
after
1st, 2nd, 3rd

Important Considerations

Not all fonts support the CSS properties listed above. The font you use must support the corresponding OpenType features for the effects to appear. Since the font-variant-numeric property utilizes advanced features of OpenType fonts, web fonts or system fonts must have these features built-in to work properly. For example, older fonts or basic web fonts may not support features like diagonal-fractions or oldstyle-nums.

Conclusion

Now, when a designer asks, "Why is the number alignment in this table so messy?", don't panic. One line of font-variant-numeric is enough. It's just one small line of CSS, but the difference in user-perceived quality is significant. Next time you're working on a UI with numbers, remember font-variant-numeric. It will definitely help you create a better user experience.

References