Numerals, quotes and spaces

Use tabular digits, curly quotes and non-breaking spaces before units.

Web Interface Guidelinesvercel-labs · README.md
**Typographic quotes.** Prefer curly quotes (“ ”) over straight quotes (" "). **Avoid widows/orphans.** Tidy rag & line breaks. **Tabular numbers for comparisons.** Use `font-variant-numeric: tabular-nums` or a monospace like Geist Mono.
ContentView source ↗
Web Interface Guidelinesvercel-labs · README.md
**Non-breaking spaces for glued terms.** Use a non-breaking space ` ` to keep units, shortcuts & names together: `10 MB` → `10 MB`, `⌘ + K` → `⌘ + K`, `Vercel SDK` → `Vercel SDK`. Use `⁠` for no space.
ContentView source ↗
Web Interface Guidelinesvercel-labs · command.md
- Curly quotes `“` `”` not straight `"` - Non-breaking spaces: `10 MB`, `⌘ K`, brand names - Loading states end with `…`: `"Loading…"`, `"Saving…"` - `font-variant-numeric: tabular-nums` for number columns/comparisons - Use `text-wrap: balance` or `text-pretty` on headings (prevents widows)
Review commandView source ↗

From web-design-guidelines (Web Interface Guidelines).

A live balance

Watch the chip beside the number.

ProportionalBad
Available balance $4,811.07+1.18%
0.0pxproportional-nums
TabularGood
Available balance $4,811.07+1.18%
0.0pxtabular-nums

A column of amounts

Add an amount and compare the decimal points.

ProportionalBad
Payouts, proportional digits
PayeeAmount
text-align: right
TabularGood
Payouts, tabular digits
PayeeAmount
tabular-nums

Quotes and glued units

Edit the copy or narrow the box. Red marks a torn unit.

As typedBad

10 MB · "quote"
Glued and curledGood

10 MB · “quote”
.balance, td.amount { font-variant-numeric: tabular-nums; }
<p>Files over 25&nbsp;MB. Press ⌘&nbsp;K, type “Q3 close”.</p>

Why it matters, pros and cons

Why it matters

Proportional digits change width, so live numbers jitter and columns misalign.

Pros

  • Counters and tables stop jittering.
  • One CSS property, no fixed widths.
  • Curly quotes read as edited copy.

Cons

  • Tabular digits leave gaps around “1” in prose.
  • The font must ship a tnum feature.
  • Keep straight quotes in code and copyable input.