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
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.
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.
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.
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.
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.
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