Typography for product UI is mostly about restraint

Most product type systems use too many fonts, too many sizes, too many weights. The premium ones use fewer. Restraint is the entire game.

Two fonts is enough

One sans for UI and body, one mono for code and numbers. That's it. A serif for editorial flavor is optional, and only if the product has long-form content worth serving. Three fonts is usually a sign that nobody made a decision.

Inter, Geist, SF Pro, the modern sans options are all fine. The font you pick matters less than the discipline you apply to it.

Four sizes carry most products

• Body: 14–15px. The workhorse. Used for most everything.
• Small: 12–13px. Metadata, labels, captions.
• Heading: 18–20px. Section titles, card titles.
• Display: 28–48px. Page titles, hero headlines.

You can ship a complete product on four sizes. Some products need a fifth, usually a tiny 10–11px for table cells or dense data. Past five sizes, you've built a custom Word.

Weights

Three weights, used consistently: 400 for body, 500 for medium-emphasis (links, slightly important labels), 600 for headings and strong emphasis. Reserve 700 for marketing display type, not product UI.

Skip 300. Light weights are illegible past 16px on most modern screens, and on retina they look anemic.

Leading (line height)

• Body: 1.5. The default for readable prose.
• UI labels: 1.2–1.3. Tighter, because labels are short.
• Display: 1.0–1.1. Tight headlines have presence; loose ones have none.

Tracking (letter spacing)

Default to 0. Reach for negative tracking (-0.01em to -0.025em) on large display type, over 32px, default tracking looks loose. Positive tracking (+0.05em to +0.1em) is for ALL CAPS labels only.

Numbers

Use tabular numerals (font-variant-numeric: tabular-nums) for any table column showing quantities. Proportional numerals make columns of numbers jitter at the digit boundaries, bad for scanning, bad for comparison.

Build one

The directory's design foundations collection includes typography tokens and tuned prompts. Pair with spacing and color, type, space, and color are one system, not three.