Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Font vs. Typeface

Have you ever used the terms typeface and font interchangeably?

They are actually not exactly the same.

A typeface is the collective name of a family of related fonts, such as Roboto, while fonts refer to the weights, widths, and styles that constitute a typeface, such as Roboto Regular, Italic, Bold, etc.

However, not all typefaces consist of multiple fonts. Some typefaces only have one weight if they are designed to be used as headings only. We call them display fonts, and we will explain more in a later lesson.

So in most instances when people refer to fonts, they really mean typefaces.

A typeface is sometimes referred to as a font family, and in CSS this terminology is used rather than typeface. There are also type families however, which are related typefaces, usually covering sans serif and serif, and sometimes slab serif or even a blackletter design. Examples of type families are: Brix Sans/Brix Slab/Brix Slab Condensed, Scala Sans/Scala, Skolar/Skolar Sans.

Interestingly enough, historically, the distinction between typefaces and fonts was blurry in the first years of letterpress printing. Rather than a different style, italics were initially distinct typefaces used to set entire books in. These italics had upright roman capitals, as seen in an italic type by Ludovico Arrighi, c. 1527.

It wasn’t until the middle of the 16th century that the popularity of italic type declined until italics fulfilled a secondary function of use for in-line citations, block quotes, preliminary text, emphasis, and abbreviations. It was then that italic types became fonts of typefaces rather than typefaces in their own right. Although, there is nothing against an italic type which features no other fonts to be referred to as a typeface.

The strict distinction between the term “font” and “typeface” is slowly fading out due to the move from print to digital design. Today most people find themselves using the terms ‘font’ and ‘type’ almost interchangeably. The reality is that, currently, the distinction between these two terms is confusing, unnecessary, and even a little bit old-fashioned. So one could argue that knowing the difference doesn’t matter in most cases.

However, it’s important to mention that, in specific contexts, it can be critical. Knowing the difference can play a significant role not just in the area of Type Design, but also in Product Design, Product Engineering and Web Design. It can help you to get specific when talking about a change in a particular font without affecting the whole environment and display. It’s all about optimizing the process and applying fonts and typefaces correctly.

Scroll to Top