Briefle words · UI design
Tabular figures
Numbers designed so every digit has the same width, keeping columns of figures neatly aligned.
Say it to an AI
Checkout order summary card. Heading, line items, total and the Pay button all snap to one content edge, a single 24px inset on both sides, so every left and right edge lines up exactly. Right-align prices with tabular figures so the decimals stack.
How an expert would brief the stronger version of “Checkout summary”.
See it
Try it as a puzzle →Order summary card on the checkout page of a clothing store.
Why: A sets font-variant-numeric: tabular-nums on the prices, so $68.00, $44.00 and $5.90 line up on the decimal point.
Related words
Room 5 · Spacing & layout
Learn “Tabular figures” in a five-minute lesson