This article was originally posted on the Design for Geeks website: a project I have now archived. This version is edited and improved on.
Whenever I do a UX or UI audit – and I do many – typography is most often a sore point. Interestingly, it is also an essential component of the interface of any digital product you need to build.
In fact I would argue that typography is the most important element in any user interface.
It’s also still about 95% of the web! This is a bit of a wild estimation that I can’t in any way back up with actual data, but I feel confident that this bold claim is not too far from the truth.
The good news is that typography is the easiest, fastest and most affordable way to immediately improve the conversions of any site. Accessible typography means that your site is readable by screen readers, and that anybody visiting your site will be able to use it.
Learning about typography and implementing your knowledge is a sure-fire way of increasing your audience by as much as 25%: this is the approximate percentage of people experience a form of disability that are on the web at any one time.
So let’s start from the beginning: the difference between font and typeface.
There is indeed a difference
You may not even be aware of the fact that there is indeed a difference between font and typeface. In fact, I’m sure that you’ve heard the terms ‘font’ and ‘typeface’ used interchangeably. And you probably never gave it another thought.
In fact, I often I catch myself using the term ‘font’ when ‘typeface’ would be the correct one.
But does it matter in the end? Or is it just a boring punctualisation by type pedants lording it over the ignorant masses?
The truth is that from a certain point of view it doesn’t matter at all. I wouldn’t correct you if I noticed that you said ‘font’ where you should have said ‘typeface’.
I read a Fast Company article on the subject: Opens in new window they interviewed various famous designers, who all seemed to agree that you’d have to be a bit of a type nerd in order to get annoyed. Mind you, I do know a few type-obsessed designers who might not make their annoyance public – but they’re definitely seething internally when they hear the terms used incorrectly.
For us mere mortals, the distinction simply isn’t as important as it used to be when there was a real reason for it.
Having said all this, I still think that if you are keen to understand how to create an accessible experience with the typography of the products you design, ultimately leading to more conversions, it can be very useful to understand the difference between font and typeface.
Knowing this difference will make it easier for you to make the right choices when you are faced with type decisions. If you choose too many typefaces, for instance, you may end up with a slow site that presents cognitive overload for users: both big blocks for good UX, accessibility and conversions.
So, let’s find out what is a typeface exactly.
What’s in a typeface
A typeface is a collection of characters sharing the same design features. You can also say that a typeface is a family of fonts.
Just like real families, typefaces have different characters inside it. And you can even have more than one family within the same family, sharing the same surname.
Example: ‘Freight’ is the denomination for a number of different font families, or typefaces. Under the name ‘Freight’ you can find Freight Sans, Freight Big, Fright Neo, Freight Text.
Then if you look closer, you can see that each of these font families (or typefaces) contains a number of fonts.
This, by the way, makes me like Freight a lot: I know that I will be spoilt for choice of weights and styles if I choose Freight for my projects. With a font family like Freight, you don’t really need any other typeface to create hierarchy as well as visual interest.
What’s in a font
That’s what a font is: FreightBigProItalic is one of the 72 fonts within the FreightBig family. Each variation – Light, Book, Medium, etc, with all their Italic versions, is a font. All together they form the font family (or typeface).
In fact, in the old times every single size of type and every single character, let’s say Freight Sans Pro Black body size 160 letter Z, was 1 font. This is because each individual character had to be fused and then typeset.
Here’s a definition of font (from Wikipedia):
“Each font of a typeface has a specific weight, style, condensation, width, slant, italicisation, ornamentation, and designer or foundry.”
If you are into useless etymology (I know I am), you will be pleased to read this article explaining the origins of the term ‘font’ Opens in new window. The TLDR version: a bastardisation of the Old French word to indicate a piece of movable type made from melted lead.
That’s great to know Piccia, thanks, but – why should I care?
As said above – in a way if you don’t care it’s just fine. Carry on using the terms interchangeably and very few people will notice.
However, knowing the difference between the terms can really come in handy when you are charged with the delicate task of selecting the typography for a website (or anything else).
If you’ve been designing on the web for a while, you’ve probably heard before that the fewer the fonts in a website or app, the better.
Why? Two main reasons:
- Having to load and visualise too many fonts may cause a website to be slow
- Too many different fonts may cause cognitive overload, making the content more difficult to comprehend and navigate
So it’s important to understand that when I say ‘Pick just one typeface’, I mean:
– Pick:
FreightBig only
On the other hand, when I say ‘Pick up to 3 fonts’, I mean:
– Pick:
FreightBig Pro Book
FreightBig Pro Book Italic
FreightBig Pro Bold
Which means 3 fonts from within the same typeface/ font family (these two terms indicate the same thing).
And I do NOT mean pick up to 3 typefaces, because that might slow your site down a lot as well as making it look like a big visual car crash. Which will drive your users away. Even if they are not bothered aesthetically, too many typefaces require way too much brain energy to be interpreted, and there just ain’t no time for that these days.
Which means 3 fonts from within the same typeface/ font family (these two terms indicate the same thing).
And I do NOT mean pick up to 3 typefaces, because that might slow your site down a lot as well as making it look like a big visual car crash. Which will drive your users away.
Even if they are not bothered aesthetically, too many typefaces require way too much brain energy to be interpreted, and there just ain’t no time for that these days.
I also do not mean ‘Pick 3 fonts from 3 different typefaces’ because that would ensure the Ling effect – and only Ling can get away with it and still have a thriving business.
So, while only a typography nerd will berate you for not using the two terms correctly, I do think that there is a practical advantage to knowing the difference between font and typeface.
This knowledge is, in fact, the first step towards accessible typography that helps your sites convert more.
The advantages of picking just one typeface
I am a big proponent of the use of just one typeface. Choosing and pairing different typefaces that go well together is one of the things that non-designers, or even seasoned designers who are less versed in the art of typography, struggle with the most.
Which means 3 fonts from within the same typeface/ font family (these two terms indicate the same thing).
And I do NOT mean pick up to 3 typefaces, because that might slow your site down a lot as well as making it look like a big visual car crash. Which will drive your users away.
Even if they are not bothered aesthetically, too many typefaces require way too much brain energy to be interpreted, and there just ain’t no time for that these days.
I also do not mean ‘Pick 3 fonts from 3 different typefaces’ because that would ensure the Ling effect – and only Ling can get away with it and still have a thriving business.
So, while only a typography nerd will berate you for not using the two terms correctly, I do think that there is a practical advantage to knowing the difference between font and typeface.
This knowledge is, in fact, the first step towards accessible typography that helps your sites convert more.
Google Fonts has a really useful filter that allows you to pick a font by number of styles.
Want to a few more tips on how to pick just one typeface?
We’ve got you covered! Download our 3 Typography Tips PDF to find out the essential criteria to make the right typeface choice. 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.
Hear it from a happy customer
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 Opens in new window
