An Introduction to Font Accessibility

An Introduction to Font Accessibility

Just Creative is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission at no extra cost to you. As an Amazon Associate we earn from qualifying purchases. Learn more

Web Design Confession Booth (xvi)

This is a guest article from Jennifer Moline*.

Accessibility of images is emphasised 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.

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
  • Contrast between font and background
  • Text size
  • Text serifs (or lack thereof)

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

Lady in Red

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.

sponsored message

Text Size and Serifs

Text on your average website is 12 to 14 point 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.

Further Reading

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

In Conclusion

sponsored message

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.

12 thoughts on “An Introduction to Font Accessibility”

  1. I can’t help but saying the whole paragraphic ‘A Common Font Is an Ideal Font’ is just not relevant anymore these days. We can use @font-face to include fonts to our webpages, so that they can see the website as intended, even if they do not have that font installed. This article would’ve been nicer with a more modern edge to it. Thanks though!

  2. I try to use basic fonts like Helvetica for body content, and use images for headings. Try to keep things looking clean and consistent. Cheers for the article 🙂

  3. Yes we can already use @font-face, but common fonts are still the most effective fonts when it comes to gaining readership.

  4. One thing that is missing from this discussion is letter shapes. For many dyslexics the choice of font can make a big difference in accessibility. Fonts that are most helpful are those where the letter shapes are quite distinct from each other, which is why Comic Sans, hated though it is generally by designers, is considered quite a dyslexic-friendly font.

Comments are closed.

[Cyber Monday Deals LIVE!]
[Cyber Monday Deals LIVE!]