UI Typography for Readability

WHY IT EXISTS Poor typography makes content difficult to understand, causing users to lose focus or abandon the text altogether. The goal of a deliberate typography system is to ensure all text—from headings to body copy—is clear, consistent, and highly legible, allowing users to absorb information with minimal effort.

THE MENTAL MODEL Think of typography not as choosing a font, but as engineering readability. It is a system of rules that controls the size, style, and spacing of letters (microtypography) and the arrangement of text blocks on the page (macrotypography). The objective is to guide the user's eye and reduce cognitive load, not to be decorative.

HOW IT WORKS Effective typography rests on a few key rules. First, font size: use a comfortable reading size for body text, typically at least 16px. Smaller or larger sizes should be used sparingly for elements like captions or major headings. Second, text alignment: always default to left-aligned text. This provides the eye with a consistent starting point for each line, making scanning much easier. Third, measure (line length): keep lines of text between 45 and 90 characters. Lines that are too short break the reader's rhythm, while lines that are too long cause eye strain.

WHEN TO USE IT Apply these principles to nearly all text within a user interface. This includes body paragraphs, headings, form labels, button text, and captions. A consistent application of these rules creates a strong visual hierarchy and a predictable, comfortable reading experience throughout your entire application.

WHEN NOT TO USE IT While left-alignment is the standard, other alignments have niche purposes. Centered text can work for short, standalone headlines, but fails in paragraphs. Right-aligned text is typically only used for aligning numbers in a table. Justified text, though common in print, should be avoided on the web because browsers handle it poorly, creating distracting gaps or “rivers” of white space within the text.

ONE CANONICAL EXAMPLE The U.S. Web Design System (USWDS) uses these rules to ensure government websites are accessible and clear. It mandates a base font size of at least 16px for body copy, requires text to be set flush-left, and specifies a measure of 45-90 characters per line. This ensures that critical information is easy to read for the widest possible audience.