Learn
Learn
Close

They Ask, You Answer

A revolutionary approach to inbound sales, content marketing, and today’s digital consumer.

Learn MoreLearn More

Free Courses in IMPACT+

Dozens of sales, marketing, and content courses inside IMPACT+. Start learning now.

See all coursesSee all courses
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Coaching & Implementation Services
Coaching & Implementation Services
Close

Services Overview

See how you can dramatically increase your inbound leads and sales.

Services Overview

Digital Sales and Marketing Mastery

Fast track your team’s success with IMPACT's most popular service.

Digital Sales and Marketing Mastery

Web Design

Launch a beautiful website that consistently generates leads and revenue.

Web Design

Virtual Sales Training

Equip your sales team with comprehensive training designed to help them close more deals in today's virtual-first world.

Virtual Sales Training

HubSpot Training & Implementation

Train your company to take ownership of HubSpot and get the most out of your investment.

HubSpot Training & Implementation

Case Studies

See dozens of examples of companies succeeding with Digital Sales and Marketing Mastery and They Ask, You Answer.

Case Studies
Become a Coach
Become a Coach
Close

How to design for readability – a guide to successful web typography [Infographic]

How to design for readability – a guide to successful web typography [Infographic] Blog Feature

Marcella Jalbert

UX Designer, Host of ‘Creator’s Block’ Podcast, Designer for 50+ Sites on HubSpot

October 20th, 2019 min read

The font you choose is an extremely important (and often overlooked) part of your brand. 

The right font can set the entire tone for your site. 

It can make the user feel comfortable with you or instill more trust in you. There are even studies that show people are more likely to believe something written in certain fonts. (i.e. NOT COMIC SANS)

Now, with a heavier focus on website accessibility than ever, the fonts you choose and how you use them (also known as typography) plays a huge role. 

The letterforms, size, spacing, contrast, and context all affect the legibility of your content and you worked dang hard for that content, so let me show you a few ways you can ensure typographic success on your website.

 

Choosing a header font vs. paragraph font

When choosing header fonts, you can often bypass some of the best practices due to the fact that you will be using these at larger sizes and usually a bit isolated from other content visually.  Plus, they are usually shorter lines of content. 

If you know your content tends to be more on the wordy side, however, I would definitely follow the same best practices you would for paragraph type.

Our primary goal for paragraph type is always legibility. 

The bulk of your content will be seen this way and we want to ensure that it can be easily consumed and is devoid of potential accessibility issues as well as reader’s fatigue which can affect all audiences.

 

Top 5 areas to consider in web typography

  1. Distinct letterforms
    Having a more distinctive shape for all letters improves legibility. So, for example, fonts with similar-looking “q” and “p” shapes are on average harder to read than one with more distinct shapes for each. You may want to avoid these.

  2. Letterform contrast
    Paragraph copy performs best with fonts that have a medium amount of contrast (meaning there should be some variance in the width of the strokes that make up the letters) among the letterform stroke width. Letterforms with too little or too much contrast should be reserves for shorter lines of larger copy (like the headers I mentioned above).

  3. Body text size
    When considering text size, it is extremely important to take into account the distance at which the user will be reading this text. The experience a user has when reading on their phone is very different from reading off a monitor or TV and should be treated as such.

  4. Line length
    The line length, or how many characters are on a line, can greatly contribute to a reader’s fatigue — and if a user is getting fatigued by your content, they may choose to take their eyeballs elsewhere. A good rule of thumb is to keep lines between 45-75 characters.

  5. Color contrast
    According to the Web Content Accessibility Guidelines, for body text to be legible, it should achieve a contrast ratio of at least 4.5:1. You can easily check to see if your fonts pass the test with this handy dandy contrast checker from WebAIM.

The following infographic from Toptal takes you deeper into what areas to focus on when designing for readability.

InfographicInfographic by Toptal

 

FREE On-Demand: The Website Optimization Summit Opening Keynote

Watch Liz Moorehead’s takeaway-filled opening keynote from the Website Optimization Summit for FREE inside IMPACT+.

Your business website should be your most profitable virtual employee -- closing deals left and right. Yet, business leaders and digital marketers just like you are unwittingly undermining the money-making potential of your website. 

Let Liz Moorehead show you the simple and powerful ways you can immediately increase the revenue potential of your business website, no matter what industry you’re in, in this information packed keynote.

Watch Free On-demand

Keep Scrolling to Continue Reading

Watch Liz Moorehead’s opening keynote from the Website Optimization Summit, FREE on-demand inside IMPACT+. Learn how you may be unwittingly undermining the money-making potential of your website and how to fix it!
Watch Free On-Demand
Here Are Some Related Articles You May Find Interesting

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

IMPACT+ Sign Up
A FREE online learning community with on-demand courses, hundreds of expert-led sessions, thousands of your peers ready to support you, and much more.
Check it out
FREE On-Demand: Watch Liz Moorehead’s Website Optimization Summit opening keynote now!
Watch Free On-demand
FREE On-Demand: Watch Liz Moorehead’s Website Optimization Summit opening keynote now!