The Effects of Typography on User Experience and Conversions
“Typography is the detail and the presentation of a story. It represents the voice of an atmosphere, or historical setting of some kind. It can do a lot of things.” Cyrus Highsmith
We only have a handful of tools to communicating online, really. Words, images, colors and composition are the usual suspects – but they’re stealing most of the credit for what goes into making effective websites and landing pages.
Cyrus Highsmith, author of Inside Paragraphs says typefaces represent the voice of an atmosphere, or historical setting, and that’s very true, but I want to add to that.
Typography is body language.
It’s what makes the first impression. Good typography enhances the character of the site and adds a tone of voice that subliminally reinforces what the words say to influence how those words are perceived. And yes, there is research to back this up.
How Little Do Users Read?
Before we get into how typography influences behavior and perception, let’s look at why this is important in the first place.
Back in 2008, researcher Harald Weinreich & Jakob Nielson published a study that measured 45,237 page views from 25 different users, and found that – of the people being analyzed – most people would scroll about halfway down the page for longer content and only spent enough time on the page to read less than 20% of the text.
These findings were so consistent they calculated a formula which described the amount of text users would read for articles ranging in the 200 to 1250 word count.
As you see in the graph, as the word count increases, the percentage of people reading not only decreases, but becomes more erratic around the halfway mark.
“In the full data set, the average page view contained 593 words. So, on average, users will have time to read 28% of the words if they devote all of their time to reading. More realistically, users will read about 20% of the text on the average page.”
In October 2013, Josh Schwartz from Chartbeat studied how users interact with articles on Slate.com and the results were surprisingly similar.
People can’t stay focused past the 50% mark. According to the data, the more you write, the more people stop reading.
So wait, does that mean you should create shorter content? Nope.
In an analysis of all of the most linked content on Moz.com, Inbound engineer Casey Henry found that the content with the most links also seemed to have a higher word count.
There’s no way of knowing for sure, but it would appear that those last 20% of visitors may also be the ones who are more willing to give links to those longer pieces of content.
Now, of course, this isn’t going to be uniform across all verticals.
BUT if your site uses a blog to provide deeply actionable information (like Unbounce for SaaS) or culture commentary your customers can’t resist (like the GQ Style blog for eCommerce), long form content is absolutely worth considering.
I’ll also go out on a limb here and suggest this linking behavior may also be reflective of why – for high touch-point products with a lot to consider- longer pages tend to perform better. (I could be wrong though, you should always be testing)
Which brings me to my next point.
If you’re written content is going to be long-form, you better damn well be sure it’s readable and pleasing to the eyes.
The Effects Of Typography on Readability & Comprehension
Before we get into the most readable typeface debate, I want you to first understand, there are three things that are more important than what specific typeface you choose.
- Size of type
- Line Spacing
- Age of the reader
Various research shows:
1. ) Small font sizes and low-contrast are the #1 complaint for web users as it relates to reading online. (Nielson)
2. ) Due to the effects of aging, at 40, only half the light gets through to your retina as it did at age 20. When you’re 60, it’s only about 20%. (See: Presbyopia) also 3/4 of Americans use corrective lenses (Statistic brain)
3.) All readers – but especially low-vision readers – experienced better reading speeds and comprehension when line-spacing was set to 1.5 (Psychographics of Reading)
Now this is where it starts to get tricky.
In D Bonn Tennet’s excellent article, “16 Pixels For Body Copy, Anything Else Is A Costly Mistake” He walks us through some very compelling evidence as to why 16px should be the standard for body copy in web design.
His central argument is that when you take in account the distance from the screen, 16px font appears to be the same size as printed text, which is normally held much closer to your face.
D Bonn’s argument that larger font sizes being easier to read correspond with findings from studies from Payame Noor University & a joint eye-tracking study by IBM/Google which show that as the size of type increases, readers also exhibit slightly faster reading speeds – however, both studies also concluded that the results were not statistically significant.
Interestingly enough, even though reading speed or comprehension haven’t been deemed significant, another study has shown that larger font sizes do have the ability to elicit stronger emotional connections.
That’s not surprising considering that the #1 complaint in the Neilson usability study was small font sizes, and 42% of Americans are near-sighted - increasing the size of your body copy, especially if your customers are around 40 or online natives, just makes it all easier to see, and maybe, just maybe, could go a long way in making your visitor’s experience more enjoyable.
John Paul Mains shares the result of one client who saw improvements in conversions after changing the font size from 10px 13px to be more readable – I wonder what would happen if he pushed it even further?
Serifs vs Sans-Serifs (& Do We Have To Stick With Tradition? – No)
There has been no conclusive evidence for either style of font that supports which is better for the screen, which is perhaps why the design community is split.
For example, in the Google/IBM study, they found that serif font Georgia was read 7.9% faster than sans serif Helvetica, but that it was not a statistically significant margin. They also found that serif or not, the style of type had virtually no impact on comprehension.
However, in the Psychophysics of Reading studies, participants perceived themselves as having better performance using fonts with serif, even though they scored higher in reading speed & comprehension when reading san serif fonts. Interesting.
Could this self perception (in combination with higher screen resolutions making serifs more viable),be why 50 major websites seemed to have changed their perspective on serifs between early 2009 and late 2013?
In this study by Jan Constantine of Smashing Magazine, he closely analyzes the typographic patterns from 50 top websites ranging from The Boston Globe & Financial Times to A List Apart & UX Booth.
What he found was pretty incredible.
For instance, even though serif fonts have taken over the majority share for body copy, there is now a near even split between Serif & Sans Serif headlines.
Even more surprising, even though Georgia & Arial are still the widely used typefaces, an overwhelming majority of font pairings are outside the traditional choices.
Compare that to only a few years earlier in 2009, where it was mostly “traditional” typefaces that ran the web.
More font choices mean more personality, expressiveness & creativity, which brings me back to the original point of the article, your typeface is the body language. It’s what helps create that emotional connection which can be so critical to the sales process.
If anything, the middle ground for this argument has evolved to one that says you should focus on learning to better pair both serif & sans serif fonts together to achieve maximum readability & develop a strong sense of “character” for your words.
To that end, I highly recommend you read Douglass Bonneville’s “Best Practices of Combining Typefaces” & Simon Pascal Klein’s more technical, “Achieving Good Legibility & Readability On The Web.”
If you want to get kick-started, here’s a list of 20 different font pairings that are known to work well together for computer screens.
Also, as you’re pairing your fonts, make sure you’re really looking to find something that’s readable first, I’d recommend you check out font designer Jessica Hische’s I:1 test, which asks you to put the letter “I” next to the number “1″ to see if you can determine the difference.
Can Typography Impact Our Judgement?
In a study on The New York Times website, titled “Are you an optimist or a pessimist?” Errol Morris wanted to see how people would respond when asked about their feelings of security in a catastrophic event – over 45,000 participants responded.
Readers were asked if they agreed with the statement and to what degree.
The real agenda behind the quiz was to determine if test subjects would find the statement more believable depending on the the choice of typeface.
The fonts used were Georgia, Helvetica, Trebuchet, Comic Sans, Baskerville, & Computer Modern.
What were the results?
Baskerville – designed in 1754, to create the perfect balance of readability & high contrast – had a 1.5% increase in people agreeing with the “we live in an era of unprecedented safety” statement.
“It’s small, but it’s about a 1% to 2% difference — 1.5% to be exact, which may seem small but to me is rather large. You are collecting these data in an uncontrolled environment[...]to see any difference is impressive. Many online marketers would kill for a 2% advantage either in more clicks or more clicks leading to sales”
In another study by MIT psychologist, Kevin Larson wanted to see if something as seemingly trivial as type choice, layout & line spacing could have an impact on the reader’s emotional state.
So 20 volunteers – half men, half women – split into two groups and asked each group to evaluate a version of The New Yorker.
The researchers found that the viewers who read the poorly designed page were negatively impacted, expressed feeling bad, and would even physically frown.
While that may seem arbitrary, the muscles associated with frowning have been linked to the amygdalia - the area of your brain responsible for governing emotions, forming new memories, and associating them with emotional events.
In other words, forming memorable associations isn’t just a matter of telling an compelling story, or having a well optimized landing page, it also has to do with the character of the font you’re using.
Michael Cho of Ooomf also demonstrates a really good point when he shows you what a typeface IMPACT (one normally associated with newspaper headlines) does to the Bank of America website.
Changed to Impact:
The reality of the situation is, asking about “the best typeface” is going to be about as fruitful as asking “what color converts the best?”
It’s all subjective, depends on your target market, the story you’re telling & the emotions you’re trying to evoke. Looking at the the big 50 research from Smashing shows us “other” fonts are being used more and more, because they’re a better reflection of the brand’s characteristics and personality.
The question you have to ask is if the typeface you’re using accurately reflects you?
It’s a difficult question to answer, but could make all the difference in the world to your customers.
- Perception of Fonts: Perceived Personality Traits & Uses
- Type Connection
- Google Fonts
- Font Combinator
- Fonts In Use (a breakdown of font usage in the real world, and why it was used)
- We Love Typography
Have another great typography resource? Why not share it in the comments?
H/T to George Matthew for some of the research in this article.
Webinars On Demand
May 09, 2017With all of the technologies available to marketers today, have we lost that personal touch? Join VP of Content Marketing for ON24, Mark Bornste...
April 05, 2017In the ever-changing world of digital marketing, operational efficiency, quick turn-around times, testing and adapting to change are crucial to...
Video is expected to account for three-quarters of all mobile traffic by 2020. But, creating powerful, effective video requires a significa...
Marketers are constantly seeking to engage with their buyers and drive actions that help buyers move rapidly through their customer lifecycl...