Editor’s Note: This post was updated in May 2024 to reflect the newest changes in accessible typeface.
Globally, at least 2.2 billion people have a vision impairment.
In the United States, approximately 12 million people 40-years-old and over have a vision impairment, including 1 million who are blind.
It’s estimated that as many as 15-20% of the U.S. population has some symptoms of dyslexia, a neurological, often inherited, learning disorder.
And yet, every day we look at words that can be hard to read, confusing, and illegible:
Text that is squished, bold, bloated, and letters that are filled in.
Long, run-on sentences that stretch from edge to edge.
And for people who have sight disabilities, this can be very difficult to read.
Today, typography is better than ever, and we have more accessible typefaces at our fingertips.
As communicators, it is important for us to take care in choosing the right typeface. Not only to create meaningful structure and organize content, but to enhance readability, accessibility and impact as well.
Contrast, rhythm, and simplicity are key themes to keep in mind when choosing a typeface for your next project.
As a designer, I use both free and purchased typeface services daily. I take great care in choosing and working with typefaces, carefully crafting a solid hierarchical structure that is accessible and has meaning.
Metal to Pixels: Type Foundries Today
The first mass-produced textbook was the Gutenberg Bible. In the late 16th century, way before computers; metal and wood typeface filled drawers referred to as “Job Cases.”
Skilled typesetters would carefully set lines of metal type onto a “composing stick” before placing it on a press for printing.
Phototypesetting later replaced this laborious and time-consuming process in 1949.
Injet, Dye-sub, laser, Thermal and digital printing later followed.
Steeped in rich history, I appreciate the skilled typographers — past and present — who designed today’s type libraries that are currently available for free or for purchase.
Google Fonts, Font Squirrel, Open-foundry are free options available that I use most often to ensure we’re being fiscally responsible with our client’s resources.
Adobe.com, Linotype and Fonts.com are good resources for subscription and licensed typeface services. When our clients are looking for special typefaces for their brands, these come in handy but at a price. A special find: Accessible Font and Braille Institute are two organizations rethinking typography for people who live with sighted or learning disabilities and autism.
Typeface vs Fonts
Typefaces and fonts are not the same, and here’s why.
A typeface is a set of fonts designed with common characteristics and composed of glyphs. Generic names include Script Cursive and Decorative, Fantasy and Decorative, Monospace, Serif, and Sans-serif.
A font is a particular size, weight, and style of a typeface. Each font is a carefully crafted set of characters or glyphs holistically shared in overall design qualities.
Creating a typeface requires a unique skill set, craftsmanship, and time. Type designers spend many hours creating typefaces for us to use.
What makes a typeface readable?
Choosing a font that fits a brand, offers a variety of weights, and has optimum legibility can be a challenging task. With thousands of fonts available, how can you work to improve readability for more users?
By choosing a typeface with strong character recognition which helps with legibility and aids in readability.
Here are qualities to avoid when selecting a font:
- Characters that can be commonly confused like the capital letter “I” (eye), lowercase letter “i” (eye), lowercase letter “l” (el), and the number “1” (one).
- A closed aperture “C” (cee) can sometimes look like an “O” (oh).
- The number “8” (eight) and the uppercase “B” (bee) can look similar.
- The combination of “r” and “n” can be confused for an “m” (em).
- Sometimes a lowercase “p” (pee) can be confused with a lowercase “q” (que).
- A lowercase “a” with a full circular shape can easily be confused with the “o”.
Here are font qualities to look for:
- Numbers need to be distinctive, in particular, the number “0” (zero) from the uppercase letter “O” (oh). The “6” and “9” should also have open terminals (the end of any stroke that doesn’t have a serif).
- Look for a serif on the lowercase “i” or a larger Tittle (dot), as this also helps to differentiate it from the uppercase “I”, especially at smaller screen sizes.
- A wider through-bar (cross stroke) on the lowercase “t” aids definition.
- A tail that follows through the main bowl on a capital “Q” tail enhances legibility.
- Look for a two-tiered lowercase “a” to eliminate confusion with an “o.”
- There is an optimal ratio between the x-height and the stroke width. To achieve maximum legibility the character stem stroke should be 17–20% of the x-height.
- Spacing between the letterforms should be evenly balanced and rhythmic to aid character recognition.
What makes an accessible font
Accessible fonts are important to consider when designing your website. Choosing a font that is easy to read for anyone regardless of ability, is simply good business.
Choosing the right typeface will not only improve visitor satisfaction, but it’ll also help:
- Page view time
- Brand value
- Conversion rates
- Help reach a wider audience
- Improve legibility and readability.
As you can see, accessible fonts are important to consider when designing your website.
If you’re looking to select a new font for your business, here’s what you need to keep in mind.
Here’s a great place to start: the first step forward.
- Avoid childlike fonts. Personality is important to your brand so look for a typeface that balances form and function.
- Avoid ornate, swishy and typefaces that are too thin and character complexity.
- Use a limited number of typefaces, fonts and font variations.
- Sans serif typefaces that are open. Here are a few I like to keep in my toolset: Open Sans, Lato, Noto Sans, Inter
- Typefaces with a large x-height include: Inter, Noto Sans TC, PT Sans
- Typefaces with open counters and terminals include: Crimson Pro, Noto Serif TC, Merriweather
- Choose a typeface that has at least a regular or roman, oblique or italic, and a bold or heavy font to begin. Using three font weights, and a type scale ratio of 1.25 is a good place to begin. Recently, I found this tool to quickly look at the different scales.
Up your game: the extra mile
- Numbers should be distinctive. Compare the uppercase “O” with the number “0”. See the difference here: O, 0.
- Spacing between the letterforms should be evenly balanced.
- Test the typeface on a dark background. Letter spacing that looks to tight may appear to “glow” and make the font look heavier than it is. A lighter or thinner font may be needed.
Ready to go pro: takes a keen eye
- There is an optimal ratio between the x-height and the stroke width: character stem stroke should be 17–20% of the x-height.
- A wider through bar on the lowercase “t”
- It is important to choose a typeface that has distinct characteristics. Carefully compare the “8” and the uppercase “B”, capital “I” with the lowercase “l” and the “1”.
- If considering a serif typeface, compare the lowercase “i” and the uppercase “I” at smaller screen sizes.
- Choosing a typeface with a two-tiered lowercase “a” helps differentiate it from the lowercase “o”.
A call for accessible fonts
There are ongoing efforts in font design to aid readers.
On February 6, 2023, Secretary of State Antony Blinken mandated that domestic and overseas offices adopt the Calibri font for all high-level internal documents. This change marks a shift from Times New Roman, the department’s standard since 2004. The recommendation, made by the secretary’s Office of Diversity and Inclusion, aims to enhance accessibility.
“Calibri has no wings and feet and is the default font in Microsoft products,” the spokesperson said, referring to serifs. “The new font change will make the Department’s written products and communications more accessible.” – HuffPost
Calibri, designed in 2007 as a “digital-first” typeface, offers several advantages over Times New Roman, which was originally created in 1931 for print newspapers before being adapted for digital use. Notably, Calibri boasts a larger character set, making it suitable for more languages and diverse applications. This transition underscores the department’s commitment to inclusivity and clear communication.
In 1995 Vincent Connare designed Comic Sans for Microsoft. This friendly font was designed for a beta version of Microsoft Bob, a comic software package primarily for young users. For all the ribbing it receives, Comic Sans has qualities that actually aid in reading. Angela Riechers wrote about it in her 2016 article for AIGA Eye on Design, Comic Sans Might Just be the Best Font for People with Dyslexia.
In 2015 Christian Boer, a graphic designer who lives with dyslexia created a font for his graduation project. Dyslexie is a typeface developed to help people with dyslexia. You can hear more about the story from his 2015 TEDx talk.
In 2017, Dr. Bonnie Shaver-Troup partnered with Google to develop an innovative online variable-font solution aimed at enhancing readers’ control over their experience and improving retention and comprehension. Bonnie’s theory was that reading performance could be significantly improved by using a sans-serif font to reduce cognitive noise, expanding scaling to enhance character recognition, hyper-expanding character spacing, which increases lag time and reduces crowding and masking effects.
These insights culminated in the creation of seven specially-designed fonts that immediately boost reading performance. This pioneering work led to the formation of Lexend.Recently, Unity Web Agency chose Lexend for the NC Principal of the Year Network’s new website. Developed by a teacher, Lexend was an ideal fit for this organization, ensuring readability and accessibility for all users.
Here are a few more fonts designed with readers with dyslexia or visual impairments in mind:
Accessible fonts are not mandated by the government but are slowly being evaluated and used more every day. Currently, Section 508 of the Rehabilitation Act of 1973 does not specify requirements for choosing an accessible website typeface. However, the U.S. Web Design System recommends Source Sans Pro, Merriweather, Public Sans, and Roboto Mono because they emphasize legibility.
We chose Chivo for our website typeface because of its readability and brand aesthetics. While having friendly and honest-feeling attributes, Chivo’s optimal x-height ratio and bold font options met our high-standard readability requirements and made it a great fit for our brand.
Remember that accessible design should not mean a compromise in style. A well-designed typeface can be elegant, convey personality, and have legibility at its core.
It’s time to design with inclusion in mind.