Improving Web Typography for Visually Impaired Users

We in the web industry often create for the majority, making our work tolerable for those in the minority. That isn't good enough. In this article we're going to examine ways to improve the typographic experience for visually impaired users on the web.

Reports from late 2013 suggest there are an estimated 285 million visually impaired people globally. While 90% of these people live in developing nations, the remaining 10% includes 28,500,000 people who certainly interact with the web in some capacity. There are purpose-made browsers for visually impaired users like WebbIE which turn all pages to text-only interfaces to work with screen readers, but is that enough? What about those who aren’t fully blind, but have issues reading fonts over the web? Is an all-or-nothing approach fair to them?

Let's go over the issues this user group faces, how our industry practices assist in hindering them, and how we can fix the problem!

Issues in Typeface Design

When a designer creates a typeface the destined place of viewing has a heavy influence. Characters aimed for being read on printed media would be designed to best suit that. A desktop font should first be optimized before being used on the web, and many popular fonts do have web variants these days. For example, a typeface which is optimized for the web might have less stroke contrast (which you'll see in a moment), a taller x-height, larger counters (the holes within a letterform) and more open spacing. Whilst aiming to make type more readable on the web, some of these changes can actually have the reverse effect for people with impaired vision.

Unmodulated Strokes

You'll often hear people getting tangled up in a discussion about which is most readable for copy; serif or sans-serif type? In fact, choosing a typeface for readability isn't as black and white as that.

Unmodulated strokes are when the weight in a character's strokes are unvaried throughout. This removes many defining characteristics of letters which are used by the visually impaired for interpretation. For a visually impaired user, the S of an unmodulated typeface could quite feasibly be misinterpreted as a C.

In the example above you'll see that Arial has unmodulated strokes, unlike the classic serif Georgia. Verdana is a good example of a sans-serif which displays slight modulation. Its widened terminals (the end of the strokes) suggest a "stop" before the reader's eye moves to the next character.

In the 1950's Herman Zapf developed Optima with precisely this in mind; he aimed for a sans-serif which could replace the more often used serif type in books and magazines.

Poor Handling of Size and Weight

You might have found yourself having to do this before: increasing the weight of a font at smaller sizes for better readability. For the most part this is a satisfactory solution which gives the anticipated user readable content. In the case of visually impaired users, this again creates a near impossible reading experience.

When you combine a font not particularly designed for a certain size, and improve its legibility by adding weight (especially if the browser is adding the weight, rather than using a specific font variant), it exaggerates the effect of unmodulated strokes. The added weight blurs letter specific characteristics used for easier identification.

Lack of Distinctive Kerning

Kerning is the distinctive adjustment of spacing between characters in a font. With kerning, the goal is to have a distinct amount of whitespace between characters for the entire font family. However, in most fonts you’ll find on the web the amount of whitespace is handled in a more uniform manner.

On the surface this doesn’t seem so important, but a uniform approach can lead to character misinterpretation. A common example of this is L and J. Place these two characters next to one another and you could easily misread them for U, or LI. Another great example is two capital v, VV. This combination could easily be viewed as a W.

Color Choices

It is impossible to discuss legibility without mentioning color choices. Different color combinations for the font and background create different reading experiences. For instance, it is a common safe practice to put nearly-black text on top of a nearly-white background. In the same regard it is bad practice to use a yellow color with a white background. The latter makes for a horrendous reading experience, and can induce headaches.

Today, with the prominent use of flat design, these color issues don’t pose as big a problem compared to a few years ago. However, it's still something to take into real consideration. For a video background (also a rising trend), there are always going to be different scenes which change the color balance. For flat design, the problem lies with choices in simply muting a color enough as to where it gives an acceptable level of legibility.

The white on blue in this example looks great, but not if your vision isn't 100%. Take a look at checkmycolours.com to analyze any combinations you're unsure of.

Creating Better Project Font Sets

After going over a few quick key disadvantages facing visually impaired users with web typography, let’s now transition into what can be done as architects of the web to help with that.

Better Color Combinations

To create color combinations between your scheme and font, there is only one simple rule to follow. The background should be clear and muted enough as to where it doesn’t create noise. For the font, a solid color with a respectable amount of contrast. Simple, right?!

For video backgrounds there is a little more involved. While an overlapping background color under the text is great, the video can differentiate atmosphere and noise levels through changing scenes. To counter this, make sure to take into account all the different scene changes throughout the video.

Simply displaying a font at a safe size isn’t going to always work. As you’ve probably experienced, some fonts appear jagged, or less refined, when used at different sizes. A popular fix for this is some extra weight and adding a stroke. While that can assist, it's messy and doesn’t fully get the job done.

Testing

Testing to make sure your site is legible for those with visual impairments isn’t as difficult as it sounds. Try doing these three things:

Look at your site in a gray scale.
Test how your site would look for users that differentiate between, or see certain colors (orange and red for example). www.color-blindness.com/coblis-color-blindness-simulator
View how legible your font looks at different levels of blurriness by playing with text-shadow.

Resources

Conclusion

Being aware that there is a problem is half the battle. Now you should have a solid starting point for understanding how you can give visually impaired users a better experience.