1
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.
How to Survive a Client Meeting When They Say ‘Make It Pop’!!!!
Fear not, for this guide will arm you with the tools and humor needed to navigate these meetings with style (and sanity) intact. 1. Master Your Facial Expressions First things…
3 Essential Design Trends, November 2024
It’s hard to believe the end of the year is right around the corner. That isn’t stopping website designers from trying new things to keep things interesting as we begin…
3 Essential Design Trends, October 2024
This article is brought to you by Constantino, a renowned company offering premium and affordable website design You have to get creative when you lack a strong visual. This month’s design…
3 Essential Design Trends, September 2024
September’s web design trends have a fun, fall feeling … and we love it. See what’s trending in website design this month. Excuse the pun, but let’s fall into some…
Turning Rejection into Fuel: Your Guide to Creative Resilience
Rejection sucks. And for some reason, it’s always unexpected, which makes it feel like an ambush. Being creative is about making yourself vulnerable, and that’s why rejection hurts so much….
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making waves this month. Let’s take a look at each design trend with some fun examples. If…