How Fonts Affect the User Experience

Jul 21 2014 by Marcus Taylor | 13 Comments

Several years ago, researchers at MIT confirmed through a study that fonts can impact how we feel: A bad font can make us frown unconsciously, while a good font can make us feel happy.

If fonts can influence our emotions, then they can certainly impact the user experience.

A few weeks ago, I decided to find out how much of an impact fonts have on UX.

Through a series of split test experiments, I managed to improve my site’s engagement by 38%. I did this by changing nothing but the font styling of the site.

Before I go into the details of my experiment, I want to first explain why fonts can have a surprisingly large power over how our users interpret our content.

How fonts impact our emotions

Fonts affect our emotions in two ways.

Cognitive bias

Firstly, we associate certain connotations to specific fonts and font styles. This, like many other things in our world, is often influenced by our cognitive biases and the culture we grow up in. For instance, sans serif fonts are commonly used on official U.S. government forms. But, in England, sans serif fonts are more commonly used by tabloids.

The context in which different fonts are used changes how we feel when we see them.

Take a look at the two screenshots below from my company’s blog, featuring a guide on building a WordPress site, set using two very different fonts.

Notice how the same content can convey a vastly different message depending on the font you use to present it.

Version 1: The site’s normal fonts

Version 2: Comic Sans font

The second version comes across as far less trustworthy and professional. This is not due to the curvature and spacing of the letters or any other typographic characteristic of the font. It’s due to the fact we’ve learned to associate comic sans with childishness.

Objective readability

On top of all that, some fonts are inherently easier to read than others. And the harder our eyes and brains have to work to interpret a piece of text, the worse we report feeling afterwards.

Serif fonts were originally used by the print press, as serifs are proven to help the eye move from letter to letter faster.

When computers were first used, computer screens had low resolutions. Serif fonts had to be created using vectors, which just didn’t look right with the low pixel-density available back in the days. So, early designers defaulted to using sans serif fonts, which were created as bitmaps.

Screen resolutions have come along way over the past few decades. We’re at a point where pixels are barely recognizable up close. As such, serif fonts liked Georgia are becoming more and more popular.

Experimenting with fonts

When experimenting with fonts, the first question I wanted to answer was, of course, which font is best for our website?

I ran an initial split test on one of our articles where I tested three different fonts: Georgia, Arial, and Verdana.

We measured the performance of each font by the number of clicks on the article, in combination with behavioral metrics like bounce rate and time-on-page.

Here are text-block snippets of the fonts we tested so that you may get a visual idea about the variants we tested.

Georgia

Georgia font being tested for UX.

Arial

Arial font being tested for UX.

Verdana

Verdana font being tested for UX.

I anticipated that Georgia would win (because of objective readability) and Verdana would lose.

While I was right in guessing that Georgia would be the winner, I was wrong about Verdana. In fact, the variation using Verdana generated 29.1% more clicks than our original font (Arial).

We also noticed that the variation using Georgia had a much better average time-on-page, indicating that our users were reading more of the article. This was also confirmed using heat maps.

Experimenting on font size

After confirming that Georgia was the best performing font for our site, I wanted to know what size the font should be to provide the best readability and engagement possible.

Reasonably, I expected the larger the font, the more readable it would be.

Wrong again.

First I tested 14px vs. 15px vs. 16px.

Using the same methods outlined above, it turned out that 14px generated the highest level of engagement.

Note: I also increased the line height by one pixel for every pixel increase in font size.

This was surprising, as I’d previously read studies such as this one on how larger fonts can increase the amount of attention a reader gives to the text she’s reading. ¬†And, anecdotally, many websites that are considered highly readable are using fonts over 20px in size.

To double-check the accuracy of my results, I ran an identical experiment testing 10px, 14px, 18px and 21px.

Again, 14px won.

To me, this only suggests what every experienced A/B tester will tell you: What works for one person may not work for someone else. For our blog’s design, and the font we’re using, and perhaps even for the content we post, 14px seems to be the sweet spot.

