In a landmark study several years ago, MIT researchers demonstrated that typography can significantly influence our emotional responses: an unsuitable font can provoke an unconscious frown, whereas an appropriate font can evoke happiness. Given this, it’s no surprise that typography has the power to shape the user experience (UX). Just a few weeks prior, I embarked on an investigation to ascertain the extent of typography’s impact on UX.
Through a series of A/B testing experiments, I successfully elevated my website’s engagement by 38%—a feat achieved by nothing more than a change in the site’s font styling. Before delving into the specifics of my experiment, I must first elucidate why typography holds such a surprising sway over how users interpret our content.
Typography exerts its influence on our emotions through two primary mechanisms.
### Cognitive Bias
Initially, we attribute specific connotations to particular fonts and styles, which is often shaped by our cognitive biases and the cultural milieu in which we are raised. For instance, sans-serif fonts are predominantly employed on official U.S. government forms, whereas in England, they are more commonly associated with tabloids. The context in which different fonts are used can dramatically alter our emotional response upon encountering them.
Consider the following two screenshots from our company’s blog, which feature a guide on building a WordPress site using two starkly different fonts. Notice how the same content can convey a vastly different message depending on the font chosen for presentation:
– **Version 1: The site’s normal fonts** [Image Link]
– **Version 2: Comic Sans font** [Image Link]
The second version is perceived as far less trustworthy and professional, not because of the letter curvature or spacing, but because we have learned to associate Comic Sans with childlike characteristics.
### Objective Readability
Moreover, certain fonts are intrinsically more readable than others. The more effort our eyes and brains must exert to decipher a piece of text, the more negatively we tend to report our experience. Serif fonts were traditionally used in print media due to their ability to facilitate faster eye movement from letter to letter. With the advent of early computer screens, which had low resolutions, serif fonts were rendered using vectors, which did not appear suitable for the available low pixel density. As such, early designers defaulted to using sans-serif fonts, which were created as bitmaps. Over the past few decades, screen resolutions have significantly improved, and we are now at a point where pixels are barely discernible at close range. Consequently, serif fonts like Georgia are gaining popularity.
When conducting typography experiments, I sought to determine the most suitable font for our website. I initiated a split test on one of our articles, testing three different fonts: Georgia, Arial, and Verdana. We measured the performance of each font based on the number of clicks on the article, combined with behavioral metrics such as bounce rate and time-on-page.
Here are text-block snippets of the fonts we tested to provide a visual reference to the variants we explored:
– **Georgia** [Image Link]
– **Arial** [Image Link]
– **Verdana** [Image Link]
I anticipated that Georgia would be the victor due to its objective readability, and that Verdana would underperform. While I correctly predicted that Georgia would win, I was mistaken about Verdana. In fact, the variation using Verdana yielded 29.1% more clicks than our original font (Arial).
Additionally, we observed that the Georgia variation had a significantly better average time-on-page, indicating that users were engaging with more of the article. This was also confirmed through heat map analysis.
### Experimenting with Font Size
After confirming that Georgia was the best-performing font for our site, I sought to determine the optimal font size for optimal readability and engagement. I anticipated that larger fonts would be more readable.
However, I was mistaken once again. I tested 14px, 15px, and 16px, and found that 14px generated the highest level of engagement. [Image Link]
This was surprising, as I had previously read studies suggesting that larger fonts could increase the reader’s attention to the text. Anecdotally, many highly readable websites use fonts over 20px in size. To ensure the accuracy of my results, I conducted an identical experiment with 10px, 14px, 18px, and 21px.
Once again, 14px emerged as the winner. This aligns with the wisdom of seasoned A/B testers: what works for one person may not work for another. For our blog’s design, the font we use, and perhaps even the content we post, 14px appears to be the ideal choice.
The impact of this work on our website’s UX was substantial. After implementing the 14px Georgia font across the entire site, we observed that our average bounce rate decreased from 88.0% to 80.9%—a 7.1% improvement. Our average pages viewed per session increased from 1.21 to 1.43, a 18.18% improvement, and our average time-on-site improved by approximately 10 seconds. [Image Link]
As with all split testing, it is crucial to conduct your own experiments. Utilize tools like VWO or Optimizely to identify the font that resonates most with your audience and generates the highest engagement for your site.
For further reading, consider the following resources:
– The Essential Guide to @font-face
– Improving Usability with Fitts’ Law
– 10 Usability Tips Based on Research Studies
