Fonts don’t matter

If you’re an art director or font fanatic, you might want to sit down for this. Take a few deep breaths. Go to your happy place. Because I’m going to explain why fonts are overrated and what actually matters for readability.

Letters of alphabet written on old paper with handwriting. Photo.

The hard truth

What’s important when picking out a font?

It’s one of the most common questions I get when I consult in accessibility.

People expect me to start lecturing on the importance of fonts for people with dyslexia or other reading impairments.

How different typefaces and kerning really can make a difference for the readers.

How the choice of serifs or sans serifs in headings is as close to a life-or-death changing decision a web designer can get.

So I always get perplexed reactions when I reply:

Actually, font’s do not matter very much…

I know it’s a really bold thing to say. Telling web designers that fonts don’t matter is like stealing a kid’s favorite toy.

Sad child with tear in one eye. Close up photo.

But before you compose an angry tweet about it or respond with a “Fonts matter a lot” article on Medium, please hear me out.

Fonts are overrated

I’m asked to talk about fonts so often that I consulted members of the Dyslexia Association here in Sweden. They are experts on readability and get font questions so often that they even had a prepackaged answer referencing different studies made on the subject.

Here’s the gist of what they had to say:

The energy put on fonts is hugely overrated. There are other things that are of much greater importance for our members.
– Representative from the Swedish Dyslexic Association

The folks at Dyslexia Action agree with this:

Research shows that fonts matter relatively little.
dyslexiaaction.org

What really matters for readability

So first I want to go through what really matters to people with reading impairments. At the end of the article you’ll find some pointers on fonts as well. You’re only allowed to read that once you’ve understood the other things that matter more. So promise me you won’t skip to that right away.

Structure the text – headings, sub headings and paragraphs

Here are two of the answers from our article Accessibility According to Actual People with Disabilities:

So giving your text a reader friendly structure is important.

Here are a few things you can do to structure the text in a nice way:

  • Include plenty of headings and sub headings
  • Use bullet lists a lot (like I’m doing now)
  • Keep paragraphs short

Illustration of two texts. One "wall of text" and another with subheadings, short paragraphs and bullet lists.

Complement text

Letting users choose how to obtain the content is a key to accessibility.

Work on complementing text content with:

  • Infographics
  • Videos
  • Illustrations
  • Images
  • Audio

I tie a tie about once every five years. I’m happy for the combination of video, text and illustrations on tie-a-tie.net (see example below). Usually I look at the illustrations, but if I can’t figure them out I switch to the video. I have a friend who is completely blind. He prefers the text version.

Screenshot tie-a-tie.net. Video, illustrations and text guide for pratt knot.

The point is that we can choose, and that’s awesome!

Don’t use italics

I could cite a few studies done on the readability of italics, but instead I’ll just write this in italics to prove my point. It takes more effort to read for everyone. Especially words you don’t come across very often, like absquatulate. On top of that, imagine that you have a reading impairment where letters tend to blend together. Then italics will make things so much worse. So just don’t use italics.

Keep it clean

Let the user focus on the content without distractions.

Avoid:

  • Movement, animations and other “concentration thieves”. Common offenders are advertisement banners, image carousels, popups and fly-ins.
  • Too much clutter around the content, like multiple columns with related articles.
  • “Sticky” objects that follow along when you scroll, especially ones that cover part of the content.

Ladies, gentlemen and everyone in between, I present to you the pride of my home country Sweden, the world’s most cluttered site: Arngren.net.

Startpage of Arngren.net with like a billion different images and links.

Gaah! Do not follow their example.

Line length – keep them short!

A common problem for people with reading difficulty is that they jump to the wrong line of text at line breaks if the lines are too long. In other words, when you can’t find the way from the end of one line to the beginning of the next line.

One way to reduce this problem is by keeping paragraphs short.

Another important guideline is to keep line length short. 50–75 characters – including spacing – per line is a good line length guideline for big screens. Shorter of course on mobile screens.

Line height – make it large enough

Usually the problem with line height on websites is that it’s too tight. This contributes to the problem for the user finding the next line from the previous one. It can also make the page feel like a “wall of text”, a common comment when user testing with people with dyslexia.

A good guideline is to use a line height that’s 150 % of the font size (Smashing magazine). It’s what we use on this site.

Font size – make it large enough

Anyone who has used their phone to surf to a site that is not adapted to small screens knows that font size matters for readability.

As with line height, the problem is usually that it’s too small. It probably has to do with the fact that most people who design websites are young and have a better than average vision.

Show your interface to someone who is over 65 years old and see if they pinch or hold the device really close to their eyes when reading.

Usually we see font sizes between 15–18 pixels on the web. Here is one good reason to crank that up a few pixels:

A larger typeface has been proven to enhance readability for all types of users, regardless of one’s age or quality of eyesight.
Your body text is too small (marvelapp.com)

Here’s a rule of thumb I made up that should work for most designers:

Pick a font size that you think is nice. Then make it at least 2 pixels bigger.

What matters with fonts and accessibility

Yes, I lied in the title of the article. A little bit. Because even though fonts are overrated and get far too much energy and attention in projects, I’m not arguing that they don’t matter at all. Just that other things matter far more.

For example, if you’d use Comic Sans on your site many readers would probably react.

angry about closing the door, written in comic sans. Answer note below with text "Please don't use Comic Sans – we are a Forutune 500 company, not a lemonade stand"

If you’ve done your best with all the other factors that I’ve mentioned above, then it’s time to think about the font.

So here are some pointers when choosing a font for good readability.

Pick a common font

When studies compare reading speed and user preference of different fonts, common fonts usually win.

People tend to prefer reading letters they’re used to reading.
– Representative from the Swedish Dyslexic Association

…duh! Quite obvious when it’s put in that way, right?

When a font looks odd, it’s hard to focus on the actual content.

The best font choices are ones where the reader does not notice the font, but the message
WebdesignerDepot.com

Which font are common on the web? Here’s a great article on the most popular fonts on the web (theultralinx.com).

A note on “dyslexia friendly” fonts

There are a few fonts out there that market themselves as “dyslexia friendly” and they’ve gotten a lot of spread lately.

Below is Open Dyslectic, probably the most well known font designed for readers with dyslexia. As you can see, the foot of each letter is bold, which is meant to reduce risk of flipping the letters around when reading.

Font where each letter has a bold bottom part.

However, people with dyslexia tend to prefer common fonts to dyslexia-friendly fonts when comparing them.

Special fonts often result in the reader mentally thinking about the font, when reading actually is about getting beyond the font and reading the content.
– Representative from the Swedish Dyslexic Association

There is no evidence that dyslexia fonts help people with dyslexia to read faster and more accurately.
Understood.org

So don’t overestimate their dyslexia friendliness. Use common fonts instead.

Let people choose

Depending on what type of interface you’re building, it might be a good idea to make it possible for your users to switch to a font they prefer. Most e-book readers – like Amazon Kindle below – have a feature to pick font, line spacing, margins and more.

Interface of Kindle, chose font, line spacing, size, margins.

Web browsers also let users set global font and color schemes. Try it out in the settings of your browser and make sure it works on your site.

Font alternatives in settings of Chrome.

Safari’s Reader Mode also let’s the user pick fonts, colors and sizes that they prefer:

Reader mode in Safari, change fonts, data-lazy-sizes and colors. Screenshot.

Far from everyone who need the font styling features will find them, so you still need to format the default text in a way that works well for readers.

Even though it can be good to let users pick their fonts in some interfaces, it’s doesn’t work for all of them. For example, if you place a font changing feature in the header of a website, it’s usually not something that users will find or bother to use. They want to set it globally so it affects everything they read – like in the Reader Mode on Safari – not have to do it separately on each individual site.

Serif or sans-serif

Two short sentences, one in sans serif and one in serif.

The question of serif – squiggly decorative ends of strokes on letters – or sans-serif font is always a well debated issue. Some readers think it helps the flow of the text, others will say it causes letters to blend into each other.

So I will recommend you to fall back to the previous guidelines:

  • Use common fonts. On the web, most use sans-serif fonts so that’s what we recommend for body text.
  • Let the user choose. Make sure that changing the font in the browser settings works on your site.

Final words

I’ve sat countless of hours in web design meetings where fonts choice was debated back and forth. I just want to cry out “Please put this energy on making great content, user testing, information architecture or something else that matters more!”

Sadly, I’m way too polite to say that out loud. Instead I hide behind my keyboard and write this article about it.

So please help me out. Do talk about fonts in your projects. But keep it to a reasonable amount. Pick one, then move on to something more important.

Get notified when we write new stuff

About once a week we write an article about accessibility or usability, that’s just as awesome as this one (#HumbleBrag)!

Get notified by following us on Twitter @AxessLab or Facebook.

Or simply drop your email below!