Formatting money in a UI: currency, decimals and big numbers

Money is the number people check most carefully, and the one most often shown carelessly: a dollar sign that could mean four currencies, two decimals here and none there, 1234567.8 in a table. Each is small; together they make a product look untrustworthy.

Store integers, format at the edge

Keep amounts as integers in the smallest unit (cents, pence) and convert only when displaying. Floating point cannot hold 0.1 exactly, and the errors show up in totals.

Format with Intl

const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
usd.format(123450 / 100);                  // "$1,234.50"

const compact = new Intl.NumberFormat("en-US", {
  style: "currency", currency: "USD", notation: "compact", maximumFractionDigits: 1,
});
compact.format(1_240_000);                 // "$1.2M"

Intl.NumberFormat handles separators, symbol placement and decimals for the locale you pass.

Rules that keep it trustworthy

• Say which dollar. Where buyers may be international, show USD or US$, not a bare $.
• Consistent decimals. Either all prices show cents or none do, within a view.
• Tabular figures. So columns align; see tabular numbers in CSS.
• A real minus sign for losses, with a colour and a sign, never colour alone.
• A date on every balance. A figure without a time cannot be trusted.
• Compact only where precision does not matter, with the full value one step away.

Prices on product pages

State whether tax is included, and whether the price is one-time or recurring. The price should come from one source of truth, so the page, the structured data and the checkout agree; see product schema for digital products.

Editorial Ledger UI sets money in JetBrains Mono, and its Figure component contract means a money value cannot render without a label and a timestamp.