Typography
Numeral Styles
Numeral styles are the OpenType feature that lets you choose how a font draws its digits, controlling their width and how they line up in columns.
Definition
Numeral styles let you choose how a font draws its digits. The setting you'll reach for most is the one that controls a number's width. Tabular numerals are built so that every digit from 0 to 9 takes up exactly the same width, so when you stack numbers on top of each other the columns line up perfectly. Proportional numerals do the opposite: each digit gets a width that suits its shape, so a 1 comes out narrow and a 0 comes out wide. Both styles usually live inside the same font, and you pick whichever fits the spot you're using it in. Neither one is better than the other — they're two tools built for different jobs. You make the choice with the font-variant-numeric property.
Why does it matter?
In tables, price lists, and dashboard metrics — anywhere numbers stack up in a column — misaligned digits make everything harder to read. Proportional numerals have uneven widths, so the same digit position drifts out of line from one row to the next, and comparing the size of values at a glance becomes a chore. Switch to tabular numerals and every digit position lines up dead straight, so which value is bigger or smaller jumps out the moment your eye scans down. Tabular figures also help with numbers that update live: when a value changes, its width stays constant, so the display doesn't jitter left and right on every update. Numbers woven into a sentence, on the other hand, have no reason to share a width — proportional numerals blend in more naturally with the surrounding letters and simply look better. So even the same number wants a different style depending on where it sits.
Common mistakes
- Leaving proportional numerals on in a table or price list. The digit columns drift out of alignment, values get harder to compare, and the whole list looks untidy. Numbers that need to line up vertically should be set with tabular figures.
- Forcing tabular numerals onto numbers inside sentences. A digit like 1, which wants to be narrow, gets stretched to a full width, opening up awkward gaps between characters and breaking the natural flow of the line.
- Reaching for spaces or hand-inserted padding to line numbers up instead of using tabular figures. The moment the font or screen size changes, that alignment falls apart. For spots like this, let tabular numerals do the work rather than tuning it by hand — it holds up far better.
Practical tips
- Use tabular-nums wherever numbers need to line up vertically, like tables, prices, and dashboards, and use proportional figures for numbers mixed into running text. You set both with font-variant-numeric.
- Reach for tabular numerals in counters and timers whose values update live. A constant digit width keeps numbers from twitching left and right as they refresh, so they stay put and look far steadier. That jitter is especially noticeable on a timer counting seconds.
- Before you settle on a numeral style, check that the font you're using actually supports the feature. Some fonts don't include tabular figures at all, so setting the property changes nothing. When that happens, one option is to swap in a different typeface just for the numbers.