ADA Compliant Font Sizes & Best Fonts For Accessibility

Font sizes are an essential element to consider if you are building a website. It is also important to consider how the fonts you select will affect the accessibility of your website. Ensuring the fonts presented on a webpage are ADA-compliant is a great way to improve user satisfaction and accessibility. However, it is not apparent which fonts are the best for web accessibility or what rules you should follow regarding fonts when you are building a website. There are a few guidelines developers can follow to ensure they are using fonts on their websites that are both accessible and ADA-compliant. 

/* <relative-size> values */
font-size: smaller;
font-size: larger;

/* <length> values */
font-size: 12px;
font-size: 0.8em;

/* <percentage> values */
font-size: 80%;

OR 
<p>
  <span style="font-size: 12pt">This text is 12pt</span><br>
  <span style="font-size: 14pt">This text is 14pt</span><br>
  <span style="font-size: 16pt">This text is 16pt</span><br>
  <span style="font-size: 18pt">This text is 18pt</span><br>
</p>

The Importance of Accessible Fonts 

Accessible fonts are a fundamental component of creating accessible online environments. Because the text is one of the primary ways information is communicated online, it is essential to ensure the text is accessible to all users who access it. At first, fonts may seem like a trivial component of website design. However, for users with visual disabilities or impairments, fonts have a significant impact on their ability to perceive and access online information. If developers fail to design websites with accessible fonts, the information presented may be inaccessible to some or all users. 

When determining if a font is accessible or not, there are a few key concerns to consider. The first is font size. If font sizes are too small, users with visual disabilities or impairments will have difficulty reading the text. The other key feature to consider when developing a website is the font’s ability to be expanded. WCAG Guidelines recommend that text can be zoomed to 200%. WCAG also recommends implementing liquid layouts designed to accommodate 200% text. Allowing text to be expanded to 200% provides additional accessibility capabilities for users that have an especially difficult time viewing online content. It is also necessary to ensure that when text is expanded, it does not lose its content or functionality. The specific success criteria for an expandable font are described by WCAG Guideline 1.4.4. Developers should become familiar with these guidelines when selecting the font for their website to ensure the content is compliant and accessible. 

/* Font size for Accessiblyapp */
<p>
  <span style="font-size: 12pt">This text is 12pt</span><br>
  <span style="font-size: 14pt">This text is 14pt</span><br>
  <span style="font-size: 16pt">This text is 16pt</span><br>
  <span style="font-size: 18pt">This text is 18pt</span><br>
</p>

Best Font Sizes To Use

In general, 12pt (16px) font is often recommended for the body text of a website. However, this ultimately depends on your target audience. When developing a website, you should always avoid using a font size of 9pt (12px) or smaller. Text this small is illegible on many platforms and will create additional accessibility issues. 9pt text is difficult to read for the majority of users and will likely be inaccessible to any viewers with visual disabilities or impairments.

For accessibility purposes, it is recommended and considered best practice to use relative font sizes on websites. Using absolute text sizes can make it challenging address accessibility because the text may not be resized appropriately across multiple platforms. For this reason, it is recommended to use other methods such as percentages or units of em. 

Best Accessible Fonts

When deciding which font to use for your website, there are a few elements you can consider to determine if a font is accessible or not. In general, the most accessible fonts for websites are fonts in the sans-serif family. Luckily, the sans serif font family includes a large array of options, giving developers creative freedom for their website designs. Arial, Helvetica, Open Sans, Tahoma, and Verdana are some examples of commonly used fonts that are in the sans serif family and sufficiently accessible for all users. It is best to use fonts that are commonly used and widely available. This ensures the font is not confusing or distracting for users. 

Additionally, the Accessibly widget includes several features that can help address the accessibility of website fonts. Accessibly has the ability to increase the size of site text up to 200% and increase line height if needed. This can be quite helpful for users visiting sites that have failed to use accessible fonts. Finally, Accessibly also has a feature that can change the site font to Helvetica, one of the recommended readable fonts.