Look At This Stuff! Isn't It Neat? Wouldn't You Think My Basic Accessibility Collection Is Complete?
Ariel has asked me for a set of flash cards. The Ship Wrecked Flashcards highlight fonts that are not accessible. The Smooth Sailing Flashcards showcase accessible fonts. Under each flashcard is the font that is used.
Ship Wrecked Flashcards
Smooth Sailing Flashcards
Even within the disability community, there is debate about what font is "best." There is no clear consensus. Because of this, when you are selecting a font to use, there are several things you need to keep in mind.
Your fonts should:
Be simple, familiar, and parsed
Avoid complex characters (such as script fonts)
Avoid ambiguous characters, such as:
A font where the letter o and zero are similar
A c that is nearly closed looks similar to a letter o
Use a limited number of fonts in a document
Ideally, no more than three (3) fonts should be used in one document. Each time you change fonts, your reader must adjust their reading pattern (even for typically abled individuals).
Ensure that there is sufficient color contrast between the text and the background
You should not use a font size smaller than 12 point
In addition to selecting an accessible font, there are some formatting basics that you should follow.
All Caps: When all caps are used, the screen reader will read out each individual letter versus reading the word. This makes the content inaccessible.
Abbreviations: When you use an abbreviation, it may not make sense for an individual using a screen reader. For example, September abbreviated as Sept. will be read Sept. by a screen reader.
Acronyms: You must provide both the full spelling of the acronym prior to the acronym. For example, if you were going to abbreviate the FBI, you would want to say Federal Bureau of Investigation (FBI)
Special Characters: Screen readers cannot read several special characters. You should never use a special character in place of a bullet. Use the built-in formatting.
Underlines: Underlines should only be used for URLs. For users with color blindness or low vision, they may have trouble distinguishing links from regular text without the underline. For individuals with processing disorders, the underline cuts the letters causing issues with comprehension.
Font Color: Color alone should never be used as the only indicator. If someone has color blindness or low vision, they will not be able to ascertain the information
While this list does not use every inaccessible font, we have tried to make sure it includes a wide selection of inaccessible fonts. Each scary book cover on both the Color Contrast and Accessible Fonts pages contains an example of an inaccessible font.
Amatic SC (Amatic SC)
Anton (Anton)
Bebas neue (Bebas Neue)
Caveat (Caveat)
Changa (Changa)
Cookie (Cookie)
Courgette (Courgette)
Dancing Script (Dancing Script)
Great Vibes (Great Vibes)
Impact (Impact)
Indie Flower (Indie Flower)
Kalam (Kalam)
Lobster (Lobster)
Orbitron (Orbitron)
Pacifico (Pacifico)
Parisienne (Parisienne)
Permanent Marker (Permanent Marker)
Press Start 2P (Press Start 2P)
Sacramento (Sacramento)
Satisfy (Satisfy)
Shadows Into Light (Shadows Into Light)
Lucida Sans
Georgia
Palatino Linotype
Book Antiqua
Bookman Old Style
Cambria
Garamond
Times New Roman
Verdana
Tahoma
Andika
Helvetica
Arial
Calibri
Century Gothic
Candara
Arial is one of the most popular sans serif fonts, but it is wildly inappropriate for an education setting. It is impossible to tell the difference between a lowercase L and an uppercase I in Arial. When you are assessing student work, which is often not polished, being able to tell the difference between a typo and a legitimate error is important. Additionally, our students are learning the concepts, and they need to be able to clearly discern the difference between characters.
Arial Example:
l or I
Which is the lowercase L and which is the uppercase I?
Accessible Typography (APA)
Font Face (Penn State)
Making Design Accessible: Fonts, Color Contrast, and Alt Text (UNC Greensboro)
The Controversy of Accessible Type (Medium)
Typefaces and Fonts (WebAIM)
Use of Color (WebAIM)
Why Text in All Caps is Hard for Users to Read (UX Movement)