Legibility

Legibility refers to how easily individual characters can be distinguished from one another — the degree to which the design of each letterform makes it uniquely identifiable at a glance. It's a property of the typeface itself, determined by choices made during type design: the openness of counters, the distinctiveness of letterforms, stroke contrast, x-height, and the clarity of terminals and serifs.

The difference between legibility and readability is subtle but important. Legibility operates at the character level — can you tell a lowercase l from an uppercase I from the number 1? Can you distinguish rn from m? Readability operates at the passage level — can you comfortably read a paragraph for an extended period without fatigue? A typeface can have excellent legibility but poor readability (sharp, distinct letters that are unpleasant at length), or reasonable readability with poor legibility (smooth flowing text where individual characters are ambiguous at small sizes).

For UI design, legibility is often the paramount concern. Interface text needs to be instantly parseable — users scan rather than read. Fonts designed for UI use, like Inter, Roboto, and SF Pro, invest heavily in legibility features:

• Disambiguated characters: distinct I, l, and 1; distinct 0 and O
• Open apertures: open counters on a, c, e, f, g so they don't close up at small sizes
• Generous x-height: taller lowercase relative to uppercase
• Moderate stroke contrast: consistent stroke weight that doesn't thin to invisibility

/* For UI text where legibility is critical */
body {
  font-family: 'Inter', 'Roboto', system-ui, sans-serif;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* For code where character disambiguation is essential */
code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-variant-ligatures: none; /* Disable ligatures in code for clarity */
}

Monospace fonts used for code — like JetBrains Mono, Fira Code, and Source Code Pro — are specifically engineered for maximum legibility, with highly distinctive 0 (often slashed or dotted), unambiguous brackets, and carefully spaced punctuation.

Factors that degrade legibility in otherwise legible typefaces include: very small font sizes (below 12px for body text), low contrast between text and background, all-caps setting (which flattens the word shape profile users rely on for recognition), and tight letter-spacing that causes characters to merge visually. The CSS property -webkit-font-smoothing: antialiased can also significantly affect perceived legibility on high-DPI displays by changing how sub-pixel rendering is handled.