The Fine Art of Number Typesetting — Choosing Type for Tables and Data

Teams obsess over body copy typefaces and then leave the numbers inside a table to fend for themselves. Number typesetting is the quiet corner of typography that decides how trustworthy a price list, dashboard, or financial report actually feels — and it rarely gets a line item in any design review.

1. Numbers Have Widths Too — Lining and Oldstyle

Most text typefaces ship with two distinct numeral styles. Lining figures sit at the same height as capital letters, which suits tables and headlines. Oldstyle figures rise and descend like lowercase letters, blending naturally into a sentence. Mix them up and tables start looking uneven while body copy suddenly has numerals that jump off the page.

There’s a second axis on top of that: tabular figures, where every digit occupies identical width, versus proportional figures, where width varies letter to letter. When numbers of different lengths in a table refuse to line up in a neat column, the usual culprit is proportional figures where tabular ones belong.

2. Tables and Dashboards Need Tabular Figures

Anywhere users scan numbers vertically — financial statements, price comparisons — tabular figures are non-negotiable. Because every digit has the same width, decimal points and unit markers stay aligned down a clean vertical line even when the values differ in length. Break that alignment and users have to recount digits by eye every time, which chips away at how much they trust the data itself.

CSS lets you enforce this with the font-variant-numeric: tabular-nums property. Bake that into a design system’s component-level defaults, and developers never have to remember to apply it by hand — tables and stat widgets simply render aligned every time.

3. The Details of Currency and Units

Number typesetting isn’t only about width. The gap between a currency symbol and its digits, where a percent sign sits, and how negative values are marked all affect perceived trustworthiness. A plain hyphen standing in for a minus sign often reads as visually too short, so negative numbers barely register. An actual minus sign (−, U+2212), or color-coding negative values, communicates far more clearly.

Keep the unit glued to its number

When a line break falls between a number and its unit — “12” wrapping away from “kg” — the reading flow snaps. A non-breaking space between the two treats them as a single token instead. It’s a small detail, but one that shows up constantly once a responsive layout starts narrowing.

4. Putting This Into Practice

Starting a new project, check first whether the body typeface even supports tabular figures. If it doesn’t, it’s worth pairing in a typeface that at least covers the numerals properly. From there, apply tabular-nums as the default across “price,” “stat,” and “table” components in the design system, and write the rules for negatives, currency, and units directly into the style guide so consistency survives as the team grows.

Multilingual products need one more pass. Some locales use a comma as the thousands separator, others a period, and currency symbols sit before or after the number depending on the region. Documenting these rules per locale up front saves the team from re-litigating the same conversation every time a new market gets added.

It’s worth auditing existing products for this, not just new ones. Open any live dashboard and zoom into the numbers — most teams are surprised how often proportional figures snuck into a table simply because nobody flagged it during implementation. A quick audit pass, fixed once at the component level, is far cheaper than living with slightly-off alignment across every report a product ships. It also tends to surface other small inconsistencies at the same time, like mismatched decimal precision or currency symbols placed differently across screens built by different teams.

Closing thoughts

Number typesetting will never be glamorous work, but it’s the quiet detail that decides whether users trust the data in front of them. Next time a dashboard or price table is on your screen, give the numeral style property as much attention as the typeface itself.