Skip to content

The Power of Words: Choosing and Using Accessible Fonts

Jared Smith, Associate Director of WebAIM, has stated, "There is not a best typeface or font." Alas, it's a hard truth.

However, some fonts have characteristics that make them more accessible than others, and there are pro tips you can follow to increase the accessibility and overall user experience for all your site visitors.

Let’s look at accessible fonts and how they impact the overall user experience of your website.

Why Use Accessible Fonts?

Accessible fonts offer a multitude of benefits. First and foremost, they improve legibility, making the text more accessible for everyone to see, read, and understand. Fonts designed with clear letterforms and minimal distractions, reduce strain on the eyes and brain. Furthermore, accessible fonts ensure inclusivity by making information accessible to users with a wide range of abilities, including those with visual impairments or cognitive differences like dyslexia. 

There can also be indirect SEO advantages associated with using accessible fonts. While they don't directly impact search engine ranking, they can contribute to a positive user experience, which is a significant factor for search engines. For instance, many accessible fonts render well on various screen sizes, making your website mobile-friendly, another key SEO element. Additionally, accessible fonts can help reduce bounce rates. Users who find your content easy to read are more likely to stay engaged and explore your website further rather than leaving immediately.

Characteristics of an Accessible Font

  • Letters should be easily distinguishable. Avoid using imposter letter shapes. For example, using Gill Sans, the uppercase i, lowercase L, and number 1 all look the same. Switching to Verdana, each letter has its own distinctive shape and size.
    Example of imposter letters where the uppercase i, the lowercase L and the number 1 in Gill Sans all look like a vertical bar.Example of an uppercase i, the lowercase L and the number 1 in Verdana, each letter with a distinctive shape and size.
  • Letters should not mirror one another. For example, some letters look the same when flipped horizontally, side-by-side. Notice the d and b in Arial. Those letters are mirror images of each other. The d and b in Georgia do not mirror each other because Georgia is a serif font with "tails and/or feet" at the end of its longer strokes.
    Example of mirroring letters in certain fonts, like Arial, where d and b and q and p are mirrors of each other. Whereas, in Georgia, d and b and q and p do not mirror each other because of the "tails and feet" at the end of its longer strokes.
    Examples of fonts that do not use mirrored letter shapes include Times New Roman, Georgia, and Garamond.

  • Letter spacing is key for font accessibility. When letters are crammed together, they can blur into each other and make words hard to decipher.
  • Focus on common, standard system fonts that are generally more readable than others. Those fonts include Helvetica, Tahoma, Calibri, Verdana, Times New Roman, and Century Gothic.

Pro Tip Best Practices

  • Always reduce font weight for text on dark backgrounds.
  • When using uppercase, always add letter spacing up to 5%.
  • Consider using font combinations, such as a clear heading and a body font. Limit your choices to two fonts.
  • If possible, use lowercase / old-style figures for numbers.
  • Apply small caps to acronyms and abbreviations.
  • Use tabular, not proportional, figures for numbers in data tables.
  • Never center the text for any copy over three lines long.
  • Maintain adequate spacing between words.
  • Keep fonts at a legible size. Body text should be at least 12 points (pt), or around 16 pixels (px), with no text being smaller than 9pt (12 px). 
  • Use responsive font sizing in your CSS. Avoid setting font sizes and margins with pixels for readability and user control. Instead, use REM units. REM allows users to adjust their preferred font size globally, which can be crucial for accessibility.
  • Choose text colors that are high color contrast with the background.
  • ​​Don’t use underline unless it’s a link.
  • Avoid italics. This can make text very difficult to read.

By choosing accessible fonts and following best practices, you're not just making your website look good but actively creating a more welcoming and inclusive digital experience for everyone. It's a small change that can make a significant impact.

Resources

Maggie Vaughan, CPACC
Content Marketing Practitioner
DubBot