How important is a website font? It helps the website to raise 38% traffic!

Years ago, MIT researchers have confirmed that fonts affect our feelings: bad fonts make people unconscious, and good fonts make us happy. If the font can affect our mood, it will also affect the user experience.

A few weeks ago, I decided to explore how much the font would affect the user experience. Through a series of comparative tests, my website traffic increased by 38%, just in case of changing the font.

Before I start detailing my tests, let's explain why fonts have such a big impact on user reading.

Fonts affect the mood of the reader

Fonts affect our moods in two ways.

Cognitive bias

First of all, we will naturally give some of the font and font form a certain connotation. It's like our perception of things around us is often influenced by cognitive biases and growing cultures. In the United States, for example, sans serif fonts are often used in government texts, while in the UK, sans-serif fonts are often used in tabloids.

The information that the user feels is often changed by the change in the font of the article.

Here are two screenshots of my company blog, the same story about how to use WordPress to build a station article, but the use of two large differences in the font.

It can be noted that the same content conveys different information because of the different fonts used.

Normal font:

Funny font:

The second comic Sans font looks far from the first credible, professional. This is not caused by the lines, spacing, or other characteristics of the letters, but Comic Sans fonts make people think of children.

Readability

In fact, some fonts are more readable than others. If we read a text, our eyes and brain load heavier, then we feel worse about the font.

Serif fonts were first used in printing because lining lines favor faster eye-distinguishing letters.

When the computer first came out, the resolution was low, and the serif fonts had to be created with vectors, and the vectors were not well displayed on the early low-resolution screens. This allows early designers to default to using bitmaps to create sans serif fonts.

Over the past few decades, the screen resolution has been evolving. Now it's hard to see the pixels on the screen at close range, and serif fonts like Georgia are becoming more and more popular.

Font test

Before the test starts, I'd like to know: which font is best for my site?

I conducted a comparative test of 3 fonts in my article: Georgia, Arial, Verdana.

We evaluate the performance of each font by the number of clicks of the article combined with the rate of page skipping and page stay time.

Here's a snippet of the test font, and you can predict the test results for these 3 fonts.

Georgia

Arial

Verdana

I predict that the Georgia font is best for my site because he is very readable. Verdana is the least suited to my site.

As I predicted, Georgia really works for my site, but the Verdana font is not the worst one. When you use the Verdana font, the article clicks more than 29.1% when you use the Arial font.

At the same time, when using Georgia fonts, the average page stays longer, indicating that the user reads more content. This has been confirmed by a hotspot map.

Font size test

After confirming that Georgia is the most suitable page for us, we also want to know that the number of fonts is best for users to read.

I think the bigger the font size, the more readable it is. (OK, I'm wrong again)

First I tested the 14px, 15px, 16px of this set of font sizes.

Using the same method test on the Web site, the results show that 14px fonts are best for reading.

PS: The font size increases by one pixel, and the line spacing is heightened by one pixel.

The results surprised me, and the research I read earlier told me that when users read an article, a larger font can attract the user's attention. And many of the most readable sites use more than 20px of font size.

To confirm my test results two times, I tested another set of font sizes: 10px, 14px, 18px, 21px.

As a result, 14px fonts are the most suitable for reading.

This experiment taught me that no matter what kind of test the group tests, the results will tell you that what works for someone else may not work for others. 14px fonts may be a good choice for the fonts used in our blogs, or for published articles.

The charm of font optimization

How much has the user experience of our site improved, based on the test optimized fonts?

Since our entire site has used 14px Georgia fonts, our site's average rate of hop loss (bounce Rate) has dropped from 88% to 80.9%, 7.1% of the optimization.

The average number of accesses per page rose from 1.21 to 1.43, and 18.18% was optimized; the average stay time for the page increased by 10 minutes.

All of this is from the group test (also called A/b test), not my personal point of view. Using grouped test tools such as VWO or optimizely, you can detect which fonts are best for your readers and which one is more appropriate.