/typography-audit

Choose UI Fonts with Distinct Ambiguous Glyphs

For UI and data-heavy interfaces, pick fonts where l (lowercase L), I (uppercase i), and 1 (one) are visually distinct: ambiguous glyphs confuse IDs, codes, passwords, and data entry. Serifs help, since the serifs on I and l aid disambiguation. Use condensed faces for tight headlines and labels, never body text.

Incorrect (ambiguous glyphs in UI):

.code-input {
  font-family: 'Helvetica', sans-serif;
  /* I, l, and 1 look nearly identical */
}

Correct (distinct glyphs for UI):

.code-input {
  font-family: 'Inter', sans-serif;
  /* Inter has distinct I (with serifs), l, and 1 */
}

/* Or use a monospaced font for code/ID fields */
.code-input {
  font-family: 'JetBrains Mono', monospace;
}

Fonts with distinct l/I/1: Inter, IBM Plex Sans, Fira Sans, Source Sans Pro, Noto Sans. Test the string "Il1|" before committing to a UI typeface.