What’s the difference between a font and a typeface, and does it matter? The short answer is yes, but context matters.
First, let me define the generally accepted definition of a typeface and a font from a traditional typography perspective:
- A typeface refers to the entire collection/family of font designs (style, weight, variation). Like Georgia, Helvetica, FF Meta, and Chaparral Pro. These are different typefaces, often called type families.
- A font is referring to the version of the original typeface design, for example, a thin, bold, extra bold (weights), regular, italics (style), small caps (variation). A type family often has a variety of versions (fonts).
The text you are reading right now uses a typeface called Alegreya:
- This text uses a font style of regular (also called “roman”.) and font-weight of normal.
- This is bolded regular text.
- This is italicized text
The two font styles (regular and italic) and the two weights (normal and bold) you see above are all from the same typeface.
Font Family
On the web, a collection of styles and weights from a typeface is often called a font family. In CSS, we use the font-family property to set a typeface on a text element like paragraphs and headings.
Why knowing the difference is important
In communication, context is everything. Know who you are talking to.
Are you talking to a UI designer or the average person who knows nothing about design (at least in terms of design language)? Often a client you build a website for doesn’t know what a font is. If you think that sounds absurd, you don’t have much experience dealing with clients in the real world.
If you stand among a group of professional typographers then it matters that you understand the difference between a font and a typeface.
Why? Because it’s part of how you communicate. If you’re pointing out a particular problem with a headline, and you say:
“I think we should use a different font on this text”,
Then at least in the traditional printing world, that would refer to the specific font-weight or the font style of the type family — not the entire type family. On the web, it could refer to the entire type family.
A more explicit and logical way of saying it would be:
“I think we should use a different font-weight on this text, it’s too thin, let’s use extra-bold.”,
The above should make it clear to almost everyone that you’re not talking about the typeface itself, just the version (style, weight, variant).
If you say:
“I think we should use a different typeface on this text, how about FF Meta?”
Then regardless of whether it’s on the web or in print, the above will be interpreted as: we shouldn’t use this family of fonts (e.g. Helvetica) at all.
It should be noted, that in many product design environments, much of the language used is implicit. So even if you use a term that could be interpreted differently from the outside, the people on the inside know what you mean when you say X, because the specific context makes it obvious.
I’m a fan of *explicit* over implicit communication 99% of the time. It takes a lot more time to fix a misunderstanding later on than to express yourself more clearly the first time around.
Web Typography vs. Print Typography
In my experience, most web designers, and even professional typographers use the terms typeface and font interchangeably. In web design. I’m not entirely sure what started this trend. But because it’s so common, you probably won’t run into communication problems, whether you say font or typeface. Unless the context is confusing.
In the physical world, it does appear to matter quite a bit whether you say typeface or font. But it depends on the environment. Some people in the print industry will get annoyed if you use the word font and typeface interchangeably. It can make you sound amateurish.
Why is that?
I suspect the reason has more to do with the spirit of print typography tradition than anything else. In a traditional Printing Press, (invented by Johannes Gutenberg) there is a font for every style, weight, size, and all those in combination. So in that case, it was crucially important that you used the correct terminology to avoid expensive misunderstandings.
In the old days if you were printing a book, and you needed the following:
- One typeface: Helvetica
- Three weights: normal, bold, extra-bold
- Two styles: regular, italic
- Four different font sizes: point 10, 12, 16, 20
Then you would need a lot of fonts. One individual font to represent each combination of the styles and weights above.
So:
- Helvetica bold, 10pt is its own font.
- Helvetica normal 10pt is its own font.
- Helvetica bold-italic 10pt is its own font.
Etc.
In comparison, on the web, you just give your text the font size you want using the CSS font-size property. Font sizing is handled programmatically. It can be anything from 0 to 1000 pixels (or more) and you can use a myriad of font
size units like ems, rems, %, pt, and more.
Web Typography doesn’t carry the weight (hah) of traditional print, so you don’t need to worry about having different fonts for specific font sizes.
But unlike with font sizes, on the web, it’s not enough to specify when you want to use italics and bolds with CSS properties. You also need to make sure that the typeface family you’re using has the font versions that you need.
Because, not all type families have italics, extra-bold, etc. Some only have one or two. Others have 10-15, sometimes more.
You also need to know how to apply different font weights and styles properly with Web Font Loading (e.g. via Google Fonts or TypeKit). If you don’t, then you’ll end up with crappy generic, computer-generated italics and bolds, which will ruin the look of your text on your website or app and make you look silly.
Conclusion
Web typography is still a fresh topic in 2018. A lot of young designers grow up with the web with no traditional typography “schooling” when it comes to type vocabulary. This can cause confusion and misunderstandings.
Font vs. typeface is only one of many typography topics that get confused between web and print typography. There are many others.
To avoid confusion we should carry over at least some of the traditional ways of communicating typography, to the web (to bridge the gap). At least the parts that make sense for the web.
Otherwise, we’re only going to add more confusion, division, and unnecessary misunderstandings. The technological landscape is already complex enough as it is. Let’s make the web less complex!
I hope this has been helpful :-)
