Subscribe
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 Course: Elements of a Great They Ask, You Answer Website

Start the Course Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer?

What is <span>They Ask, You Answer?</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
learning_center_grey__Free Courses and Certifications.svg

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
... Inbound Marketing Web Design
Close
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website
Start the Course
Elements of a Great They Ask, You Answer Website
Free Website Course
View Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

How Typography Really Affects UX

By Christine Austin

Christine Austin also recommends this free course, Elements of a Great They Ask, You Answer Website.

How Typography Really Affects UX Blog Feature

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 Course: Elements of a Great They Ask, You Answer Website

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:

How_Typography_Affects_UX_Invision

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.

How_Typography_Affects_UX_Accelerence

 

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.

font-test

Conclusion

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
Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

Topics:

Web Design
Marketing Strategy
Published on September 15, 2015

Recent Articles

11 Pricing Page Examples for Business Websites (Updated for 2022)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage 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
5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)
October 14, 2021 • 7 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 2021)
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
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read
5 ways you can use the StoryBrand framework to make a better website
June 14, 2021 • 5 min read
What is a Featured Snippet? [Definition + Examples]
June 10, 2021 • 4 min read
Google June 2021 core update live, July core update coming
June 4, 2021 • 3 min read
Google's June page experience core update will be mobile first, then desktop
May 21, 2021 • 3 min read