Choosing a Typeface

A typeface that is well-chosen for body and UI text is invisible. Readers move through the text without becoming aware of the letterforms themselves. This is the primary criterion for most interface typography — not elegance, personality, or originality, but the capacity to carry content without calling attention to itself. At display scale or in brand-driven contexts, the calculus changes: the typeface is sometimes meant to be noticed, and personality becomes a relevant criterion.

What makes a typeface appropriate

Appropriateness is a function of the work the typeface has to do. For body text, the primary criterion is legibility at reading sizes: open apertures, clear letterform distinction, comfortable x-height, and reliable performance at screen resolutions. For display use, personality and optical characteristics at large sizes become more relevant.

The question to ask is not “do I like this typeface?” but “does this typeface perform correctly at the sizes, weights, and contexts I need?” A typeface with a beautiful regular weight may have poor bold or thin variants. A typeface that reads beautifully at 16px may look mechanical at 48px. Evaluate typefaces against the actual conditions of the system.

The main categories and their signals

Serif typefaces carry associations of authority, tradition, and editorial credibility. They perform well for long-form reading. Sans-serif typefaces read as modern, neutral, and functional — appropriate for UI elements, labels, and interfaces where the typeface should recede. Monospace typefaces signal technical precision and are appropriate for code, data, and anything requiring horizontal alignment. Display typefaces carry strong personality and are appropriate only at headline scales where their character is an asset rather than a distraction.

Most interface systems use one sans-serif for UI elements and either the same or a complementary serif for editorial content. See Pairing Without Conflict for how to combine them.

The legibility test

Before committing to a typeface, test it under the conditions it will actually face: at your body size, in your line length, on a screen at the target resolution. Look for: whether similar letterforms are easily distinguished (I, l, 1, |; 0 and O); whether the spacing feels comfortable at reading speed; whether it renders cleanly at small sizes. These are performance criteria, not aesthetic ones. A typeface that fails these tests at the sizes you need it is not the right choice, regardless of how refined it appears in specimens.

Variable fonts

Variable fonts encode multiple variations — weight, width, optical size — in a single file, replacing the separate files (Regular, Bold, Italic, Bold Italic) that traditional font families require. A variable font with a weight axis allows any value between its minimum and maximum, rather than only the fixed steps the foundry chose to release.

For UI typography, the practical benefits are: fewer HTTP requests (one file instead of four or six), access to intermediate weights (font-weight: 550 for a slightly heavier label without committing to full bold), and the optical size axis (opsz), which adjusts letterform details for the size at which the font is rendered — improving legibility at small sizes and expressiveness at display sizes automatically.

@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable.woff2') format('woff2');
  font-weight: 100 900; /* declares the available weight range */
}

.label  { font-weight: 500; }
.heading { font-weight: 650; } /* intermediate weight — only possible with variable font */

/* Optical sizing: adjusts letterforms for the render size */
body { font-optical-sizing: auto; }

Most major typefaces now have variable versions. When evaluating a typeface, check whether a variable font exists before committing to a traditional multi-file family.