An Introduction to Font Accessibility

This is a guest article from Jennifer Moline*.

Accessibility of images is emphasized during web design training, but an equally important issue that is much less discussed is font accessibility. While images require alt text tags to enable the visually impaired to know what is being displayed, well-done font accessibility will make your site more available for everyone.

Formatting, typeface, and font variety are factors to take into consideration when creating and drafting material because digital content has the majority of accessible fonts, which is crucial in lowering the barriers to data and information.

Factors that make type legible

• Line length
• Font style
• Cautious selection of serif or sans
• Line thickness
• Character size

Traits of Font Accessibility

There are several different traits of your website’s text that all qualify as parts of font accessibility.

These include:

• Font popularity
• Font color
• Background color
• The contrast between the font and background
• Text size
• Text serifs (or lack thereof)

Accessible Fonts

Fonts that are simple to look at, understand, and comprehend are known as accessible fonts. Web accessibility is typically meant when the term “Font Accessibility” is used.The primary determining variables for font accessibility are size, color, and contrast. Arial, Verdana, Tahoma, Calibri, Helvetica, and Times New Roman are among the fonts that are very easy to read.

Slab serif fonts like Museo Slab, Rockwell, and Arvo are among the other readily available typefaces. Instead of the text body, headers are where they are most frequently utilized. The other readable typefaces for screen interpretation are sans serif fonts.

You can limit your options quickly if you know what characteristics to look out for in a typeface. An inaccessible typeface has the following features:

• Makes content more arduous to read
• Decelerates the reader’s speed
• Are Attractive
• Difficult to distinguish characters

Importance of Fonts In Web Accessibility

The majority of the information on the web is conveyed in the text, along with the unique advantages your company provides. Fonts are crucial since they can affect your trading success and more than 30 million people suffer from eyesight loss.

This number includes those who continue to experience issues even after wearing corrective glasses. This number will continue to rise as the population ages and develops further age- and eye-related problems. Some visually impaired people have trouble reading some fonts. It might be challenging for people with dyslexia to read some fonts. The choice of typeface has a wide variety of readability-related effects.

Helvetica, Arial, Verdana, and Courier are among the fonts that people with dyslexia can understand. Sans serif typefaces can also help those with dyslexia achieve better results. The majority of people in the US have dyslexia. So, making sure the website’s fonts are readable will assist your content reach this audience.

Best Font Size For Web Accessibility

Each person that visits a website has different needs. For the best reading, visitors will need tiny or large font sizes. Ems, Rems, Pixels, and Points are four different units used to measure font sizes. The font sizes must be precisely adjusted. It can be difficult to read typefaces that are too big or small. The ideal method for readers is to zoom in and select their preferred font size.

WCAG text size

There is no suggested minimum text size in the Web Content Accessibility Guidelines (WCAG). Sizes smaller than 12px have not been utilized in the past, and 16px is the most used size. With the aid of WCAG, you can zoom in up to 200% and enlarge text. This recommendation includes font choice, font size, color choice, and color contrast. All of these elements are crucial to make your material accessible.

A Common Font Is an Ideal Font

The popularity of a font may sound like a strange reason to choose or not choose it, but if few people install that font onto their computer, few people are going to see the site displayed using the font you intended. If a site’s specified font isn’t found when people visit it, their computer substitutes a common font that they do have installed. In design, this can drastically change how your site comes across, so it’s better to include one or two backup options in your CSS that will load if the visitor doesn’t have the first one.

Colours and Contrast

Certain colors, particularly red and green, are the most likely to create accessibility problems for colorblind individuals. If a site comprises these colors, that leaves only contrast to keep the text and background from blending together. Low contrast and odd colors tend to look garish and be difficult to read even for those who are not colorblind, so it’s a good practice to ensure that text and backgrounds contrast strongly.

Text Size and Serifs

Text on your average website is 12 to 14 points in size, but you should consider your target audience before following this trend. If your site is targeted toward the elderly, larger text as the default size would be preferable because elderly individuals tend to have more trouble reading small text. Similarly, using sans-serif fonts makes text easier on the eyes when viewing it on a monitor.

Put It to the Test

Even if you’ve taken care to address each of these accessibility concerns, it’s always a good idea to put your site to the test and ensure that you haven’t missed anything or done an inadequate job.

Here are some efficient and free tools to test your site’s accessibility:

• WAVE – Enter a site’s URL and get feedback on all aspects of accessibility using icons placed directly on the site itself.
• Accessibility Color Wheel – Select your site’s background and text colors with instant results showing accessibility-acceptable contrast. This tool emulates colorblindness to red, green, and blue individually as well, and is downloadable for offline use.
• Accessibility Wizard – Breaks down accessibility responsibilities by work position for a development team.

Fonts to avoid

It might not display properly on the reader’s device if you select a less widely used typeface over a common one. Avoid using fonts with “deceiving or impostor letter forms” that the reader might interpret incorrectly.

Further Reading

If you want to go more in-depth into the topic, make sure to bookmark and read the following articles:

• Font Accessibility: Despite being rather old, this guide is a great resource of various font accessibility tips: from choosing the font families to font sizes and colors.
• Dive Into Accessibility: Use relative font sizes as well as this Font style and size intro from the Queen’s University Web Standards and Accessibility Guide.
• Fonts and accessibility in web pages by Lois Wakeman.

In Conclusion

Paying attention to font accessibility will ensure that your site reaches the widest target audience possible, and doing this in the design stage will save you the time and energy you would have spent adjusting things later. Your site will look sleeker for the extra attention to detail, and polish is always a plus.

*Jennifer Moline writes about freelancing, small business and design for the PsPrint Blog. PsPrint is an online printing solutions company, which you can follow on Twitter and Facebook.