There are a lot of things that go into having a good conversion rate – design, copy, and call to actions, among others.
But did you know that your choice of font could affect your conversions as much as anything else?
Typography – font choices, size, and layout – plays an important role in more than just the design of your website. When visitors land on your website, they not only scan what information is available, but how it’s presented.
They look at the size of the letters, the length of the lines, and the overall visual layout to judge the likelihood they will find what they need. If your site is unorganized, or your fonts are too small, or you jam too much information in too small of a space, you could lose visitors.
So how do you prevent that from happening? You have to focus on readability.
The Basics of Readability
According to Tommy Walker of ConversionsXL, typography is more than just how a word appears on screen – it’s “body language”:
“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.”
Good typography means that users will actually read your sales copy, and there are several key elements that make typography “good”, including:
- Typeface – A family of fonts often used together (e.g., Garamond, Times, and Arial)
- Font – A specific style of typeface with a set width, size, and weight (e.g., Georgia, 12 pt., bold)
- Line Length – The distance between lines of type (i.e., single spaced, double spaced, etc.)
- Kerning – The space between characters
- Tracking – The space between letters and words
The way each element interacts with your web page is important for readability. Your font choices and spacing should make a user focus on the information they’re reading, not on the effort it takes to read it.
If you’re using the wrong format for your typeface, or you’ve chosen too decorative a font, or your lines are spaced too close together, it could make reading your content difficult, which can turn people away.
Here are a few things you should know about choosing the right typeface, font, and spacing.
Choosing the Right Typography for Better Readability
One important thing to remember is that good typography for the web is different than good typography in general. If you see a cool font on a poster or billboard, it may not translate to conversions if you use it on your site. Here’s why…
Serif vs. Sans Serif
While serif typefaces (like Times) have been the go-to font for books and magazines, many web designers would argue that sans serif typefaces (like Arial) are better in terms of readability for the web.
Generally speaking, sans serif fonts and typefaces are great for:
- Low-resolution displays
- New readers, such as children
- Text with lots of color or in low-contrast patterns
- Text that is exceptionally small or narrow
Therefore, if your landing pages require lots of copy in a relatively small amount of space, or your site will be viewed on smaller screens (like mobile devices), sans serif is probably the better choice.
Of course, there is some debate in the design world about whether the use of serif fonts is making a comeback due to HD screen technology.
According to Jakob Nielsen of the Nielsen Norman Group – which focuses on user experience, research and training – better screen resolutions are changing the conversation about which typefaces are “acceptable” for readability. Which leads us to the next point…
Font Size/Screen Size
In the early days of mobile use, if the font size on a website was too small, users would simply browse away or switch to viewing the site on a computer. However, most modern browsers now let their users adjust the text size accordingly by either zooming in or by adjusting the size manually in their settings.
So does that mean you can choose whatever font sizes you want for your site? Not necessarily.
In his article, “16 Pixels For Body Copy, Anything Else Is A Costly Mistake,” D Bnonn Tennant notes that there is compelling evidence as to why 16 point fonts should be the standard for body copy in web design. While you may feel that 16 points is too large for your website, many web designers agree that copy should be set for at least 13 points, especially if your site has a lot of content.
If in doubt, use a large sans serif font, especially if your users are on mobile. But don’t be afraid to mix and match with serif fonts if you’re going for a HD or high-contrast design, and play around with font sizes to ensure better engagement.
Ornate fonts (with swirls, curls, or images) can be great as an add-on design element to make any project more visually appealing.
Walker argues that more font choices can mean more personality, expressiveness and creativity, which can express more “body language” and can create an emotional connection which can be so critical to the sales process.
The key to using ornate fonts, however, is to use them sparingly or as a highlight to draw the eye. When it comes to the readability of the main body of copy, stick to traditional typefaces and fonts that are easier to read.
Tools for Better Typography
If you’re interested in playing around with different font types, or to A/B test your current typeface for readability, there are several plugins and tools available (especially for WordPress users) to help with that.
Hongkiat has a list of 20+ typography plugins you can use for your WordPress site to test out different typography. A few of the most helpful ones include:
- Drop Caps – Add a customized drop cap to each of your posts and pages (or even comments and other excerpts), similar to what’s commonly done in print publications
- WP Typography – Add hyphenation, spacing control, forced internal wrapping of long URLs, intelligent character placement, smart handling of quotes and other characters, and CSS hooks for styling ampersands, acronyms, and other special characters
- Post Typographer – Change spaced dashes to em-dashes, transform hyphens without spaces to n-dashes, turn spaces after particular words into non-breaking spaces, and more
- WP Super Edit – For admins, this plugin adds more options to the standard WP visual editor. You get two full rows of additional features to your visual editor toolbar, including options for applying specific styles and for adding and formatting tables
If you’re not sure how well your website’s typography is converting, try using a research tool like one of the following:
- The Readability Test Tool – Put in a URL and test the readability of the text
- Readability Score – Enter text and get a score based on overall readability
- Readability – Turns any website into a clean reading view
While typography and readability are often-overlooked aspects of conversion, they still represent an important part of getting users to stay on your site.
Remember when choosing fonts and typefaces that sans serif fonts are often better for sites that require a lot of information to be read rapidly, though it’s possible to mix and match serif fonts if your site is HD.
You can also use more ornate fonts in your design to highlight different elements, like a CTA or promotion, but remember to make it legible and to keep its use to a minimum (e.g. don’t use it for every header or subheader).
If you need help choosing the right fonts, be sure to check out some plugins that will get your WordPress site outfitted with the latest and greatest fonts, and be sure to double check your readability using other online tools.