How changing our font affected user experience

So, what impact did all of this work have on our website’s user experience?

After rolling out the 14px Georgia font across the whole website, we noticed that our website’s average bounce rate decreased from 88.0% to 80.9% — a 7.1% improvement.

Our average pages viewed per session also increased from 1.21 to 1.43, an 18.18% improvement, and our average time-on-site improved by about 10 seconds.

As with all things related to split testing, don’t take my word for it. Use a split testing tool like VWO or Optimizely to work out which font resonates best with your readers, and which one generates the most engagement for you.

Related Content

About the Author

Marcus Taylor is the founder and CEO of Venture Harbour, a digital marketing studio that develops and grows a portfolio of online businesses.

13 Comments

Marcin

July 21st, 2014

Yes yes yes. For a long time I watch the NYT and was wondering why use the font Georgia and I’ve seen a few sites that use this font, and then I saw a few pages changes its on Georgia. Very accurate test! Good observation! Thanks for sharing Marcus

Shajed Evan

July 21st, 2014

Marcus truly a brilliant article! Thanks for sharing this. Didn’t ever think that deep about emotional behaviour of the visitors can be driven that much only by choosing the right font!

joy

July 23rd, 2014

Well, Fonts are the most crucial aspect of any web design project. Because it encourage the users to stay on visting the website, You have already mentioned very nice and valuable points here. Thanks!

Eric Miller

July 23rd, 2014

Arial appears smaller than Verdana at the same font size. You can see this in the example screenshots. This is because Verdana has a larger x-height than Arial at the same size. Comparing them directly conflates two factors unless you shrink Verdana’s size or raise Arial’s so the x-heights match.

I think the 29.1% difference you saw between the two is mostly attributable to the “tinyness” of Arial at that point size, but it would be useful to see this tested.

Bennie

July 24th, 2014

Thank you for the study. It is really “horses for courses” and we found that gender also played a big roll on which font you use. Open Sans have become our safe font. We can ask so many questions and I would like to know if you also get font-blindness (similar to banner-blindness).

Mark F. Simchock

July 25th, 2014

re: “After rolling out the 14px Georgia font across the whole website…”

That’s an interesting stat. That said, bounce rate is just one metric. And perhaps not the best one to focus on? And was the bump just temporary? What are the long term effect on quality (as opposed to quantity).

In other words, more doesn’t matter much if it’s the wrong more. Maybe we should still be counting “hits” too, eh?

p.s. Should we all be considering making the font size *easily* adjustable by the visitor / reader? I mean, if we were REALLY concerned about UX it seems like the least (and best?) thing we can do to make them more comfortable, yes?

Jinja

July 27th, 2014

Arial is by far the best font for good user experience.

Mark F. Simchock

July 28th, 2014

fyi – This might help as well:

http://searchenginewatch.com/article/2322974/How-to-Implement-Adjusted-Bounce-Rate-ABR-via-Google-Tag-Manager-Tutorial

Be sure to scroll down to: “The Problem With Standard Bounce Rate and the Importance of Adjusted Bounce Rate”

AngelLeliel

July 28th, 2014

I don’t think time-on-site are “improved” by 14px font.
Maybe users just spend more time to read smaller text.

mariano

August 4th, 2014

I find it interesting information about the emotions that can affect our mood I usually use the arial much, the truth is that designers must think that which is the ideal source for our projects

Bharat

August 6th, 2014

Brilliant article! I have experienced the similar change on my site.

Chris K

August 7th, 2014

Fascinating! Did you segment result by device type to see if the same font and size won for desktop devices vs mobile phones or tablets?

Elise

August 8th, 2014

I appreciate the article, but one question — are these results statistically significant? The AB test results you show cause me to doubt whether there’s enough data to make the claim that user behavior is truly affected. Chance to beat control doesn’t even approach 95% for most of these.

Am I missing something?

Leave a Comment

Subscribe to the comments on this article.