One of the most common mistakes in the web design Underestimating a website's readability is a mistake. Even if the content is relevant and engaging, if it's not readable, you'll lose users. From slow loading times to on-page errors, there are many reasons why users abandon a site, but poor readability is a common and easily fixable problem.
What is legibility and how does it differ from typographic legibility?
Typographic legibility focuses on the clarity of individual characters, while overall legibility encompasses text structure, design, colors, and site content. Both are essential for a good user experience.
Key tips for improving readability:
1. Focus on typography
Choose the right font
There is no universally "best" font, but safe web fonts like Arial, Roboto, Times New Roman, and Verdana are reliable choices because they come pre-installed on most operating systems.
Serif or sans serif?
Traditionally, serif fonts were reserved for print materials and sans-serif fonts for the web. However, with high-definition screens, both options are viable. Use standard fonts for the main text and reserve more decorative fonts for titles or headings.
Font size
The standard font size has evolved from 12-14px to a range of 18-22px. Avoid sizes smaller than 16px, as they make reading difficult. You can also opt for percentage sizes for greater flexibility.
Line height
The ideal line height is 1.5 to 1.8 times the font size. For example, for a 16px font, the line height should be 24-29px.
Line and paragraph length
- Length: Keep lines to 60-80 characters to avoid eye strain.
- Paragraphs: Limit them to 4-5 sentences to facilitate reading.
2. Use blank spaces
White space isn't "wasted space"—it's a powerful resource. It helps organize elements, highlight content, and improve comprehension. Uncluttered designs allow the page to "breathe" and make users feel comfortable navigating.
Example:
A clean design can use white space to contrast vibrant colors and guide the user's attention to the most important content.
3. Color contrast
The contrast between the text and the background must be sufficient to ensure clarity. According to the guidelines of WCAG 2.2:
- 3:1: Minimum contrast for large text.
- 4.5:1: Minimum contrast for standard text.
- 7:1: Improved contrast for greater clarity.
Avoid noisy backgrounds or images that make the text difficult to read. If you need to use images as a background, place the text on solid areas with sufficient contrast.
4. Be brief and relevant
Users tend to read less than a third of the content on a page. That's why your content should:
- Answer questions directly.
- Avoid figurative or flowery language, unless it is relevant to your audience.
- Be concise and scannable.
5. Use formatting elements
Users don't read word for word; they scan for relevant information. Facilitate this by using:
- Text in bold, italics, or underlined to highlight key points.
- Headings and subheadings to divide the content.
- Lists and quotes to organize information.
- Images to complement the text.
Readability: A shared effort
The readability of a website depends on both design and content. Designers and writers must collaborate to ensure an optimal user experience. Apply these universal techniques to improve any webpage or printed material.
Original article by Kate Shokurova | April 10 2020 published in Shakuro.
