Tabular Figures

Your pricing table looks right until the decimal points drift. Proportional figures give every digit a different width. Tabular figures make them line up.

The Principle

Many professional typefaces include different kinds of numerals. Tabular figuresNumbers that share equal width so columns align vertically. Set with font-variant-numeric: tabular-nums. share the same width, making them ideal for tables, prices, and financial data. Proportional figuresNumbers with widths that vary by digit. Natural in running text, poor for aligned columns. vary in width and blend naturally into running text.

The Rule I Follow

I use proportional figures for paragraphs and tabular figures whenever numbers need to align vertically.

Try It Yourself

Toggle between proportional and tabular figures. Watch the amount column line up when tabular is on.

In proportional mode, $888.88 and $1,111.11 sit on different axes. Tabular mode aligns every digit.

The Mistake I'd Avoid

Using proportional numbers in tables where values need to line up.

Remember This

Choose figures based on function, not appearance.

/* tables, prices, timers */
.price,
td {
font-variant-numeric: tabular-nums; /* equal digit width */
}

/* body copy and labels */
p,
.label {
font-variant-numeric: proportional-nums; /* natural rhythm in sentences */
}

/* tables, prices, timers */
.price,
td {
font-variant-numeric: tabular-nums; /* equal digit width */
}

/* body copy and labels */
p,
.label {
font-variant-numeric: proportional-nums; /* natural rhythm in sentences */
}