Here’s a riddle for you: What’s black and white and read all over? Need a hint? It’s something that’s key. But, often not given much thought.
What is it?
Your website fonts!
But, how do you choose the right font? Here are some important factors to consider:
It seems obvious. But, it needs to be said: Not everyone has the same size screen as you!
. . . So everyone sees your site slightly differently.
And, we’re not just talking about users on mobile versus desktop screens. We’re also talking about people in different countries.
According to RapidTable, the most common screen resolution is a 14” Notebook / 15.6” Laptop / 18.5” monitor. However, even being most common, only about 19% of people use this size screen.
As this A/B test showed, common screen sizes can vary by country, too. In Japan, for example, most people use smaller, square monitors. So, screen real estate is at a premium compared to North America, where widescreen monitors are more common.
Perhaps not surprisingly, viewer engagement increases with screen size. As this graphic shows, the bigger the screen, the more time we tend to spend interactive with the content on it:
While you can’t primitively determine what size screen, or device, your audiences is going to use, you can ensure your content looks good across all devices.
You can also monitor your Google AnalAnalytics data to see what browsers and device types most of your traffic is coming from. Based on this information, you can test and format your site accordingly.
To monitor your Google Analytics, go to the “Audience” view, then select the “Technology” dropdown menu and click into the “Browser & OS” category.
Once in the “Browser & OS” view, you can click on the “Screen Resolution” link to see the majority of screen sizes/resolutions your users are arriving at your site on, during a specific period of time.
Gauging screen resolution and looking at bounce rate will help you determine the optimal size fonts to use and test. For example, you may see an obvious trend — like the 800*600 resolution has a disproportionately high bounce rate. At this resolution, fewer items fit on the screen, but they appear larger. Therefore, testing should be done to optimize the font and content display at this lower resolution.
You may also want to test the optimal font size, based on what you know about the demographic profile of your audience.
Digging into the analytics, you can once again look at who’s coming to your site, how old they are, where they’re coming from, and on what device they’re on.
Assessing this information will give you a lot of insight about the right fonts and font sizes to include on your site, for your audience.
For example, if your site caters to an older cohort, consider enlarging the font by a few pixels. Statistics on Internet user demographics show 90% of (American) adults aged 40+ use the Internet. But, after age 40, many adults develop a condition called Presbyopia in which the lens of the eye hardens. This ailment makes it hard for the eye to focus and read small text.
To increase readability, larger fonts may be better.
The same thinking applies to mobile sites.
Don’t take it for granted your users will zoom in to read your content. Make the text large enough to read at first glance. One study recommends using 24-point font (32 pixels) for all mobile devices.
Since mobile screen real estate is so precious, you’ll need to make design decisions — and test — what information needs to be front and center.
Test the optimal font size based on who your audience is and their readability needs. Older audiences will likely convert more with a larger font. Younger audiences likely aren’t as sensitive to font size, but may not bother always zooming in to take in your content.
In addition to font size, choosing the right font is also key. The decision to use a serif or sans serif font should not be made on a whim. Test first!
It’s no surprise, the fonts you chose convey messages about your products and their value.
Fonts inherently create visual context. For users to convert, the font used needs to match with the message you’re giving.
According to the popular persuasion psychologist, Nick Kolenda, fonts have “traits” – and those traits need to resemble the context they’re provided in. Otherwise, there’s a mis-match and people won’t be as apt to convert.
Fonts can also create or reduce confusion. Clearly, the legibility of the font affect readability. But, beyond that, one study found instructions put in Arial font made everything seem easier to follow. When the same instructions were in a script font, people found the instructions harder to carry out.
Another study, published in the New York Times, found serif fonts worked best to convey trust.
Image Source: Nick Kolenda
Determine the message you want to convey and test how those fonts are perceived by your viewers. Then, test the best fonts to use to visually portray the “traits” of your message.
In writing and visual design, “blind spots” are areas that you don’t immediately realize are hindering conversions — until pointed out to you. Once, revealed, it becomes obvious and you can easily change it. Using white space — or the hard return function to break up lines of text — is one such blind spot.
Once you’re aware of how important it is to visually design your written documents by using white space, you can easily remove the blind spot. Ideally, paragraphs should be no more than 6-8 lines long. And, each paragraph should start a new idea or topic.
Don’t make your text feel cramped.
Incorporate white space to give your words – and the reader – some breathing room.
Test how your font choice impacts line spacing and consciously break-up text to make the document appear more readable. Run the “Monday Morning” test. Ask yourself: if it was Monday morning and you returned to the office tired, after a long weekend, would you want to read this document?
If the answer is no, neither would your audience. Look at ways to break up the text with white space.
Tying everything together, test not only your font size, but also typeface, and spacing to optimize readability and engagement.
Doing so could have a fontastic impact on conversions.
What fonts do you find convert best? Share your thoughts and experience in the comments section below.