Designing for the Way People Actually Read
Reading on the web is not a single, uniform activity. Someone skimming a news site on a phone has different needs from someone reading a long-form article on a desktop monitor. Good typography acknowledges this by respecting the reader's environment, preferences, and even their cognitive or visual abilities. By applying a few scientific principles and leveraging modern CSS features, we can build interfaces that are genuinely comfortable to read for a wider range of people.
Choosing the Right Units
The first step is to establish a solid foundation for font sizing. On the web, we have many units for setting text size, but em and rem are generally the most appropriate because they are font-relative. Using these for margins and padding helps preserve the vertical rhythm when a user changes their browser's default font size.
It’s also important to consider optical size. Two fonts set at the same CSS pixel size can look very different in scale due to variations in their x-height (the height of a lowercase "x"). The font-size-adjust property can equalize this optical difference by matching the heights of lowercase letters. While this property is currently only fully supported in Firefox (and Chrome/Edge behind a flag), it can be safely used as a progressive enhancement within an @supports query. This is particularly useful for smoothing the transition from a fallback system font to a remote webfont, preventing a jarring layout shift.
Calculating Optimal Line Height
The default browser line-height of 1.2 is tuned for fonts like Times New Roman. Most other typefaces require more space. A key principle is that line spacing should be based on the x-height, not the font's point size. Research suggests a ratio of approximately 37.6 between the x-height and optimal line spacing on paper. For digital screens, where reading is generally harder, this ratio should be adjusted to 32.
With CSS, we can translate this into a simple rule. By defining a CSS variable for the font size, we can calculate the line height based on the ex unit (which is relative to the x-height of the current font):
This technique cleverly ensures an optimal line height for any font—including user-selected ones—even when standard typographic tools are not directly available.
Managing Readability Beyond Fonts
Typography in the Whitespace
For text to be legible, we must also consider the space between letters, words, and lines. This is crucial for readers with learning disabilities like developmental dyslexia, where scientific studies have shown that glyph shapes matter less than increased spacing for reading speed and accuracy.
Common CSS properties like letter-spacing and word-spacing can help, but they act unconditionally and can break the intended tracking. A more advanced alternative is to use variable fonts, where the designer controls a "spacing" axis. This allows for a non-linear, more nuanced spacing adjustment which can aid readability while maintaining the integrity of the font's design.
Width, Word Breaks, and Contrast
A paragraph's length is critical to reading flow. Our eyes can only clearly perceive about eight letters at a time through foveal vision. To ease the cognitive load of shifting from line to line, aim for a line length of about 60-70 characters for basic text. This can be easily set using the ch unit:
Be cautious with justification. Avoid justified text without proper hyphenation. Without it, the browser creates irregular gaps between words that can break the reading rhythm. For languages lacking native support, you can implement manual hyphenation by insetting the ‐ entity within words and setting hyphens: manual.
Finally, ensure a strong contrast between text and background is maintained. CSS variables and calc() can dynamically select the best text color for any given background. The rise of the prefers-color-scheme media query is a welcome change, allowing sites to tailor light and dark themes based on user system preferences with minimal scripting.
Putting Legibility Into Practice
Good reading experiences depend on a broad set of expertise. The more that knowledge is shared across a product team, the better the outcome for users. A few responsibilities are worth making explicit.
Design Responsibilities
- Treat semantic structure as part of the project, not as an implementation detail.
- Document layout and font metrics, and record the reasoning behind those decisions so developers can implement them faithfully.
- Keep typographic variables minimal — limit the number of families, styles, and variants used.
Development Responsibilities
- Learn the fundamentals of typography to understand design intent and translate it correctly in code.
- Use font-relative units for padding, margins, and gaps so spacing scales with user preferences.
- Avoid unconstrained font-metric manipulation; overriding font constraints too aggressively can hurt readability.
Team Responsibilities
- Study the WCAG principles and apply them deliberately.
- Treat inclusion and accessibility as first-class project concerns rather than side issues.
Reading is a demanding cognitive task. Research on web typography offers many avenues for improvement, but there is no single solution that guarantees readable text. The list of factors can feel long, yet most are actually manageable.
Line height for a paragraph can be set using the ex unit, and paragraph width with the ch unit, so both respect the browser’s font size and family preferences. Variable fonts allow fine-grained control over letter and word spacing, and adjusting glyph stroke can increase contrast for readers with visual impairments or dyslexia. CSS variables even make it possible to shift text contrast automatically in response to a user’s preferred theme.
The result is a page that dynamically tunes its legibility to the person reading it. That said, every detail can have an outsized effect, so it remains essential to test reading performance on the final product with real users.
For further study: research on dyslexia-friendly font readability and the visual factors in reading acquisition provides deeper insight. Practical guides on modern CSS layouts and accessibility advocacy are also useful starting points for teams working on these issues in the wild.
