Close

Accessibility Considerations for Choosing Fonts

One of the challenges in designing content is the constant struggle between aesthetics and accessibility. Something as simple as choosing a font can illustrate the practice of being intentional about inclusivity within the design process.

Accessible design is not something happens intuitively, it is an intentional practice that becomes a habit through practice. One of the challenges in designing content is the constant struggle between aesthetics and accessibility. Something as simple as choosing a font can illustrate the practice of being intentional about inclusivity within the design process.

Empathizing with Users

Accounting for the potential needs of users is the first step in making accessibility decisions. In the case of font selection, it is important to consider potential barriers that people with dyslexia or vision issues may face. Estimates for the prevalence of dyslexia range between 5% and 10% of the population, although these figures vary depending on the definition used (Siegel, 2006). About 60% of people aged 40 or more deal with difficulty reading text up close, and the incidence increases with age (Patel & West, 2007). These numbers are already significant, and a host of other vision or visual processing issues have not even been accounted.

Defining the Problem

When selecting a font, an examination of four font letter features is really important.

  • Does the font have good ascenders and descenders?
  • Is the font a serif or sans serif?
  • Are the letters I, i, L, l, n, m, p, q, d, b, u, v, w and 1 distinguishable from one another?
  • If applicable, is the font appropriate for young users still learning to print or read?

Ascenders and Descenders

Two fonts of lowercase letters a, b, c, d, e, f, and g are shown. Both rows have a red line at the base height of the letter and a blue line at the bottom of the letter. Ascenders rise above the red line and descenders are below the blue line. The top row shows an example of a font with good ascenders and descenders, while the bottom is a poor example.

The red line indicates the top of the letter base height, while the blue line indicates the bottom. Ascenders are above the red line and descender fall below the blue line. 

Ascenders and descenders can help with readability because they can help a reader distinguish different letters from one another. A lowercase letter has a base height determined by letters such as x, v, c, or w. As depicted in the image below, an ascender is any part of a lowercase letter that rises above that height indicated by the red line. Also depicted below, a descender is any part of a lowercase letter that falls below the base indicated by the blue line. According the British Dyslexia Association (BDA) (2015), typefaces with more-easily distinguished ascenders and descenders are preferred. The bottom row demonstrates a font with short or poor ascenders and descenders.

The top row of letters are the lowercase letters a, b, c, d, e, f, and g in a sans serif font. The bottom row of letters are the lowercase letters a, b, c, d, e, f, and g in a serif font with the serifs at the ends of the letters a, b, d, f, and g circled in red.

The top row is a san serif font and the bottom row shows a serif font with the extra lines circled in red.

Sans Serif and Serif Fonts

Fonts are also classified by whether or not they possess serifs, which are basically lines attached to the ends of letters. While there is a lot conflicting research currently on the “best” font, san serif fonts are typically recommended (BDA, 2015). In the image below, the top row depicts a sans serif font and the bottom row shows a serif font. The serifs are circled in red.

 

Distinguishing Letters

One of the biggest issues with readability for all users, are fonts that have letters that can be easily confused for one another. For users who already face barriers in reading text, this type of letter confusion just adds one more layer of frustration. To make sure this is not the case, you can easily ensure that your font is easy to read by ensuring that the number 1 and letters i, l, n, m, p, q, d, b, u, v, and w are distinguishable from one another. The most common issue arises from the upper- and lowercase letter i and l being similar to each other. The image below depicts how these letters look in different fonts. Red letters indicate potential readability issues.

The letters I, i, L, l, n, m, p, q, d, b, u, v, w and the number 1 are shown in five different rows. The top row uses the font verdana, followed by arial narrow, times, nunito, and permanent marker. The row with arial narrow and nunito highlights the capital letter I with the lower case l to show they look the same. Permanent marker highlights the similarity between the number 1 and lowercase i and the capital and lowercase letter l.

Letter distinguishability is shown for different fonts. Letters that could cause readability issues are in red.

