Selecting a typeface that suits your brand, is versatile enough for your products, and is accessible can be a daunting task with the multitude of fonts available. In this article, I will walk you through some key factors to consider when selecting an accessible typeface that is also functional and visually appealing.
Font… typeface… what is the difference?
First up, let’s get semantics out of the way. Are they fonts, or are they typefaces, or are they both? Although these terms are often used interchangeably, they actually refer to different things.
A typeface refers to the overall design of a set of characters, including their style, weight, and variations such as bold, italic, and regular. A font, on the other hand, refers to a specific size, weight, and style of a typeface, such as Arial Bold 12pt or Times New Roman Italic 10pt.
It’s best to think of a typeface like a family, and a font is a member of that family with specific attributes.
Serif or sans-serif
There are various typeface styles to choose from when it comes to typography, but the two main overarching styles are serif and sans-serif. In addition, fonts can also fall into style categories such as display, handwriting, and monospace.
So what is serif and sans-serif anyway? Essentially, serif means “feet” and sans-serif means “without feet”. The feet refer to the small lines or flourishes that are added to the end of strokes in letters in typefaces such as Times New Roman. In contrast, sans-serif fonts like Arial and Helvetica lack these decorative flourishes, giving them a cleaner and more modern look. While serif fonts have traditionally been preferred for print due to their legibility, sans-serif fonts are often seen as more contemporary.
The question about which one is easier to read is still up for debate, and research suggests that the effectiveness of serif versus sans-serif fonts may depend on the individual reader.
Typeface availability
When it comes to selecting a typeface for your website, availability is a key consideration. You want to make sure that the typeface you choose is easily available to your website visitors, whether it’s pre-installed across all devices or easily available through a service like Google Fonts. It’s also a good idea to have a fallback option in case the typeface is unavailable, as this can help ensure that your website remains readable and visually appealing regardless of any technical issues.
Language support
It’s important to ensure that a typeface supports non-Latin characters. This means checking if it can display characters from other languages, such as Chinese, Arabic, or Cyrillic. It’s also important to consider whether the text will still be legible if people change the language of your website. Some fonts may not be designed to display certain character sets, which can make the text appear garbled or illegible. By choosing a typeface that supports a wide range of characters, you can ensure that your website is accessible to people from around the world.
Variations
Check that the typeface has multiple weights and styles, such as bold or italic variations.
Avoid letter mirroring
Avoid using mirrored letter shapes that look the same when flipped horizontally, such as lower case d (D) and b (B) or p (P) and q (Q). Although designers may use mirrored letter shapes for consistency and efficiency, it can create obstacles for some readers, especially those with dyslexia. Unique character shapes can improve the reading experience for those with dyslexia and make your content more inclusive.
Make sure letters are clearly identifiable
Make sure there are variations in style between the number 1 (one), uppercase letter I (i), and lowercase letter l (L).
Look at the dot on lowercase i (I) and j (J). A larger dot will differentiate lowercase i from an l (L) or uppercase I (i).
Look at the tail of uppercase Q (q). A stronger tail will prevent confusion between O (letter o or number zero) and Q (q).
Check aperture. Can the lowercase letters c (C), e (E), or a (A) be confused with o (letter o or number zero)?
Check spacing between letters
Proper spacing between letters is essential for legibility and readability. It is important to ensure that there is enough space between letterforms to avoid confusion, such as mistaking the combination of r (R) and n (N) for m (M). Tight spacing can also cause letters to merge together, making it difficult to read.
Make sure font weight isn’t too thin
Check thinness of line stroke and narrow-width fonts. Letters that are too thin can cause reading difficulties for people who are visually impaired, or are viewing the content on a low contrast background.
Check word shapes
It is important to consider the shape of the words when they are written in uppercase and lowercase characters. Some fonts may change the overall shape of a word, which can make them harder to read and recognise.
Make sure the font meets WCAG guidelines
The Web Content Accessibility Guidelines (WCAG) outline specific requirements to make text accessible. Two important criteria are:
1.4.12 Text Spacing (Level AA)
The line height (line spacing) should be at least 1.5 times the font size, and spacing following paragraphs should be at least 2 times the font size. Letter spacing (tracking) should be at least 0.12 times the font size, and word spacing should be at least 0.16 times the font size.1.4.4 Resize text (Level AA)
Text should be able to be resized up to 200 percent without loss of content or functionality, except for captions and images of text.
Some guidelines for your content writing
Once you have picked a typeface here are some tips for writing your content.
Use italics, all caps, and underlines sparingly, or avoid them altogether if possible. These styles can make the text harder to read, especially for people with reading difficulties. Instead, use a combination of upper and lowercase characters to maintain the original word shape.
A guide to selecting an accessible typeface was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
