How to choose an accessible typeface

Default avatar.
March 11, 2016
How to choose an accessible typeface.

Inclusive design is a hot topic and choosing an accessible font for your website is important for all brands, not just public bodies and charities. But how can you tell which typefaces are accessible and does this mean a compromise in terms of design? Here are my top tips: 1: Don’t fall into the trap of selecting a design that appears childlike, as there is no need. This may sound obvious but is a very common mistake. Personality is just as important so look for a typeface that balances great design with practicality. 2: It is really important to avoid styles where there is ambiguity between certain characters. The main ones to look out for are the 8” and the uppercase B”, the capital I”, lowercase l” and the 1”. Look for a serif on the lowercase i” as this also helps to differentiate it from the uppercase I” at smaller screen sizes. Choosing a typeface with a two-tiered lowercase a” helps to eliminate confusion with the o”. legibility_illusion_webfonts3: If you’re using small amounts of text at 16pt and above (eg. for headings or captions), then a sans serif with large open counters is considered the most suitable. 4: Look for a typeface with a large x‑height (this is important for webfont selection). Extended ascenders and descenders will help to make the letter shapes clearer. Ascenders should be slightly higher than the cap height. 5: Look for open counters and terminals as they aid clarity, if they’re too closed they start to fill in at smaller sizes. typeface_counters_webfonts6: Numbers need to be distinctive, in particular the 0” from the uppercase O”. The 6” and 9” should also have open terminals. 7: 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. xh_webfonts8: A wider through bar on the lowercase t” aids definition. 9: A capital Q” tail that follows through the main bowl enhances legibility. 10: Spacing between the letterforms should be evenly balanced and rhythmic to aid character recognition. rhythm_webfonts11: Test the typeface on a dark background to check how it performs. Spacing tends to look tighter, letter shapes appear to glow” making the font seem heavier than it is, so you may need a lighter weight. 12: Choose a typeface that has a wide range of weights; as rendering on different devices will give varying results and a selection of weights can help to achieve the correct feel. It’s important to remember that inclusive design shouldn’t mean a compromise in elegance or style. A well designed accessible typeface should be elegant and have personality, but at the same time have legibility at its core, in order to include as many end users as possible.

Stuart de Rozario

Stuart de Rozario is an award winning typeface designer and accessibility expert at Boutique type foundry Fontsmith. Their library of typefaces includes FS Me which was designed with Mencap and FS Millbank for wayfinding, both exceed accessibility standards.

Read Next

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…

15 Best New Fonts, January 2023

Your choice of typeface significantly impacts the tone of voice your designs adopt. Heritage, ambition, freshness, ener…

The Pros and Cons of Responsive Web Design in 2023

Responsive web design has been such a success for many web designers that it is generally seen as the default approach …