Get weekly
HubSpot updates
Why did you choose your font for your website? Any reason other than it looked good when the designer showed you it on the designs?
Text is less readable online
Research has shown that people find eBooks (and reading on-screen in general) less easy to comprehend than when they’re in print.
When we’re online we like our content in short and concise chunks. Steve Krug coined the phrase: ‘Web users tend to act like sharks. They have to keep moving or they’ll die’.
And it’s true — think about how you use Wikipedia. How easy is it to end up several articles in as you’ve been scanning and clicking?
It is not often that we actually read content online. For example, maybe you tend to print PDFs and proposals to read them.
With limited user attention on your page, the more clearly and quickly you get to the point, the more engagement you’ll get.
Do you even need text?
Think about two of the world's most popular sites. Twitter is the best argument you’ll find for the ‘less is more case’. And how quickly did image-based Facebook displace more text-based sites like Friends Reunited? An image with a headline often conveys more meaningful information than a page of copy.
If you really must use text
There isn’t a single golden rule. The right font configuration will depend a little bit on your audience. For example, if you’re after a hipster audience Comic Sans won’t be a good choice — whereas, on a website created for younger children, Comic Sans could be just right.
My best advice is to do some A/B testing. This will be the safest way to find the most effective font for your website.
The following is general guidance only — use this as a starting point and then refine to suit your audience.
Font type
A serif is a small line / embellishment at the tip and base of each letter. Serif fonts include Times New Roman, Georgia, Courier and Garamond. Sans-serif fonts, as the name implies, are fonts without serifs and include Verdana, Arial and Helvetica.
Google and IBM carried out an eye-tracking study which suggested serif fonts had a slightly higher comprehension level than sans-serif fonts. However, remember that comprehension and being attention grabbing are two different things.
It can be argued that serif fonts are best for easy readability whereas sans-serif fonts are best used when comprehensive legibility is critical.
A 2002 study by the Software Usability and Research Laboratory concluded that the most readable fonts on screens are Arial, Courier, and Verdana. At 12pt size, Arial (a sans-serif font) was preferred whereas Times New Roman (a serif font) was the least preferred. At various font sizes the most readable font overall was concluded to be Verdana; Times New Roman was the least preferred.
It goes back to your audience’s expectations — are you providing in-depth and substantial content (thought leadership articles) or are you providing key product information (features summary and price). Based on your content you should set your font accordingly. You can always use more than one font on your page too. Headline and summary content could be sans-serif, switching to serif for long articles and ebooks.
To find out more about the psychology of fonts, Crazy Egg have an article that nicely summarises this topic.
Font size
Typically, it’s a case of go bigger. This has been a design trend for a little while and there is a valid user experience reason for this. For example, Click Laboratory increased their font size from 10pt Arial to 13pt and also added a little more spacing between each line. As well as reducing bounce rate, this led to a 133% improvement in their form conversion rate.
My recommendation would be to start with at least 12pt for main copy - if you have an older audience potentially increase this to at least 14pt.
Font colour
Estimates are that 1 in 12 men and 1 in 200 women are colour blind. I’m one of them, and there have been several occasions when I have been unable to read text due to a lack of contrast between the text colour and the background. Ensuring decent contrast is easy enough to resolve if you follow the W3C Accessibility guidelines regarding colour usage. There are free online contrast checkers that are quick and easy to use — the standard black text on a white background will never fail!
Additional pro-tips
Chunk your content. Avoid ‘too long, didn’t read’.
- 'Murder your darlings'.
- Use bulleted lists rather than paragraph after paragraph.
- Headlines should be clear and standout.
- Highlight key words or phrases in bold.
- Use plain english, avoid jargon and avoid unfamiliar abbreviations.
- Employ an experienced digital copywriter (if budget allows).
- Do keyword research. This will help your SEO and will substantially improve your user’s experience if your page content matches their search request.