Mark's Blog

Accessibility Notice

This site is being re-designed and re-developed with an accessibility-first mindset.

Digital accessibility

Notes on Accessible Typography

While researching on accessible typography, a core theme appeared.

The user can change the default font.

In other words, it does not matter what the client or designer thinks about their choice of fonts. What matters is allowing the user to change the client’s or designer’s choice of font to create an accessible experience that fits the user.

The Backstory

While working with my client’s design team on an agile software development project, one of my client’s User Experience (UX) designers explained that he chose Roboto as his default font just because he use it all the time.

“Just because I use it all the time” is a very common statement that is repeated over and over everywhere in all areas of the design and development life cycle.

This presented a challenge for me to frame my argument for why the designer’s choice of typography. I knew it was a matter of reframing the question in a way that the client can achieve their goal while appreciating the user’s choice if they both agree to disagree.

The question now becomes how can we match the user’s control with the client’s design preference?

After organizing my notes, I realized one thing was missing.

My own tool.

Yes, there are many tools you can use but none of that matters if you are the client. You are the one I am presenting the case to. It doesn’t matter if I present this tool or that tool.

Google Sheets Accessible Family Font Test

Inclusive Design Notes

  • Future-proof our content
  • Make content easy to read
  • Make letters and characters easy to identify
  • Slow the reader down
  • Make it easy to separate letters and characters to prevent overlap
  • Avoid decorative or unnecessary adornments
  • Avoid specialisty display fonts (hand-writing, cursive, custom, et cetera)
  • Make it easy for fonts to “travel” between digital and print content

Accessibility – Visual Design

The goal is to minimize any risk associated with using an inaccessible web font.

Depending on the user agent (operating system, browsers, etc…), this “default” can include both font families, line heights, sizes, etc.

Three key elements have been identified.

  • Size
  • Color
  • Contrast
  • Weight

Points of Consideration

  • Consistency – Minimize risk by using same fonts across all communication channels
  • Captions
  • Print
  • RNIB study suggests Helvetica 24, Arial 24, and Futura were preferred by users with low visions
  • Web
  • Virtual Reality

List of Accessible Fonts

It is important to keep in mind that the research is not conclusive as to whether serif or sans-serif fonts are more accessible or readable.

Sans-serif Fonts

  • Arial
  • Calibri
  • Hargreaves (Created for William Hargreaves, the first disabled person to site on Scope’s charity countil in the 1950s.)
  • Helvetica
  • Verdana
  • Times New Roman (Does not mirror)
  • Georgia (Does not mirror)
  • Garamond (Does not mirror)
  • FS Me (MenCAP) – Designed for better readability, created in 2008 by Fontsmith and multiple learning disability groups in UK. Provides larger than average dots on “i” and “j”, simplified “a” and “g” shapes

Slab-serif Fonts

  • Arvo
  • Museo Slab
  • Rockwell

How to test for inaccessible fonts

  1. Set up a testing template with side by side columns
  2. Add Gill Sans and Tahoma using uppercase letter I, lowercase letter l, and number one
  3. Repeat experiment with “e”, “c”, “o” characters
  4. Create mirroring test
  5. Sample Group: Add Arial and Georgia to compare letters d and b, letters q and p
  6. Additional sample group
  7. Mirror test – qpdb0OlI1
  8. Legibility test – Milliter

Accessibility – Font Styles

Font Size

  • Allow your visitors to increase or decrease text size without zooming in on everything else
  • Ensure text size allows content to be displayed properly on full range of devices (mobile, tablet, screen readers)
  • Recommend defining font size in relative unites (percentages, rem, or em)
  • Pixels does not allow for text resizing without affecting other elements of web page

Except for captions and images of text, text can be resized without assitive technology up to 200 percent without loss of content or functionality.

The best practice is to set the font-size on the html using % (or any other relative unit), and then set all the other elements to either em or rem which will be relative to the body size.

Font Contrast

Type color is an element that describes how dense or heavy the text appears on the page. (Wikipedia Type Color). It is possible to create a false positive using a light font on light background. The WCAG consortium has logged this as an issue on GitHub (Issue #695).

Until issue is settled, it is recommended to use the following guidelines to future-proof any design/development.

  • Define a font-weight in numbers (at least 400)
  • Do not use lighter, normal, bold, bolder which is subjective

Font weight

Font weight refers to how light or heavy the font is displayed. The following list is a simple breakdown of a two fonts that is defined by its’ font weight.

  • Normal font (400)
  • Bold font (700)

Additional Resources

Mark's Blog