How to Lower Bounce Rates by Improving Your Typography (In 3 Steps)

Typography is an often under-appreciated element on your site that may be costing you visitors. If your text is difficult to read or simply doesn’t fit the look of your site, it may be contributing to a poor user experience. If you haven’t evaluated your font styles lately, it might be time for a refresher.

Thankfully, reviewing and updating the typography on your website doesn’t have to be difficult. Once you know what to look for and how it should be fixed, all that’s left is to execute the change! Moreover, there are many tools available to help you find and upload new fonts.

In this post we’ll reveal how to improve the typography on your site in three steps. If you’re ready to improve the look of your site and lower bounce rates, let’s get started!

Key Takeaways

1. Poorly designed typography can negatively impact bounce rates and conversions.
2. Your typography should be intentional, not a byproduct of your theme defaults.
3. There are many quality, free fonts available for you to choose from.
4. Changing your site’s typography can be a fairly quick and simple process.

How Typography Affects Bounce Rates

Poor typography can have a direct, negative impact on your website.

Firstly, typography plays a huge role in the general user experience. Usability is a major factor when it comes to keeping visitors on your site. Studies show websites can reduce their bounce rate by 92% with a simple redesign! Moreover, as the competition gets stiffer, usability becomes even more important when choosing where to make purchases. This directly impacts your conversion rates.

In other words, being proactive about usability makes you more likely to hit revenue goals.

[Tweet “Being proactive about usability makes you more likely to hit revenue goals.”]

Secondly, typography contributes to the accessibility of your website. Your text should be scalable and shouldn’t cause any unnecessary strain for readers. This will benefit the visually-impaired, while improving general usability for all visitors.

How to Improve Your Typography (In 3 Steps)

The process of updating your typography is easier than you think! We’ll show you how to do it yourself in the following three steps.

Step #1: Evaluate Your Current Typography

We don’t expect you to sign up for night school to become a graphic designer. Professional typography is a complex art, with details like descenders, serifs, and other odd words most people don’t use in daily life. While you might be interested in learning more, you don’t necessarily need to worry about the finer details!

Right now, you only need to focus on the basics. Here are some important questions to ask about your website’s existing typography:

• Who chose the current fonts, and why? The font you use should be an intentional choice, not just the theme default.
• Are the current fonts representative of your brand and the tone you’re trying to set? Some fonts simply work better than others to set certain moods.
• How complete are the font families you’re using? Not all fonts include the same character sets. Test your font to discover whether it includes all the features you need. For example, you may need additional characters for certain languages if you translate your site.
• What are your current font sizes, and why? Tiny fonts can look elegant, but aren’t always easy to read. 16px is the minimum recommended body copy font size. This tool will help you see how your fonts look on mobile.
• Do your colors have enough contrast? Low color contrast makes for poor accessibility. You can test yours with the WebAIM tool.

Armed with these answers, it’s time to take what you’ve learned and choose some new fonts.

Step #2: Choose a New Typographic Design

By now, you should have a good grasp on how typography gives feeling to your content by setting a visual mood. It’s time to figure out which fonts you should choose to strike the right setting for your business. The fonts in the below example complement each other and are easy to read. Moreover, the limited use of font color cleverly incorporates a hue that matches the bright color in the image, making the word “ultimate” really pop:

While you can always shell out hundreds of dollars for fonts, there are many stellar choices available in the free font world. We recommend starting with these, and only worrying about premium options if absolutely necessary.

A few places you can start your search for free fonts are Smashing Magazine, Font Squirrel, Google Fonts, Open Font Library, and Adobe Typekit (free with choice Adobe memberships). Can’t find a font you love? You can also try creating one yourself.

Now that you’re armed to acquire the fonts you want, here are some best practices to help you make the right choice:

1. Try to use fonts already established in your branding. This might include fonts used in your logo, letterheads, and other graphics. If those fonts aren’t available for web licensing, choose fonts that look like they fit.
2. Don’t go overboard when pairing fonts. Keep it simple by choosing two or three different ones. In general, you want to create a visual hierarchy. For example, a bold serif font for headings and a light sans-serif font for body copy. Tools like FontPair.co can be helpful when you’re not sure.
3. Choose colors that fit your brand. However, also remember to check they meet color contrast standards as mentioned earlier.

Once you’ve chosen a your new fonts and colors, it’s time to make the changes live on your site.

Step #3: Update the Typography On Your Website

Now comes the moment you’ve been waiting for! It’s time to update the typography on your website and hopefully see an impact on your bounce rates and conversions.

If you don’t use WordPress, you can add your new font by following these instructions. Some font resources such as Fontspring also offer handy tutorials to help you. However, if you are a WordPress user, you might opt to use one of the various plugins available to help you such as Easy Google Fonts:

These typically make it easy to control your typography no matter which theme you use. Here are a few of your choices and what they can do:

1. Google Typography: This plugin lets you choose Google Fonts and control basic options like font size and color.
2. Easy Google Fonts: This is another Google Fonts based plugin that covers even more advanced options.
3. Typekit Fonts for WordPress: This one is similar to the two above, but is based on Adobe Typekit font selections instead.
4. WP Typography: This works no matter where your fonts come from, cleaning up your typography with subtle niceties.

Once you’ve installed and activated your plugin, you can use its documentation to guide you through the process of customizing your fonts.

Conclusion

Difficult-to-read or poorly-paired typography can cost you visitors and conversions. On the flip side, an excellent typographic design can create a better user experience and a more attractive site. Now that you know how to fix your website’s fonts, you can get started on making the necessary improvements!

In this article, we’ve revealed the three steps you need to take to improve your typography and lower bounce rates. Let’s recap them quickly:

1. Evaluate your current typography for things like inconsistent branding and low color contrast.
2. Choose a new typographic design based on best practices.
3. Update the typography on your website by adding code or using a dedicated plugin.

What questions do you have about the typography on your website? Let us know in the comments section below!

Image credits: n3xia