This article was originally posted on the Design for Geeks website: a project I have now archived.
How much does typography matter?
You probably can already imagine that I think typography matters a lot, and for a number of reasons, not just one.
3 key reasons
Today, I’ll give you three key reasons why typography matters so much, possibly more than anything else on your websites or apps. There are many more reasons of course, this is just the start.
#1 reason why typography matters: your website has LOTS of it
Visit your own website now, and look at the elements on it.
What’s prevalent? What’s there the most of? Is it images, is it video, or colour?
I would be happy to stake a bet. Even without having ever visited your website, I am 99% sure that typography plays a big part on it.
In fact, just as humans are 70% water, I’d say that your website is 70% typography, at the very least. They say that the internet as a whole is still 95% typography, but I have no means of proving this urban legend – although it stands to reason that the percentage is quite close to reality.
What typography actually is
But what is typography? Is it just about the typefaces you’ve selected to represent you and deliver your content?
Not really: typography is so much more than selecting a typeface.
Typography is every single thing that determines how text looks.
Good typography = good UX
(with thanks to Joe Natoli Opens in new window for all that I learnt on the topic of UX and typography from him)
This is why typography is such an integral, important part of good user experience: it’s about treating your text as an essential element of your user interface.
If your users are unable to read your copy properly, then they are not having a good experience. And they will go somewhere else.
So the first thing you need to do is to make sure that everyone can read your typography without any problems.
#2 reason why typography matters: readability can make or break your UX
Readability refers to how easy it is to read a block of text: it’s how well you can read long chunks of copy.
There are many factors that can affect the readability of the text on a website or app:
- The line height
- The tracking, that is to say the distance between letters
- The white space between and around blocks of text
- The length of the lines
- The alignment
- And more
Readability is fundamentally an accessibility issue, so it’s essential to get it right. And yet, so many of the websites out there fail this essential requirement under one of the aspects above.
Unreadable copy means failing to comply with the law at worst, and it means a bad experience for your users at best.
For instance, Google’s line length recommendation is 60-65 characters (from Google’s Material Design guidelines Opens in new window). How long are the lines on your sales pages? Do you let them wander on forever on the screen? If so, I would recommend making them shorter, now.
#3 reason why typography matters: legibility is key, too
Legibility refers to how easy it is to distinguish each letter. It’s how well we see the individual characters: how we decode each symbol and assign it the intended meaning.
These factors greatly influence our ability to distinguish the letters:
- A messy background (text on images can create serious legibility issues)
- Low/ high contrast
- Typeface design
- Environmental conditions
So many of the websites out there have text that is not perfectly legible. Do you use images as a background? In that case, use a dark enough overlay, so that the text on top of them is legible.
Take these two easy steps
Want to get started with getting your typography right?
You can download the 3 Typography Tips PDF guide to make a real headstart with minimal time investment. It lists 3 easy and quick fixes that can improve your product or website’s usability (and therefore, its profitability) by miles. And I don’t even want your email. No opt-in required.
(Note from the future: I created this article and this PDF guide years ago, for the dearly departed Design for Geeks project, and it’s still totally relevant. Every day, I audit products that make these easily avoidable mistakes.)
Piccia Neri’s typography wisdom is the reason the conversion rate on my landing page 4x-ed overnight. Literally.
Piccia analyzed the UX and typography of my site. After implementing her type and layout suggestions, I woke up the next morning to a 400% increase in conversions on the landing page of the summit I was selling.
Jan Koch – WP Mastery
