Making Digital Text Universally Readable

Welcome to the fonts challenge! In this challenge, we'll explore key techniques to make fonts accessible and easy to read. We'll cover font selection, size, contrast, and more. By the end, you'll have practical tips to create accessible content. You'll probably be surprised at how many of these standards you already know about and use!

Directions

  1. Read the Top Ten Tips for creating accessible content [below].  
  2. Next, go to the Font-tastic Forum and complete the short exercise. Don't worry, it's not graded! Participating in the forum enters you into the drawing for one of those cool, magnificent prizes we're giving away.


It's all about fonts. Here we go! [Drum roll please!]

Proper use of fonts ensures that your content is maximally understandable and accessible for individuals with blindness, visual impairments, neurodiversity, or other reading challenges. It allows users equal access to the content. 

Top Ten Tips for Working with Fonts

  1. First, let's start with understanding the difference between legibility and readability: Legibility is how well the viewer can tell the difference between characters and symbols. We don't even think about it unless we're having trouble reading. (Think tall skinny font where the letters are very close together!)  Readability is how easily the content can be read and understood as a whole. Fonts play a major role in both instances. Now, let's look at what we can do with fonts to make reading our content as seamless as possible.

  2. Use sans serif fonts for content: Sans serif fonts are recommended for improved readability of content on digital screens. Serif fonts have a taper coming off the end of the character. "Sans" means without so sans serif fonts do not have a taper. An example of a serif font is Times New Roman. An example of a sans-serif font is Arial. 
    Serif fonts have a stroke coming off the end of the letter. Sans serif fonts do not.

  3. Use a large enough font size (12pts for content) for easy readability: Using a font size of at least 12 points ensures that the content is easily readable for most people. Use sans serif fonts. Keep in mind one font at 12pts can be very different than another font at 12 points. 

    Example:
    This example shows the same sentence using various font choices at 12 points. The sans-serif is the easiest to read.
    Moodle paragraphs are preset to the appropriate font size and to a sans serif font. No additional adjustments are necessary.

  4. High contrast: High contrast between the text and background colors improves readability. Use dark font colors on light backgrounds An example is to use black or gray text on a white background. We'll use the WebAim contrast checker in our activity for this challenge.

  5. Avoid extremely bright colors as background colors: Extremely bright background colors can strain the eyes and make it difficult to read the content. Just because you can, doesn't mean you should! 
    This text example is white text on a pink background.

  6. Use one to two fonts throughout the site or document: Limiting the number of fonts used maintains consistency and improves readability. If you'd like a little variety, use a sans-serif font for content (12 points or higher) and use a serif font for large headings (16 points or higher). In this case, the serif font is large enough to easily read. It is also just a heading and not a block of text. 

  7. Avoid overuse of all CAPS, bold, or italics: Overuse of these formatting options can make the text harder to read and may confuse people. Some screen readers read anything in CAPS as an acronym. 

  8. Avoid underlining words: Underlined words are often associated with hyperlinks, so using underlined text for non-link content may confuse users. 

  9. Links should have clear indicators to stand out from the surrounding text: This can be achieved by using a different color, underlining the text, or applying a unique style such as bold or italics. Consistency is key. And yes, it has been brought to our attention that the blue Moodle link can be confusing for some people. It is close in value to the text color and is not underlined. Pet peeve #361. However, considering the sheer number of links we have in our Moodle courses, it could make content even harder to read if all links were underlined or in a contrasting color such as red or orange. 

  10. Instructions are clear and do not rely on visual location, shapes, color, or auditory clues: Instructions should be written in a way that does not assume users can see or interpret visual or auditory cues. An example of this would be "All changes in the timeline will be in red". This could be a problem if you are colorblind. 

Are you surprised at how many of these standards you are already using in your documents? There's another challenge coming up that will pull this all together for you. Join in on Challenge 4: Text that Shines: Accessibility Best Practices for Online Content.

To complete the challenge

Participate in the Font-tastic Forum. It will only take a few minutes. We promise. Plus, remember the prizes?!



Last modified: Monday, May 8, 2023, 8:27 AM