If you’ve been reading my posts so far, you know why it is important to design for everyone, and how color and contrast are the first considerations to have when creating a brand or a platform that is accessible to everyone. Today, I want to talk about a second set of parameters that will determine how accessible and successful your design is.
When creating your visual branding, your font choice is probably the very next decision you make after your color, which is why I want to address it next. Experts have said a lot about font choices and the debate can get pretty heated, but here are some basic concepts and starting points.
Font Choices
Typography expresses so much of who we are and how we communicate. I’m a typography geek and some fonts are, plainly put, works of art, but for branding, we need to remember our primary goal is communicating and to do that effectively we need to make it easier for people to understand.
Serifs, non-serifs & everything else
If you’ve dabbled somewhat into typography, you probably know the words Serif and Sans-Serif, and you might even know what they mean: Serifs are the little ornaments at the endings of letters and Serif fonts, like Times New Roman, use these little decorations to give more of a classic and book-like feel to text; Sans-serifs are fonts like Arial that don’t include any of these ornaments and give fonts a look that is often described as clean and modern.
For a while, the assumption was that in terms of legibility, especially in screens, Sans-serif fonts were the way to go. Now research shows that the distinction might not be so clean cut. Some studies show how serif fonts can be superior when reading very long texts (Arditi & Cho, 2005; Tinker, 1963), while others show that for people with certain visual and learning disabilities, such as dyslexia, Sans-serif fonts might be the way to go (Russell-Minda et al., 2007).
The truth is complex: you can have incredibly difficult to read fonts that are technically Sans-serifs; your font choices might make reading easier for a subset of your audience and simultaneously harder for another; fonts that are often hated, like Comic Sans, can follow the best practices for legibility and accessibility; fonts that follow all the guidelines like Comic Sans can make your audience feel infantilized and disrespected, particularly those with conditions that have led them to be patronized and treated like children. So with all this conflicting advice, what to do?
The devil we know
The most important elements to consider at a basic level, to make sure your font choices are accessible, are:
- Availability: Use fonts that are available in most user’s system such as Microsoft fonts, which are largely supported throughout various devices.
- Familiarity: Use fonts that people are familiar with. Users will read faster and understand more with a font they know and see regularly.
- Simplicity: Use fonts that are simple, without too many decorations (yes, I mean those trendy script fonts) and use fewer of them, at most two.
It’s how you use it
Selecting a font or fonts is only the first step of your journey towards accessibility and legibility. Fonts, when used in applications both print and web, have a series of traits and characteristics that can make a significant difference.
If you’ve ever, like me, struggled and squinted your way through the text of a website only to realize at the end you were making such an effort to read that you didn’t actually understand anything, you know why with type, size matters.
Size matters
There are a set of best practices for text on printed products, but it’s been a minute since I’ve designed for print and with the ever-changing technologies in the space I’d rather not venture sharing knowledge that might be outdated.
On the web, however, it mostly comes down to your browser and your code. Online, you can set your text size in px (pixels), em (a size relative to the size of its parent) or rem (a size relative to the browser default). The most common browser default is 16px, and rem units allow your text to change sizes depending on the browser default. This means that if your audience does what my mother does, which is turning her font size double its regular size, the body text will render at 32px and headers will scale accordingly. On an accessible website, no text should be lost or unreadable when people do this.
Desktop browsers tend to render fonts at 16px by default. There is a rationale for reasonably large defaults: anything else risks alienating a huge swath of users, many from older populations whose eyesight has deteriorated. “But my audience is young and hip!” I hear you say. Sure, but generous font sizes don’t offend young, keen-eyed folks.
Heydon Pickering, Inclusive Design Patterns
We need some space
Spacing is also very important for readability and accessibility. It is our responsibility to set these to a readable default, and allow for people to override them without loss of text.
The best practices for spacing:
- The space in between your lines of text, known as line height or leading in print, should be set to at least 1.5x the font size (1.5em).
- The space in between your letters, known as letter spacing or tracking, to at least 0.12x the font size (1.12 em).
- The space between your words should be set to at least 0.16x times the font size (0.16em).
- The Space following your paragraphs to at least 2x the font size (2em).
- Arditi, A. & Cho, J. Serifs and font legibility. Vision Research, 45 (23) (2005). 10.1016/j.visres.2005.06.013
- Pickering, H. (2016). Inclusive design patterns: coding accessibility into Web design. Smashing Magazine.
- Russell-Minda, E., Jutai, J. W., Strong, J. G., Campbell, K. A., Gold, D., Pretty, L., & Wilmot, L. (2007). The legibility of typefaces for readers with low vision: A research review. Journal of Visual Impairment & Blindness, 101(7), 402-415.
- Tinker M. A. (1963). Legibility of print. Ames, IA: Iowa State University Press.