Legibility Typeface And Size

Legibility — typeface and size

The two most fundamental legibility decisions: which typeface to use, and at what size. Everything else — contrast, spacing, weight, color — is calibrated against these choices. A typeface that's wrong for the use case can't be saved by any other adjustment; a size that's wrong for the rendering context produces text that no contrast or spacing tweak will fix.

Choosing typefaces by use case

Different uses demand different typefaces. The major categories:

Display typefaces are designed for headlines, posters, and other large-size uses where the typeface is meant to make a visual statement. Often have high contrast between thick and thin strokes (Bodoni, Didot), unusual proportions (condensed, expanded), or expressive personality (script, modern serif). They look striking at large sizes and lose distinguishability at small sizes — many become unreadable below 18–24px.

Use display typefaces only at display sizes (typically 24px and up). Don't use them for body text, UI labels, or anything small.

Body / text typefaces are designed for sustained reading at body sizes (typically 14–18px on screens, 9–12pt in print). They have moderate stroke contrast, generous apertures, and proportions optimized for legibility in long-form prose. Examples: Garamond, Caslon, Georgia (serif); Helvetica, Inter, Source Sans (sans-serif).

Use body typefaces for body copy and most UI text.

UI typefaces are body typefaces with adjustments for screen UI use: even more generous spacing, slightly heavier weights, sometimes designed for specific rendering targets. Examples: SF Pro (Apple), Roboto (Google), Inter (open-source), Segoe UI (Microsoft).

UI typefaces and body typefaces overlap heavily. The distinction matters most when you're designing for a specific platform that has a strong native typeface.

Monospace / code typefaces have every character occupying the same width. Essential for code (column alignment) and useful for tabular data. The best ones (JetBrains Mono, Fira Code, Source Code Pro) have explicit attention to character disambiguation (0/O, 1/I/l).

Use monospace for code, terminal output, structured numeric data, and tabular layouts where alignment matters.

Specialty typefaces for specific functions: Atkinson Hyperlegible for accessibility-first contexts; Highway Gothic-style typefaces for distance signage; numbers-only typefaces optimized for spreadsheet display.

Most products need at most 2–3 typefaces: a body typeface for the bulk of text, a display typeface for headlines (sometimes the same as body, in heavier weight), and a monospace typeface for code if applicable.

Sizing for the rendering context

The right size depends on:

Viewing distance. Closer viewing tolerates smaller text; further viewing requires larger. Mobile devices are held at ~25–35cm; desktop monitors at ~50–80cm; TVs at 2–3m; signage at variable distances.

Display DPI. Higher-DPI displays render small text more legibly because antialiasing has more pixels to work with. A 12px font that's legible on a Retina display may be illegible on a lower-DPI external monitor.

Lighting and environment. Bright sunlight, glare, low ambient light all reduce legibility. Outdoor and mobile contexts often need larger sizes than indoor desktop contexts.

User population. Older users, low-vision users, and users in unfamiliar languages need larger text. If your audience skews toward any of these, baseline sizes should scale up.

A practical baseline for modern UI:

• Body text: 14–16px
• Smaller UI text (helper, captions): 12–14px (don't go below 12 for primary content)
• Headings: scale based on hierarchy (24, 32, 48, 64+)
• Code: 13–15px for inline; 14–16px for blocks
• Hero text: 48–96px (or larger, depending on layout)

These are starting points. Specific products should test with their actual users in their actual conditions.

A typographic scale

Most well-designed type systems use a scale rather than ad-hoc sizes. A typographic scale defines a small set of sizes (typically 5–8) related by a consistent ratio. Common ratios:

• Major Second (1.125): subtle progression, lots of size steps. Used for tight UI systems.
• Minor Third (1.2): moderate progression. The most common modern UI scale.
• Major Third (1.25): stronger progression, fewer steps. Used for products that emphasize hierarchy.
• Perfect Fourth (1.333): strong progression. Used for editorial or display-heavy designs.
• Golden Ratio (1.618): dramatic progression. Used for highly hierarchical layouts.

Pick a base size (often 16px) and a ratio. Each size in the scale is the previous one multiplied by the ratio (or divided, going down). The result is a small set of sizes that work harmoniously.

For example, with base 16px and Minor Third (1.2): 11, 13, 16, 19, 23, 28, 33, 40, 48 px. Round to nearest pixel for crisp rendering.

The scale should cover all your needs. If you find yourself wanting a size between two scale values, the right answer is usually to use one of the existing values (the constraint is helpful) rather than adding a new one.

Choosing a system typeface

Some products use the platform-default system typeface (San Francisco on Apple, Roboto on Android, Segoe UI on Windows) for body and UI text. Pros:

• Free (no licensing cost).
• Optimized for the platform's rendering.
• Familiar to platform users.
• Performant (no font loading required).

Cons:

• Limited brand differentiation.
• Inconsistent across platforms (your product looks slightly different on each).

For most products that aren't building a strong brand identity through typography, system typefaces are a reasonable choice. They're free, performant, and well-tested.

For products with a stronger brand commitment, a custom or licensed typeface (Inter, IBM Plex, or a proprietary brand typeface) provides more consistency and personality, at some cost in licensing and performance.

Worked examples