Mark McGuire

A Deaf nomad exploring our world.

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 Notes

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

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

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

Additional Resources

Setting Up the Typography

This post is a work-in-progress.

The U.S. Web Design System summed up their needs pretty well.

Government websites need clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. Our default typefaces are designed for legibility and can adapt to a variety of visual tones.

USWDS Typography

The Backstory

My goal is to ensure a great accessible user experience (AUX) possible.

That means making this website useful for people with disabilities. This website uses WordPress (WP) as a content management system. I am using the Genesis Framework to build this website. It comes with a free Genesis Sample theme I working with to make your experience usable.

The bottom line is if you do not understand what you are reading, then what you are reading is inaccessible to you.

There are many different parts involved when it comes to designing an accessible experience online. One of the parts involved in communicating information to you is typography.

Typography

Disclaimer: I am not a typography specialist.

Nor do I claim to understand the mathematical properties behind different typographical arguments.

What I do know is that if you do not understand what I write, then my information is inaccessible to you.

Restoring Your Default State

One thing is clear.

You have the right to access the information in the manner that fits your needs.

There’s different arguments when it comes to accessibility. It’s not my job to convince you of which arguments matters. It’s my job to present a valid line of thought that neutralizes these arguments.

With that in mind, I reviewed a few online resources. I took some basic concepts and addeded them into my notes on accessible typography. One thing became clear.

You can change the default font on your browser.

As a result, my first task is to clean up the “default” Genesis Sample style sheet which comes with font styles set by the creators. The theme uses different font families and styles to guide you into creating an accessible experience.

Setting Your Reading Width

Before I can dive into the typography, it is reasonable to set the reading width.

Based on The Elements of Typographic Style Applied to the Web, 2.1.2 Choose a comfortable measure suggest setting the box width in ems to ensure the a comfortable measure is always set to the typographer’s specification.

In lay terms, that means my Genesis Sample theme “box” is the article that’s been assigned the class .entry which needs to be set.

Meaning if I think 72 characters is the perfect limit, then I should set the limit to 72 characters or 36 em.

It starts with setting the body font-size as the baseline for all other styles such as paragraph, headings, et cetera.

This is an example of Heading Level Three where I am testing the max-width property of 36em.

It appears that the max-width property of 36em works well. However, I noticed that it didn’t really help my reading experience when it came to lists.

Testing the max-width of lists

  • Lists can be unordered like this one with bullets
    1. Lists can be ordered like this sub-list with numbers or letters
  • Lists can be definition lists which is great for defining key terms
  • Lists can be indented using margins, paddings, even the space bar on your keyboard for those of you who are not familiar with how lists are created on typewriters or digitally.
  • For the purpose of testing, I set the max-width property to 33em which limits the length of my list to roughly 66 characters. The goal is to determine whether long list items are readable and usable without borders

To be continued…

There’s so much more to typography than what I just wrote here.

Mark McGuire