Website Design

Best Font Size for Your Website and How it Effects UX & Conversions

Christine Austin

Creative Lead, Speaker & CRO expert for IMPACT's Marketing Team

About |

  • Connect:
Best Font Size for Your Website and How it Effects UX & Conversions Blog Feature

Published on June 8th, 2017

Print this Page/Save it as a PDF

When you walk into the tea shop, Teavana, and are looking for loose leaf tea to purchase, you’ll find yourself walking up to a wall with tins stacked across it. Typically, you’ll read the names & descriptions on each container before deciding which one you’ll want.  

Teavana(Image from Cornichon)

When you look at these products, you'll see that the sizes of each of the tea names, descriptions, are very specific so that you can see them from a distance. 

Imagine the text on each of these tins was a third of the size.

Chances are you’ll find yourself walking a lot closer trying to read each one or, if your eyes aren't as sharp, squinting & asking for someone else to read the names to you (and that’s if you're lucky). Others will simply walk out without saying a word. 

When create our websites, it's often a struggle to figure out what the best font size for your website is. More often enough though, we find that smaller sizes are used most often, especially with all that content you need to add on your pages. 

Is a smaller sized font truly better for user experience? Read on to find out and learn what the best font sizes really are for your website. 

First, Why Do We Make Our Font Sizes Smaller?

Too Much Content

You want your users to know a lot of things; your services, your products, what those products do, who you are, what you do, etc. So the natural response is to make sure you showcase as much information as you can to appropriately answer all of your user's possible questions.

Now you have tons of content that could appear overwhelming if you combine it with font sizes that are slightly too large. So it’s only natural to shrink the font sizes to make everything to better fit the content on the page. 

Although this compresses the content so more may be revealed on screen at once, this doesn't necessarily mean the user will read it all. In fact, 'users have time to read at most 28% of the words during an average visit', and if it’s too difficult to read, then that number is even less. 

If you know you're guilty of this technique, especially on your landing pages, you may be costing yourself conversions. Users aren’t going to stick around attempting to read content they are struggling with.  

We Want Mobile First

We’re becoming more and more consciously aware of our increased need to make our sites appealing to our growing mobile audiences. 

To adapt to this, we’ve begun making our font sizes smaller overall. This has led to the neglect of creating unique typographic experiences for appropriate device sizes. While smaller than normal h or p tags (20px range and below), may seem more appealing for handheld devices, they can be difficult to distinguish and read on larger devices. 

Cutting corners to try and find font sizes that work across all devices only leads to websites whose font sizes never really fit any device the way they legibly should.

Sometimes It’s Not Only the Size That Counts

Some of us may very well have body fonts that range between 20px - 24px and headers that are 30px - 70px, but that doesn’t always mean your website's typography is without issue.

Line height, font styles, kerning, and weights also each play an important part in conjunction with your fonts size to assure they work cohesively to assure your website provides the best user experience. 

If you’re looking for more details, check out this article on the theory behind web typography, the basics, and rules to know when reviewing what font styles you want to choose.

So Why Go Bigger?

Bigger font sizes not only hold more visual weight and help usability, but they also can be the difference between your users converting or becoming frustrated and leaving.

Legibility and Readability Are Critical

It's no surprise that users are now scanning text rather than reading word for word in an effort to absorb the main points of a page. Making your font faces smaller only hinders your user's ability to sift through the content faster.

I also have two older parents who are constantly at odds with almost every web page they try reading. Even with reading glasses, they are still zooming on the page to increase the font sizes. This same issue is replicated for many whose eyesight has changed with age. 

“But my website is for a younger audience.”

Assuming a younger audience will be more willing to tolerate smaller text simply isn’t a valid case. Patience for reading large amounts of small text is non-existent. And if your small text is getting in they way of them trying to pick out the pages key points, then they won’t bother sticking around.    

Typographic Visual Weight is More Apparent 

Although larger font may appear clunky in rare situations, it has actually been found to help with reading time. In studies from Payame Noor University & IBM/Google, as the size of type increases, readers also exhibit slightly faster reading speeds.

If you thought reading speed alone would be all that’s improved, another study reveals that larger font sizes can stimulate certain emotions more effectively.

Many are also very familiar with the 2006 study from Nielsen Norman Group which explains how users read in an ‘F’ pattern before deciding whether or not they want to slow down and read further into the content.

f-shape-heatmap.png

Larger fonts with more easily recognizable header and paragraph styles allow users to better identify how to subconsciously classify the vast array of sections they may be reading. If they come across headers they are able to quickly identify as so, then they will move on faster to the next point.

This is extremely critical on landing pages where 3 seconds of reading bold and clear headers could the user valuable insight into exactly what they could expect in a content offer. If that information is valuable enough to constitute a deeper read, then they will ultimately slow down and read more in detail.

What are Good Font Sizes? 

The answer...it depends.

Everyone will have their own set of rules, equations, and techniques they use to come to their outline of font styles for their headers and paragraphs.

One thing that’s important to note is when you’re choosing font sizes, you can’t focus on desktop sizes alone. Responsive Web Design demands that you compile font sizes for a variety of screen sizes and devices to ensure the most optimal readability for them.

Typecast put together a wonderful article looking into the proper proportions for your font sizes and assembled the CSS for it as well.

Below is the image they use to outline font-sizes for H1s - H4s, paragraphs, and blockquotes. You’ll notice H5s & H6s were left out below, but that’s because these tend to be header tags that aren’t used as much and usually have far fewer use cases (footnotes, copyright info. etc), or, they have the same sizes of the H4, yet exhibit different weights or kerning. 

website-typography-size.png

You can also check out websites like Typescale where you can plug in the font family you want to use alongside the type font scale. This will help you set up a font size base that you can use to generate your font sizes for smaller devices.

10 Websites With Great Web Typography Sizes

If you're still struggling with a place to start, check out these model websites for some inspiration as to the way they use typography to promote the best experience for difference devices, readability, and conversions. 

1. Smashing Magazine

smashing-magazine-typography.png

2. The Economist

the-economist-typography.png

3. 1stwebdesigner

1st-webdesigner-typography.png

4. Dallas News

dallas-news-typography.png

5. Wired

wired-typography.png

 

 

 

 

 

6. Quartz

quartz-typography.png

7. Medium

medium-typography.png

8. News Deeply

news-deeply-typography.png

9. CNET

cnet-flash.png

10. Gary Vaynerchuk

garyv-typography.png

Website Throwdown December 2017 Michelle Kiss
RELATED ARTICLES & VIDEOS

Want to Contribute Content to impactbnd.com? Click Here.