Tabular Numbers

Digits can have two kinds of widths.

Proportional figures use the natural width of each shape: 1 is narrow, while 8 is wide. Tabular figures give every digit the same width. Toggle the demo to see the glyph boxes change.

0123456789

ProportionalTabular

ProportionalTabular

Use proportional figures when numbers sit inside a sentence. They read more naturally. Use tabular figures when changing values need to stay steady or align vertically.

Changing values

A timer made with proportional figures changes width as it runs. Everything beside it moves too. Watch the red edge in the demo below.

00.00Edge

ProportionalTabular

ProportionalTabular

Tabular figures turn every character into a stable slot. Use them for clocks, counters, scores, prices, and live metrics.

The usual instinct here is to switch to a monospace font, but you don't need to. A mono font changes the whole voice of the interface. Often, you just need to use tabular figures.

Tables

In a numeric column, equal-width digits create a vertical grid. Repeated places line up, so differences are easier to scan. It feels much better to see data this way.

ProjectSessionsChange

Vercel12,441+8.10%

Raycast21,118-1.87%

Notion11,874+7.18%

Linear17,481-1.11%

ProportionalTabular

ProportionalTabular

Right-align numeric columns as well. Right alignment keeps numbers with different lengths anchored to the same edge.

Usage

The font must include tabular figures for this to work. If tabular-nums makes no visible difference, drop the font file into Wakamai Fondue and check whether it lists tnum among its features.