Part 6: Accessible Fonts

Part 6: Accessible Fonts

Fonts are used to display text, numbers and characters on your website in a specific style and size. They are the essense of your website and try to convey the service, products or information you are trying to get across to your readers. Font style is an often overlooked but important part of website accessibility and can have a significant impact on someone’s experience of using your website.

When trying to decide what font to use, most people solely just look at the aesthetics of the font and give no consideration to the accessibility of the font to many people with disabilities, especially those with visual and learning impairments. If you do not choose the right type of font, it may be difficult for a person to distinguish between letters, understand context and will also provide a poor customer experience, leading to your customers taking their business elsewhere.

Font types:

Accessible fonts should be easy to read and see with clearly defined shapes and sizes. Although there is no definitive answer to what font to use, Sans-serif fonts are generally regarded as accessible fonts and include types such as Ariel, Calibri, Tahoma and Verdana. Sans-serif (also known as sans) fonts do not have extending features called “serifs”, are quite simple in structure and have less stroke width variation.

An important aspect of font accessibility is using a font type that is common, so that many users who have difficulty with typography have seen these fonts and learned how to understand them. Also, try to keep the amount of different font types to a minimum. Too many can become confusing for readers and difficult for many with disabilities to follow.

For many with learning and visual impairments it is important to also ensure ‘b’ / ‘d’ and ‘p’ / ‘q’ have unique identifiers, as well as I,l and 1. This can be found in fonts such as ‘dyslexie’ and ‘PT Mono’. Although, unless there is a specific reason to do so, it may be best to stick to more common fonts, like Tisa Sans Pro, or other humanist sans-serif fonts, than ones that help one particular disability. It is worth noting that popular fonts like Ariel and Helvetica are notoriously bad in the i,l and 1 test.

As alluded to above, there is no definitive answer to the ‘right’ font type to use. Just be sure to look out for the above details when choosing a font type for your website and pick on that has clearly defined shapes and sizes.

Font size:

While there is no officially minimum font size for your website general guidance recommends text is 14px or larger and no smaller than 12px. The most inclusive font size is regarded to be 16px-plus. Be sure to remember that different fonts sit on different scales and actual font sizes can vary between fonts. WCAG recommend the line height should be a minimum of 1.5 times the font size. 

Due to the power of most browsers to adjust the font size, this aspect may not be the same priority it has been in the past. What is important is to ensure whatever size you use (above the minimum requirements) can be increased and decreased without loss of readability and functionality.  Also that your font size, line height and line length should all be working together, creating a perfect balance for your website.

Capitals, Bold and Italics:

When writing blocks of text, capitals, bold and italics should not be overused.  Sentences should not be written in capitals as they are much more difficult to read, for humans and screen readers. Words can be written in capital letters but only where required and very rarely.

Bold and Italics should also only be used where you are trying to emphasise meaning or give its meaning importance. WCAG recommend that chunks of italic text should be avoided. If you are using bold and italics to emphasise meaning or give its meaning importance then it is important to use the strong tag and emphasis tag in the html code to help ensure screen readers know there is something to be understood. The bold tag and italic tag will not be announced on most screen readers so you will not be providing the same experience to all readers.

In most wordpress sites, this can be checked by editing a page and clicking on the ‘text’ tab, next to the ‘visual’ tab. This will show you the html code behind the ‘visual’ tab and you will be able to see if the html code directly before and after the words you are highlighting have or , or or . If they are or then you do not need to do anything. If they aren’t, and you are reasonably familiar with html code, then they can just be changed from the and to the and from within this section.

Although accessibility is a broad subject, if you want to make you online content accessible then considering accessible fonts and how to use them are a big part of ensuring you have an inclusive presence online.

Summary Points:

• Font size should be at least 14px.

• Font should be easy to read with clearly defined shapes and sizes.

• There is no specific font to use for accessibility purposes.

• Limit number of font types used.

• Choose a common font type and limit the number of fonts used on your website.

• Synchronize font size, line height and line length.

• Use and   tags for bold and italics.

• Use capitals only where necessary.

• Try out your font using the il1 test.