legibility-typeface-and-size

• SKILL.mdcore · 11,068 bytes
• references/typeface-selection.mddoc · 6,920 bytes

# 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).