Skip to content
UX Atlas
Plate FND·030 · UI foundationGrid D2 · Rev. 2026-08-14

Font Selection

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2What to check before committing to an interface typeface
  3. 3System font stack
  4. 4Pairing
  5. 5Checks before committing to an interface typeface
  6. 6In practice
  7. 7Local chart
  8. 8Continue from here

Reach for this when

  • Starting a design system.
  • Reviewing a typeface for a product handling codes or numbers.
  • Balancing brand expression against interface legibility.
  • Choosing type for a product where most text is small, dense and functional.

Common mistakes

  • Choosing a display face for interface use.
  • Insufficient weight range.
  • Missing tabular figures or language coverage.

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.

Checks before committing to an interface typeface

CheckWhat fails it
Ambiguous characters1, l and I, or 0 and O, indistinguishable in identifiers
Tabular figuresNumbers that shift width between values in a column
Weight rangeOnly regular and bold, leaving no medium for labels
Language coverageMissing accents, or no support for scripts you ship in
Small size renderingA face designed for display, blurring at 13 pixels
File weightFour weights, two styles, and nothing subset
LicenceWeb use, self-hosting or app embedding not covered

In practice

  1. i.

    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.

  2. ii.

    The typeface that failed at 13 pixels

    Display against interface

    A geometric face with tight apertures looked exceptional in the brand deck and turned into grey mush in table rows. Interface type is judged at the size it is used, not at the size it is presented.

Local chart

FND·030 · Region II · Grid D2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

KerningTERM·061 · SHORT DEFINITIONLargest Contentful PaintTERM·125 · SHORT DEFINITIONTabular FiguresTERM·063 · SHORT DEFINITIONDesign TokensSYS·001 · RELATED CONCEPTFont WeightFND·033 · RELATED CONCEPTLetter SpacingFND·035 · RELATED CONCEPTPerformance as User ExperienceFND·054 · RELATED CONCEPTReadabilityFND·036 · RELATED CONCEPTType ScaleFND·031 · RELATED CONCEPTTypographic HierarchyFND·032 · RELATED CONCEPTVariable FontsFND·037 · RELATED CONCEPTInternationalizationWRT·006 · RELATED CONCEPT

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.