Font types, font design and typography can have a huge impact on the legibility and visibility of designs for visually impaired viewers, a consideration that print and web designers often overlook.
Choosing the right type of font style to use on your print layout or website to improve accessibility doesn’t need to be difficult or to compromise the overall aesthetic of your design. Here, you can find out more about how different types of fonts and font design can affect visually impaired viewers, and how you can make instant improvements to your designs.
How Do Font Choice and Typography Affect Visually Impaired Individuals?
According to the World Health Organisation (WHO), at least 2.2 billion people have a vision impairment or blindness, which means that an astonishingly high percentage of 28.5% of the world’s population have some form of vision impairment.
-
How You Can Use Adobe Software to Improve Accessibility on Your Designs
-
Building an Inclusive Web: Why Accessibility Matters
Visual impairment falls broadly into three categories, which have different or overlapping effects for how those affected interact with type-based designs:
Color blindness means that while the shape of text is not distorted, the color of text can be difficult to perceive, and the distinguishment between colors can be more difficult. Color-blind individuals can also be sensitive to color brightness.
Low vision (or low visual acuity) means that an individual can have partial sight in one or both eyes, blurry vision, tunnel vision, central field loss, and/or clouded vision. Designs with small-scale text or click targets can be difficult for affected users to read or see. While some individuals use specialist built-in browser zoom or screen magnifiers like ZoomText for browsing websites, many non-technical users are not aware of, or don’t know how to use, these extensions.
Blindness is the substantial loss of vision in both of the eyes. For printed and physical text, blind individuals have relied on Braille text, while blind internet users often turn to screen reader technology, which turns on-screen content into speech or shows it on a Braille display. The most popular screen reader software for Windows devices is JAWS (Job Access With Speech), while Apple users commonly use VoiceOver.
Other specific symptoms of visual impairment which can affect how individuals interact with text include:
- Visual snow, glare, ghosting, and cataracts—symptoms which can affect the clarity, position and number of occurrences (double vision) of text.
- Nystagmus, which is characterized by rapid, involuntary, oscillatory movement of the eyes, can give the impression that text is jumping around or disappearing.
- An obstructed visual field, which includes floaters, an obstruction to one side (retinal detachment or hemianopia), obstructed central vision (glaucoma), spotty vision (diabetic retinopathy), or obstructed peripheral vision (retinitis pigmentosa or macular degeneration), can limit the individual’s field of view, meaning that some parts of the text in a design might not be visible.
An Example of Accessibility and Inaccessibility in Practice
Let’s look at an example of how the choice of fonts and formatting of typography could affect the accessibility of a site for visually impaired individuals.
The New Yorker has been praised by type aficionados for its elegant use of typography. On the magazine’s website, the quirky and custom-designed serif font, NY Irvin, is balanced with geometric sans serif Neutraface and traditional serif Times New Roman.
As a publication with an intelligent reputation, The New Yorker has a text-heavy website, featuring a masthead and central headline teaser, alongside a number of other article titles around the periphery.
As stylish and aesthetically balanced as it might be, the typography presents a number of issues which commonly limit the accessibility of such sites to visually impaired users.
The New Yorker website performs poorly on three occasions, when faced with users with symptoms of low acuity (blur), ghosting, and a blocked visual field. These images were generated using the NoCoffee vision simulator, a browser extension which allows web designers to assess the accessibility of sites.
An individual with low acuity would struggle to read the text set at a smaller scale, such as the article teasers in the left and right columns, as well as body text in the headline area.
If an individual experiences ghosting (also known as double vision or diplopia), the website text becomes nearly completely illegible. The ornate style of the serif font is no doubt an exacerbating factor in this, as the shape of individual letters is not instantly perceptible when overlapping.
In the case of a partially blocked visual field, the fact that the layout is text-heavy and scattered around a wide area adds to the inaccessibility of the site. In the case of peripheral vision (commonly a symptom of either glaucoma or retinitis pigmentosa), the outlying articles become more and more difficult to see.
The website performs much better, however, on three other counts. If an individual has color deficiency (such as protanopia, red-green color blindness), only the images are generally affected, with the black text set against a white background proving to be a clear and legible color choice.
In the case of contrast loss, the high-contrast monochrome palette also counteracts the effect of visual ‘graying’. Users with cataracts, who commonly experience a clouded field of vision as a result, will also benefit from the high-contrast color of the text.
Based on all of these observations, the type designers behind The New Yorker are doing some things well for visually impaired users, but there are significant issues that could be changed to improve accessibility.
While the black-and-white contrast of the text improves readability, the choice of a stylized serif font, small sizing of text and the quantity and scattering of text around the layout equate to a design that’s high on style but low on accessibility.
6 Steps You Can Take to Improve the Accessibility of Type in Your Designs
Making the type on your print or digital designs more accessible isn’t difficult. Below are six steps you can take to improve the legibility and overall visibility of fonts and typography.
Use Common Sans Serif Fonts
Currently, Section 508 of the Rehabilitation Act of 1973 does not pin down the requirements for choosing accessible typefaces. However, the US Department of Health and Human Services has recommended the following fonts for PDF documents: Times New Roman, Verdana, Arial, Tahoma, Helvetica, and Calibri.
These fonts tick two accessibility boxes. First, they are sans serifs. Lacking the extra flourishes featured on serif fonts that can impair readability, sans serifs are generally much easier to read.
Secondly, these are common fonts, which as a result are less likely to be replaced on websites and are also processed more frequently by readers, making the style of the font more invisible and the text more readable.
Stick to One or Two Fonts in a Design
Multiple fonts can distract from the task of reading, which adds extra strain for a visually impaired viewer, so limit the number of fonts on a print or web layout to a maximum of two or ideally just one font.
Increase the Size of Type
Use a minimum font size of 12 pt for web and print designs, but aim for even larger to improve visibility. The British government website, for example, uses a minimum font size of 19 pt.
Ensure key titles, calls to action, and important items of information are set in a large font size.
Maximize Color Contrast
Make sure the contrast between text and the background is as high as possible. Setting black text against white, and vice versa, is the obvious choice, but using colors from opposite ends of the spectrum will also help to maximize contrast in the case of color blindness.
Tip: Use a contrast checking tool to ensure that the color choices you’ve opted for are as contrasting as possible.
Avoid Animations
Text that flashes, moves or disappears is not only potentially irritating for the majority of website users, but it can exasperate visual impairment issues, especially in the case of nystagmus (flutter).
Avoid Using Italic and UPPERCASE Styles
Skewing and compressing text, as is the case with italicized type, reduces legibility, as does setting text in all caps. If you want to distinguish certain parts of your text, opt instead for a bold weight or increased font size.
Avoid Using Novelty or Display Fonts
Novelty font styles tend to be more stylized than sans serifs and serifs, meaning that there is an extra layer of visual information to process. Extra texture, decoration or flourishes increase the complexity of the font and reduce legibility. For a visually impaired viewer, this adds another task on top of the strain of trying to reading the text.
When Designing Fonts, Aim for Clarity and Distinction
Font designers love to experiment with new type styles, shapes, textures and colors in their designs. While this can result in a unique and eye-catching font, it doesn't necessarily mean the font is optimized for the visually impaired.
When designing your own fonts, aim to make the letters both clear and distinct from one another.
Improve the clarity of your letters by sticking to a clean, fuss-free sans serif style. Some lowercase letters like 'd' and 'b' can be easily confused, so make sure to create a distinction between letters that could be mixed up.
Conclusion: Improving the Accessibility of Fonts in Your Designs
By keeping accessibility requirements at the forefront of your mind while you design fonts or use them on print media or websites, you’ll ensure that your designs are going to be as accessible as possible for visually impaired users.
While legislation regarding font use on websites isn’t set in stone yet, pressure is growing on businesses to accommodate users with a visual impairment or other disability. Design is an area that can have a significant impact on the accessibility of media, so it’s increasingly important for designers to be aware of the needs of visually impaired individuals and to act on them in the work they produce.
To find out more about how to improve accessibility in your designs, check out these handy articles:
-
How You Can Use Adobe Software to Improve Accessibility on Your Designs
-
Best Fonts for Dyslexia
-
A Guide to Creating Accessible Animations
-
How We Test for Accessibility at Envato (Tools and Tips)
No comments:
Post a Comment