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: 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 a great experience with the typography of the products you design, it can be very useful to understand the difference between font and typeface.
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’. 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 as before 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).
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.
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 can be a practical advantage to knowing the difference between font and typeface.
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. So why make your own life difficult? Don’t pick too many fonts. Just pick one typeface that has plenty of styles and weights, and you’ll make your website faster and your branding stronger.
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 Type Tips PDF to find out the essential criteria to make the right typeface choice, and to make a real headstart in your typographical journey with minimal time investment.
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
