type

Most interfaces are 90% text. If the text is defaulted, the interface is defaulted, and no amount of colour or motion hides it.

Choosing the family

One sans for the interface. One mono for data, code, shortcuts and labels that should read as system. A display face only on marketing pages, and only if the sans cannot carry it.

Pick for the job:

If the project already has a family, use it. Changing fonts is a redesign, not a fix.

Never: more than two families in product UI; a decorative face for body; a rounded face to "feel friendly".

Two scales, not one

Product UI and reading UI want different bases. Pick which the screen is.

Product scale (tools, dashboards, admin, lists)

Body at 13px is the sweet spot for dense tools when the family is designed for it. Do not go below 10.5px for anything a person must read.

Reading scale (docs, articles, settings with long copy)

Measure: 55–70 characters. Set max-width in ch on the text container, not on the page.

Hierarchy without size

The mistake generated UI makes is making everything a different size. Three sizes are enough for most screens. Get hierarchy from:

1. Colour: four foreground steps. Primary text, secondary, tertiary, faint. Meta text is a lighter step at the same size, not a smaller size.
2. Weight: 400 and 500. 600 for a title, rarely. 700 almost never in a UI font: it fills in at small sizes.
3. Space: a title is separated from what follows by more space than sits between rows.
4. Case and family: mono uppercase with tracking for a section label reads as a label without being bigger or bolder.

A row can carry a name at 13px/500 in primary colour, a description at 12.5px/400 in secondary, and a domain at 10.5px mono in faint. Three levels, two sizes.

Leading

Tighter as size grows. Roughly:

• 10–12px: 1.4–1.5
• 13–14px: 1.45
• 16–18px: 1.5–1.6 (reading), 1.4 (UI)
• 20–24px: 1.2–1.3
• 28px+: 1.05–1.15

Titles that wrap to two lines are where wrong leading shows first. Set it there, then check the single-line case still sits right.

Tracking

Negative as size grows; slightly positive for small caps and mono labels.

• 24px+: −0.02em to −0.04em
• 14–20px: −0.01em to −0.02em
• 12–14px: 0 to −0.005em
• Uppercase labels at 10–11px: +0.06em to +0.1em
• Mono at any size: 0

Never track body text positive. Never letter-space a lowercase word.

Numbers

Any number that sits in a column, changes over time, or is compared to another uses tabular figures:

.tabular { font-variant-numeric: tabular-nums; }

Counters, prices, timestamps, row counts, percentages, keyboard shortcuts. Mono is the stronger version of the same signal; use it for values that are identifiers (IDs, hashes, hostnames) and tabular sans for values that are quantities.

Slashed zero (zero feature) in mono when 0 and O can be confused.

OpenType

Turn on what the face was designed with, sitewide:

html { font-feature-settings: "ss01", "cv11"; } /* per family: check its specimen */

Common ones worth checking: alternate a and g for a more neutral look, cv11 single-storey a in Inter and Geist, ss01 open digits, case for punctuation with caps, tnum (same as the CSS property above), calt for code ligatures if the team wants them.

Rendering

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

Antialiased on macOS makes light text on dark backgrounds thinner and cleaner. On light backgrounds it is close to neutral. Set it once, at the root.

Wrapping and truncation

• Titles and headings: text-wrap: balance. No more orphans.
• Paragraphs: text-wrap: pretty where supported.
• Rows that must stay one line: truncate (overflow: hidden; text-overflow: ellipsis; white-space: nowrap) with a min-width: 0 on the flex child, or it will not truncate.
• Descriptions in cards: line-clamp: 2, never 3+; if three lines are needed, the layout is wrong.
• Do not truncate anything the user needs to act on (a name they must recognise, an error). Wrap it.
• Hyphenate long reading text with hyphens: auto and lang set; never in UI.

Links in text

Underline, with text-underline-offset: 3px and text-decoration-color at the faint step, brightening on hover. Colour alone is not a link. In lists of items, the whole row is the link and it is not underlined.

Labels, buttons, inputs

• Sentence case everywhere. "Save changes", not "Save Changes". The only uppercase is small mono section labels.
• Button text: 13px/500 in product UI, same as the row name. Never smaller than the body around it.
• Input text: 16px on touch devices or the browser zooms the page. Use the same size on desktop or the field will change size between them; 14–15px is a workable compromise with a media query for touch.
• Placeholder: tertiary colour, never as the only label.

Loading fonts

• Self-host or use the framework's font loader; both give font-display: swap and no layout shift when combined with size-adjust.
• Preload only the weights you use above the fold. Two weights, not six.
• Variable font when the family offers one: one file, all weights, and animated weight if you ever want it (you probably do not).
• Fallback stack that matches metrics (size-adjust, ascent-override) so the swap does not reflow.

Marks of defaulted type

From the catalogue

• Geist — sans, mono and pixel families designed for product UI; the scale above assumes something like it.
• Google Fonts, Pangram Pangram, Klim, ABC Dinamo — where good families come from.
• Modular Scale, Utopia — build a scale once instead of guessing.
• Wakamai Fondue — see which OpenType features a font actually has.
• Better Web Type — the reading-scale fundamentals.
• More at stealth.pm/assets and stealth.pm/tools.