Tabular numbers
Also called tabular figures, tabular-nums, or monospaced numbers
A font setting that gives every digit the same width, so numbers line up in columns and timers or counters stop shifting as they change.
import { useEffect, useState } from 'react';
const ITEMS = [
{ name: 'Pro plan, yearly', price: 228 },
{ name: 'Extra seats (3)', price: 108 },
{ name: 'Custom domain', price: 12.5 }
];
const money = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
const pad = (n: number) => String(n).padStart(2, '0');
// tabular-nums (font-variant-numeric: tabular-nums) gives every digit the same
// width: the timer stops jiggling as it ticks, and the prices line up.
export function CheckoutSummary({
holdSeconds = 600
}: {
holdSeconds?: number;
}) {
const [left, setLeft] = useState(holdSeconds);
useEffect(() => {
const timer = setInterval(() => setLeft((s) => Math.max(0, s - 1)), 1000);
return () => clearInterval(timer);
}, []);
return (
<div className='w-72 rounded-2xl border bg-background p-4 text-sm'>
<p className='text-muted-foreground'>
Price held for{' '}
<span className='font-semibold text-foreground tabular-nums'>
{pad(Math.floor(left / 60))}:{pad(left % 60)}
</span>
</p>
<dl className='mt-3 divide-y'>
{ITEMS.map((item) => (
<div key={item.name} className='flex justify-between py-2'>
<dt>{item.name}</dt>
<dd className='text-right tabular-nums'>
{money.format(item.price)}
</dd>
</div>
))}
</dl>
</div>
);
}Apply font-variant-numeric: tabular-nums to the countdown timer, the prices on the pricing page, and every numeric column in the data tables, and right-align those columns so digits and decimal points line up. Keep the default proportional figures in paragraphs.
Paste into Layerwise or any AI coding tool.
Tabular numbers explained
Most text fonts use proportional figures: a 1 is narrower than a 0 or an 8, which looks natural inside a sentence. Tabular figures give every digit the same width, like a monospace font, while keeping the look of the typeface. In CSS you turn them on with font-variant-numeric: tabular-nums, or the tabular-nums class in Tailwind.
Use them wherever numbers change in place or stack in columns: timers, countdowns, prices, scores, stock tickers, data tables, and invoices. A running clock with proportional digits jiggles left and right as it ticks; with tabular digits it holds still. In a right-aligned column, decimal points and thousands separators line up.
The font has to include tabular figures for the setting to do anything. Most interface fonts, such as Inter and SF Pro, include them. Keep proportional figures in running text, where they space more evenly.
Related terms
All termsNumber ticker
A number that animates to its new value, either counting through the values in between or rolling each digit into place like an odometer.
Data table
A table built for working with records: click a column header to sort, type to filter, and check rows to act on several at once.
Typographic hierarchy
Using differences in text size, weight, and color so people can tell at a glance what to read first, second, and last.
Jank
Visible stutter in an animation or scroll, caused when the browser misses frames because it cannot finish its work in time.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.