The difference between font and typeface

Do you know the difference between font and typeface? And should you even care? Not really, but at the same time, maybe you should, just a little bit, sometimes. And anyway, isn’t it good to gather new knowledge?

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.

This is 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.

Freight font families, each containing many fonts

Then if you look closer, you can see that each of these font families (or typefaces) contains a number of fonts.

Freight Sans and Freight, two typefaces containing many 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.

And this is a font

So as you can see, 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).

A sentence written in various font variations of the Freight 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.

Fonts in a drawer
Photo by Natalia Y on Unsplash

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.

Want to learn more of this?

Then join us in July on The Typography Masterclass. I will deliver it live on these dates:

The Typography Masterclass – Part 1
Thursday 9 July 2020, 5pm CEST

The Typography Masterclass – Part 2
Thursday 16 July 2020, 5pm CEST

The replays will be available for all students shortly after the live delivery, so it doesn’t matter if you can’t make the lives.

Two important things to know:

  1. On the first session, I will draw a lucky student out of the hat for a full refund.
  2. The masterclass is part of the UX for Everyone course. Existing students do not need to buy it. And those who buy the masterclass now and also the UX for Everyone course when it re-opens later this year, will be refunded the cost of the masterclass. The same applies to the UX for Everyone mini course.

Click here to buy the masterclass.

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

Take the Typography Masterclass
Join the conversation

Join the Design for Geeks Facebook group

Join the conversation

Join the Design for Geeks Facebook group

Scroll to Top