Choosing accessible web fonts

As product designers, we can shape digital experiences for users around the world. In a time where the web is an integral part of our daily lives, we are responsible for ensuring it is accessible to everyone.

Color contrast gets a lot of attention, even though it is just one aspect of accessible design. One such overlooked element is our choice of fonts—the very text our users read! What good is a beautiful design, if it can't be understood?

In this post, I will explore how to start choosing more accessible web fonts. I will also discuss ways we can not only meet, but exceed, Web Content Accessibility Guidelines (WCAG) standards.

What makes an accessible web font?

Web accessibility is about creating digital experiences that can be enjoyed by people of all abilities. Fonts are critical in removing these barriers to access, because they determine how a user reads the content itself.

Here are five things to consider when evaluating a font for your product:

1. Legible: This is how easily users can see and distinguish one letter from another. Above all, fonts should be clear. Legibility is crucial for users with visual impairments, dyslexia, or cognitive disabilities, and fonts that are too decorative or complex can hinder comprehension. This results in dramatically different user experiences, and ulimately, literal gaps in understanding between users.

2. Readable: Beyond legibility, readability considers how a user deciphers text into meaning. We evaluate it through elements like the flow, spacing, density, and sizing of text, and how these choices affect comprehension. Users with low vision may rely on screen readers, magnification software, or other assistive technologies, so fonts should be designed to work seamlessly with these tools.

3. Distinguishable: WCAG guidelines specify minimum contrast ratios between text and background colors. When contrast is too low, users with low vision or color blindness can encounter difficulty reading. We can increase the number of users who can read our content by checking the color contrast ratios we use with online calculators, such as Chrome's dev tools.

4. Scalable: Users should be able to adjust font sizes without causing layout issues or loss of content. Scalable fonts accommodate individuals who read more comfortably with larger text.

5. Credible: Accessible design doesn't mean sacrificing visual character. When designing products with wide reach, we can strike a balance between style and readability that honors our brand's visual identity. Through this, we uphold the trust and credibility of the brand our product represents.

How do we choose a web font?

Here is a brief list of considerations when vetting the right font.

1. Prioritize readability and legibility.

   • Research is inconclusive as to whether serif or sans-serif fonts are more readable.
   • Previously, sans-serif fonts were recommended for the web because they rendered better on lower resolution screens, although this is not necessarily true today.
   • Serifs are designed to guide the readers eye, but can render oddly on certain screens and at times are perceived as visually noisey.
   • Avoid script and decorative fonts for body text, as they can be challenging to read.

2. Don't get caught up in the serif debate.

   • A more effective approach is to ask your users: what do you see when you read this text? Their preferences will guide your decisions.
   • When pressed, always prefer a font family with strongly distinguished characters.
   • Solicit feedback from users across font options—what do they find most readable and legible?

3. Pay attention to font size.

   • Use a minimum font size of 16px for body text to ensure it's easily readable.
   • Establish sufficient differences in size across titles and headers, at least in increments of 1.5-2 times the previous class.
   • Allow users to resize text without breaking your layout.

4. Use as few fonts as possible.

   • Fewer fonts mean less confusion for users. A good rule of thumb is one font, or two fonts chosen to complement one another.
   • Use a single font with different weights and cases to visually distinguish types of information, such as headers, body text, and labels.

5. Contrast is key.

   • Ensure sufficient contrast between text and background colors. Tools like the WebAIM Contrast Checker can help with this.
   • Aim for a 4.5:1 contrast ratio for normal text and 3:1 for large text, per WCAG 2.0 guidelines.

6. Test your text with assistive technologies.

   • Regularly test your design with screen readers, magnification software, and other assistive technologies to ensure a seamless experience.
   • Ask directly, do users comprehend the content differently when they use assistive technologies?

Going beyond compliance

While adhering to WCAG standards is essential, as designers, we can go a step further to strive for truly inclusive experiences:

1. User-dentered design: Conduct usability testing with a diverse group of users to gather feedback and insights. Ideally this is a continuous process, so that information is gathered information at more than one point in time and with multiple samples of users. These sessions help us identify font-related issues we may have missed. As with design generally, the greater the surface area of our processes, the better.

2. Provide options: Give users control over their reading experience by allowing them to choose from a range of fonts or font sizes within your design. As designers, our project is to maintain meaning and consistency as software adapts to users' preferred settings.

3. Consider culture: Keep in mind that Latin is not the only alphabet available on our global Internet. With internationalization features, users can translate page content with built-in browser tools. We can support this by choosing fonts with a broader selection of characters. On a related note, non-Western cultures may perceive fonts differently than Western cultures, which can influence impressions of the content. In this case, information about where our product is accessed can be especially helpful.

4. Continue adapting: This discipline is constantly evolving with the needs of users, so it is helpful to stay up-to-date on best practices. For instance, newer understandings behind the cognitive science of vision have driven proposed updates to how color contrast is evaluated! We live in a time of unprecedented access to expertise on accessibility in the form of articles, courses, workshops, and video content.

Takeaways

Accessibility is about compassion. As product designers, compassion for our users ought to motivate every decision we make.

By incorporating user feedback about legibility, readability, contrast, and scale into our design processes, we can not only meet but exceed WCAG standards, creating a more inclusive and equitable web for everyone. Remember, accessible design is not just a checkbox. It's a commitment to making information platforms available, welcoming, and inclusive for all people.