Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.

Free Assessment: Website Performance Assessment

Start the Assessment
... Inbound Marketing Web Design
website performance assessment start

Free Assessment:

Website Performance Assessment
Start the Assessment
Website Performance Assessment
Free Website Course
View Website Performance Assessment
website performance assessment start

Free Assessment:

Does your website build trust with buyers and bring in revenue?

Take this free 10 question assessment and learn how your website can start living up to its potential.

How Typography Really Affects UX

By Christine Austin

Christine Austin also recommends this free website performance assessment.

How Typography Really Affects UX

typography_blog_post“By making itself evident, typography can illuminate the construction and identity of a page, screen, place, or product.”  ― Ellen Lupton, Thinking with Type

When trying to communicate our ideas and purpose to our viewers, we sometimes get so wrapped up in our website's layout and content that we fail to recognize the way our words are presented is what actually helps users to absorb everything.

Free Assessment: Website Performance Assessment

Typography is what creates the voice for your copy, sets the tone for the users experience, and helps identify the brand on your website.

When typography isn’t taken into full consideration, you may end up confusing your users which could prevent them from making a decision and ultimately cost you conversions.

To gain a better understanding of the true impact typography can have, here are some explanations on how it should be used and how you can begin implementing it on your own website.

The Purpose of Typography

Each website has its own typographical approach, but regardless of how it looks, its purpose remains the same - to style the information in a way that communicates the feel, style, and language your company is trying to evoke.

Typography is defined as “the way in which the type is laid out on a page to best achieve the desired visual effect and to best convey the meaning of the reading matter.” The layout, size, color, spacing, and placement all have their own individual effects in controlling the copy so it directs how the user should approach and understand what they are reading.

In an effort to give an appropriate voice and style to your website, you also need to keep the typography-styled so that it effectively helps facilitate readability and doesn't disrupt the user’s flow down the page.

Making Typography Readable, Understandable, and Legible

It may be hard to believe, but the type of font face you choose can dramatically affect your website's voice, flow, and conversions. But, as long as the word ‘the’ looks like ‘the’, why should it matter?

The reality is that you not only need to think about the style of the type, but also how the people who visit your site will interpret the type. Do they need the type slightly larger than normal? Should paragraphs be displayed in a specific manner? Are they more attracted to a certain color and thus, will using that color on some of your type influence a specific decision?

Certain research has even shown how the layout of typography can affect the users readability of it such as how smaller font sizes and low-contrast are the number one complaint for web users and that the best readability for web type is at a line-height of 1.5.

While readability is important, you also need to make sure it’s legible too, which means you can't just go putting some random content larger just because you think it’s important, or drastically spacing things out so it takes the reader that much longer to digest the content.

Combining legible and readable content will ultimately help solidify the copy on your website so people will not only be reading content they understand but also be able to continue through it without the type disrupting or confusing them.

How to Choose Your Type 

With so many beautiful font styles out there, it can be hard to decide what’s best for your website. While the easiest solution may just be to pick something standard and basic, you shouldn't feel like you are boxed into choosing something super safe just because you don’t know what other options may work.

1. Use fonts that are legible at a variety of sizes and weights.

Most of the time, websites are filled with fonts ranging in size and style depending on what their purpose is (buttons, navigation, body text, etc). So when picking your fonts, make sure you take into consideration how it will look on your website’s interface.  Take a look at Invisionapp’s home page for example:


Invisionapp uses two different font styles on their website - Open Sans for headers, subheaders, and body copy, and Brandon Grotesque for their navigation and buttons. Open Sans has the ability to look visually appealing and legible regardless of its size and color while Brandon Grotesque manages to hold its own for the navigation and buttons specifically due to its case type.

2. Pick a font that represents the appropriate personality you want.

This one can be the trickiest to decide upon, especially because you may not be able to describe the “personality” you want your type to evoke. To help make this tip a little clearer, take a look below at Accelerance’s homepage, an IMPACT client.



The first thing you see is the value proposition, or H1, and more specifically the word in red which immediately draws you into reading it. The capitalization makes the message all the more powerful and helps identify the direct and relatable personality this page plans to continue with. For them, this bold font helps grab their users attention and communicates an  energy that works for the content they display.

3. Use fonts with distinguishable letters.

Many fonts are plagued with similar letter styles, specifically with “i”s  and “L”s  (as seen in the image below), and poor letter spacing, such as when an “r” and “n” look like an “m”. These fonts can confuse users when trying to distinguish a word and will add unnecessary friction when reading. So when choosing your type, be sure to check your type out in different contexts to make sure it won’t cause an issue for your users.



If you still feel a little worried about what fonts might work best for you, check out Typographys article on font pairing to get a more in-depth look at how the style of font can affect the energy and personality of what it’s being used for.

Another neat website I suggest is Font Pair, which lists a variety of font combinations that are guaranteed to look good together, but it's up to you to make sure that what you choose is both acceptable to your voice while supporting the type of experience you want your users to have when visiting your website.



Download The Complete Website Redesign Guide

Fill out the form below for tips on how to design a website that generates results

10 Focus Areas for Your next Website Redesign
website performance assessment start

Free Assessment:

Website Performance Assessment
Start the Assessment
website performance assessment start

Free Assessment:

Website Performance Assessment

Does your website build trust with buyers and bring in revenue?

Take this free 10 question assessment and learn how your website can start living up to its potential.


Web Design
Marketing Strategy
Published on September 15, 2015

Recent Articles

4 Ways To Recession-proof Your Website In 2022
June 9, 2022 • 5 min read
23 of the Best Examples of Business Blog Design
May 30, 2022 • 13 min read
5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)
May 16, 2022 • 8 min read
8 Best Content Management Systems for Digital Marketing in 2022
March 22, 2022 • 9 min read
How Much Does a Website Design or Redesign Cost in 2022?
March 8, 2022 • 9 min read
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
February 22, 2022 • 17 min read
Your 2022 Website Strategy Must Include These 6 Things
February 15, 2022 • 9 min read
11 Pricing Page Examples for Business Websites (Updated for 2022)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Design Should Have [+Video]
January 15, 2022 • 6 min read
What Does a Great Inbound Marketing Website Look Like in 2022?
January 10, 2022 • 11 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
ICYMI: Digital Marketing News Update for July 26, 2021
July 26, 2021 • 6 min read
ICYMI: Digital Marketing News Update for July 19, 2021
July 19, 2021 • 6 min read
What the Heck is Going on With All the Google Updates? (Content Lab, Ep. 54)
July 15, 2021 • 1 min read
8 Best Business Website Designs (Updated for 2022)
July 15, 2021 • 5 min read
ICYMI: Digital marketing news update for July 12, 2021
July 12, 2021 • 5 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read