Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Font Selection

Interface typefaces are chosen for legibility at small sizes and complete character coverage, not for character.

Definition

Font selection for interfaces is constrained by rendering at small sizes, breadth of weights, numeral behaviour, language coverage and file size. Display typefaces can be more expressive because they are used large and briefly.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. What to check before committing to an interface typeface
  3. System font stack
  4. Pairing
  5. In practice
  6. Continue from here

What to check before committing to an interface typeface

  1. 1.Distinguishable characters: capital I, lowercase l, digit 1, capital O and digit 0 must be separable at 14px. This is a correctness issue in any product handling codes, IDs or passwords.
  2. 2.Weight range: at least regular, medium and semibold. Two weights is not enough for a hierarchy.
  3. 3.Tabular figures: required for any column of numbers. Check the font has them.
  4. 4.Language coverage: the scripts and diacritics your product actually needs, now and in the next two markets.
  5. 5.x-height: taller x-heights read better at small sizes.
  6. 6.Rendering: test on Windows, which historically renders differently from macOS, and on low-resolution displays.
  7. 7.Licensing and file size: a variable font is often smaller than four static weights.

System font stack

css
body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/* Monospace, for code and identifiers */
code {
  font-family:
    ui-monospace,
    "SF Mono",
    "Cascadia Mono",
    "Roboto Mono",
    Menlo,
    Consolas,
    monospace;
}

Resolves to the native interface font on each platform.

Pairing

Do

  • Pair a distinctive display face with a neutral interface face, and use each in its own role.
  • Keep pairs to two families plus a monospace where needed.
  • Give each family a clearly separate job, documented in the system.

Do not

  • Mix two faces of similar style and weight, which reads as an error rather than a pairing.
  • Use a display face for body text or interface labels.
  • Add a third family without a role that the first two cannot fill.

In practice

Ambiguous characters in identifiers

Developer and finance tools

A typeface where 1, l and I are near-identical produces real support incidents when users transcribe reference codes. It is a functional defect, not a stylistic preference.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.