# Tabular Numbers

> Steady digits for values that change.

- Section: Typography
- URL: https://craft.gustavofior.com/tabular-numbers
- Published: 2026-07-15
- Source: https://github.com/gustavo-fior/craft/blob/main/content/typography/tabular-numbers.mdx

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.

> **Interactive demo: Tabular Nums.** Open https://craft.gustavofior.com/tabular-numbers to try it.

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 blue edge:

> **Interactive demo: Tabular Timer.** Open https://craft.gustavofior.com/tabular-numbers to try it.

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.

> **Interactive demo: Tabular Table.** Open https://craft.gustavofior.com/tabular-numbers to try it.

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

## Usage

**Tailwind**

```html
<span class="tabular-nums">12:45</span>
```

**CSS**

```css
.numeric-column {
  font-variant-numeric: tabular-nums;
}
```

The font must include tabular figures for this to work. If `tabular-nums`
makes no visible difference, drop the font file into
[Wakamai Fondue](https://wakamaifondue.com) and check whether it lists `tnum`
among its features.

## Resources

- [Details that make interfaces feel better](https://jakub.kr/writing/details-that-make-interfaces-feel-better): A practical collection of small interface improvements.
- [font-variant-numeric](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric): Syntax, examples, and browser support on MDN.
- [CSS Fonts Module Level 4 — Numerical formatting](https://www.w3.org/TR/css-fonts-4/#font-variant-numeric-prop): The specification behind proportional and tabular figures.
- [OpenType tabular figures](https://learn.microsoft.com/en-us/typography/opentype/otspec190/features_pt#tag-tnum): How the tnum font feature maps digits to uniform widths.
- [Wakamai Fondue](https://wakamaifondue.com): Drop in a font file to see every OpenType feature it supports.