Accessible Font is Everyone's Type

Font choice is an important factor in creating any content that includes text, whether it’s a document, images or video, or even an entire website. Most of the content on the internet and in the world is text. It’s everywhere, and even visual content includes a good measure of the written word. Naturally you want all of your text content to be legible, and to make it legible, you will want to make sure the font you choose for your brand is accessible.

Web accessibility has not only become more of a central concern in web design and content creation, it’s also now the law. In Canada, Ontario has required many websites to comply with the Web Content Accessibility Guidelines (WCAG) 2.0 since 2021. BC, Nova Scotia, and Manitoba will too within a couple years. Overall, you want an accessible website and content. It means anyone can experience the internet regardless of their ability. Increasing accessibility of your content also allows you to increase your reach and the size of your audience while being inclusive.

Accessible Fonts

Let’s start with some hallmark accessible fonts. Most of these are industry standards and may be familiar to you: Helvetica, Tahoma, Calibri, Verdana, Times New Roman, and Arial.

Tiresias and OpenDyslexic are also honourable mentions. These fonts are designed specifically for accessibility but are more specialized. As a result, users may not have them available on their devices. If your website uses a font that is not widely available, their machine will switch to a default. For most browsers on Windows that is Arial and Times New Roman for serif and sans-serif fonts respectively. For Mac OS, that pairing is Helvetica and Times New Roman, except Safari, which switches everything to Times New Roman. For phones, iOS uses San Francisco and Android uses Roboto. You can use more specialized fonts but keep this possibility in mind. Thankfully, the browser defaults are accessibility standards.

What makes a font accessible?

While it’s typically better practice to stick to widely available fonts, especially for web content, you may want to choose a font outside of this group. You should consider what makes fonts accessible. Your font can still look good and professional while also being accessible. Here are the main characteristics that increase or decrease a font’s accessibility in design and use.

Serif vs. Sans Serif

It’s still commonly said that sans-serif fonts are more accessible than serif ones, and you may have noticed that the standards listed above are mostly sans-serif. However, this is a common myth. Standard practice was to use serif fonts in printing and sans serif fonts for screens. This was due to older, smaller screen resolutions not being able to appropriately display serifs. Today, screens have more than sufficient resolution to properly display serif fonts accessibly. This can still be useful to consider when making content for small screens, but instead, there are other main concerns for choosing an accessible font.

Character Discernibility

Serif or not, one of the primary concerns in determining a font’s accessibility is its discernible characters. Certain groups of characters can be easily confused if not visually distinct. Compare the capital “I” with the lowercase “l” and the number “1”. In this case, a serif font can actually increase accessibility with slight serifs removing ambiguity. Similarly, the double-tiered “a” is less easily confused with “o” than the circular alternative.

Some other good comparisons to make are:

• Number “0” and capital “O”, and potentially capital “Q”

• Number “8” and capital “B”

• Lowercase “c” and lowercase “e”

• Number “6” and capital “G”

Handwriting or Calligraphic Fonts

Handwriting and calligraphic fonts might be pretty, but their swirls and curls create a lot of character ambiguity. Besides the ones mentioned earlier, handwriting fonts have notoriously ambiguous “minims” (the strokes in “i”, “n”, “m”, “u”, “v”, and “w”) which can easily merge into an indiscernible hillside. You can use these fonts for an aesthetic flourish in images or videos, but if you are concerned about accessibility, never make one of these a primary font for your brand. Screen readers will be able to read the font aloud, but it is good practice to provide captions that also present the text in a more visually accessible font.

Colour and Contrast

Any font must clearly contrast against its background. If contrast is insufficient, anyone with visual impairments will have difficulty seeing and reading the text. Give the text a colour with a large enough size to clearly stand out from the background. If it is too difficult to keep a high contrast against a changing background, give the text its own solid background. Another solution is to provide an outline. White text with a black outline is usually visible on anything. You can check if the contrast on your website’s font is sufficient and receive recommendations from the tool tota11y.

Size

Your font should be large enough to be easily visible to those with visual impairments. The font’s width and height should also be substantial enough to make the letters discernible and have them contrast against the background. At the same time, the letter should not be too wide or tall so that the letter’s strokes become cluttered. The standard ratio is that a letter’s stroke should have a width that is 1/5th its height.

Avoiding All Caps

Writing in all capitals forces all readers to slow down. Uppercase writing is more difficult to read because it gives each word a similar, rectangular shape that makes them less immediately discernible. Some fonts have small capitals, which are designed to retain some more discernibility. These differentiate actual capitals from lowercase through sizing, e.g. Creative Solutions. Stick to a standard casing font. If you must use a capital font, use small caps for the most accessibility.

Similarly, for social media hashtags, don’t use all uppercase or lowercase characters. It can be difficult to visually discern the individual words, #dadscare could be “dad scare” or “dads care”. Instead, capitalize the first letter of each word, also called Camel Case or Pascal Case, to increase legibility e.g. not #creativesolutionsaccessiblefonts but #CreativeSolutionsAccessibleFonts

Overview

Overall, you want to ensure your font is visually discernible and distinct in its lettering, colouring, and sizing. Don’t be afraid to stick to industry standards. Some like Helvetica and Times New Roman have been used for decades. As long as you keep these essentials in mind, you should be ensuring you have accessible fonts and text. Have questions or want more help on creating accessible designs for your business? Creative Solutions can help with your websites, social media, and overall design.

Our user experience services can help ensure you're providing an optimal and accessible experience on your website.