Appropriate Fonts for Young Users

When designing content for users, it is also important to take into account the age or developmental stage of materials, especially for young users. When young children are learning to read and write they are exposed to letters similar to handwritten print. It is important to keep in mind that young users are still learning to associate the symbol of the letter with the concept of the letter. Most fonts depict the letters a and g in a format with which they are likely not familiar. Other fonts that use a cursive style may also depict letters such as S, Q, F, G, I, J, L, T, and Y in unfamiliar ways. The image below shows how these letters look compared to Comic Sans which depicts the letter forms young users recognize. Red letters are potentially unrecognizable for very young users.

Five rows of the letters a, g, S, Q, F, G, I, J, L, T, and Y in the font comic sans in the top row. Followed by depictions in the fonts verdana, times, tangerine, and pinyon script. Letters that differ from printed handwriting are shown in red.

Comic sans is an example of a font that is readable by young users who are learning to read and print. Red letters indicate potential letters that young users may not recognize.

The Font Selection

While it would be nice to be able to conclusively say that everyone should use a particular set of fonts, the research does not provide a conclusive answer and there are many variables to consider. While the basic font considerations have been addressed, font accessibility is also impacted by font size, color, and style. However, examining the above features in your font will guide any content developer towards making an accessible font choice. I strongly recommend reading more about fonts by checking out the British Dyslexia Association, WebAIM.org, and in the other references listed below.


Note: Personally, I feel it is important to find research to inform the design thinking process and decisions. As such, I have cited my sources and included a full reference list. It is not uncommon to find conflicting studies and as an educator and accessibility advocate it is important to acknowledge these sources as the body of knowledge is always growing and revealing new insights.

References

British Dyslexia Association New Technologies Committee. (2015) Typefaces for dyslexia. Retrieved 10 February 2018, from https://bdatech.org/what-technology/typefaces-for-dyslexia

Font Face. (2015). Accessibility at Penn State. Retrieved 5 April 2017, from http://accessibility.psu.edu/legibility/fontface

Marshall, A. (2013). Good Fonts for Dyslexia – An Experimental Study. Dyslexia the Gift Blog. Retrieved 5 April 2017, from https://blog.dyslexia.com/good-fonts-for-dyslexia-an-experimental-study

Patel, I., & West, S. K. (2007). Presbyopia: Prevalence, impact, and interventions. Community Eye Health, 20(63), 40–41. Retrieved 10 February 2018, from https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2040246

Rello, L., and Baeza-Yates, R. (2013). Good fonts for dyslexia. Assets. Retrieved 5 April 2017, from http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf

Siegel, L. S. (2006). Perspectives on dyslexia. Paediatrics & Child Health, 11(9), 581–587. Retrieved 10 February 2018, from https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2528651

Typefaces for Dyslexia. (2018). Dyslexic.com. Retrieved 5 April 2017, from https://www.dyslexic.com/fonts

Velarde, Orana. (2017). A Visual Guide to the Anatomy of Typography [Infographic]. Visual Learning Center by Visme. Retrieved 10 February 2018, from http://blog.visme.co/type-anatomy

WebAIM: Fonts. (2013). Webaim.org. Retrieved 10 February 2018, from https://webaim.org/techniques/fonts

What’s the best font for dyslexia? (2017). Touch-type Read and Spell (TTRS) Blog. Retrieved 10 February 2018, from http://www.readandspell.com/us/best-font-for-dyslexia

 

About the author Rita Fennelly-Atkinson

My previous work with students with disabilities has ignited a passion for ensuring that all learners have access to meaningful instructional experiences in any learning environment. My current educational pursuits and work as a technology design coach combines my passion for accessibility, instructional design, and design thinking. As an educator, I have a wide array of instructional experience for K-12 and adult learners in a multitude of settings. Currently, I am a Sam Houston State University student in the Instructional Systems Design and Technology doctoral program.

All posts by Rita Fennelly-Atkinson →

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: