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”. 3: 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.
6: 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.
8: 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.
11: 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 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.
We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…
We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…
Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …
By WDD Staff
There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…
Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…
By WDD Staff
The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…
By Ben Moss
Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…
By Simon Sterne
The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…
Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this.
When your…
By Ben Moss
No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…
Your choice of typeface significantly impacts the tone of voice your designs adopt. Heritage, ambition, freshness, ener…
By Ben Moss
Responsive web design has been such a success for many web designers that it is generally seen as the default approach …
By Simon Sterne