The words "typeface” and “font” don’t look the same. They don’t sound the same. They don’t mean the same thing.
Why is it so often that we confuse them?
It’s not just laymen who become perplexed by these words. Even those who specialize in graphic design and typography mix the two up.
To better understand the meaning of the words we use on a daily basis, it’s best to go back to the beginning.
Typeface vs font: the difference
There are a lot of typography terms graphic designers need to learn and understand, and all together they can be a little disorienting. Haven't learned them all yet?
Typeface and font are two vocabulary words that sometimes fall to the bottom of a designer’s flashcard stack. Their definitions are often never memorized. Let’s change that.
Typeface vs font
A typeface, called a font family in CSS, refers to the design of the letters and numbers (how the letters look). Font refers to the different weights and sizes that are within a typeface.
A helpful way to think about these two terms is to think of a typeface as an album of music, while the fonts are the songs that make up the album.
This definition seems simple enough, so why are these two terms confused?
Let’s take a look back at their original usage.
Where did the terms typeface and font originate?
Before computers (but after dinosaurs), the words “typeface” and “font” were much less confusing because the technology of the times made it easy to see how different they were on a fundamental level.
Historically, printers weren’t digital machines. Instead, printers and typesetters were people who would physically set out phrases, sentences, and words character by character. To do this, they used “type,” or physical letters and characters that were arranged onto pages for printing.
The type was organized and stored inside of job cases. Also known as type cases, these were wooden boxes with multiple compartments that were used to store the type. There were spaces for letters, numbers, and all of the punctuation you could imagine. For example, the California Job Case was a popular variation in the U.S.
Source: Zeichen Press
FUN FACT: Some styles of job cases would organize the type by minuscule and capital letters, providing a separate shelf for each. This is where we get the terms “uppercase” and “lowercase”! |
Each font was placed in its own job case because, although they were part of the same typeface, each font had a distinguishable appearance: weight, width, style, optical size, grade, and effect.
Weights: Hairline, Thin, Ultra Light, Extra Light, Light, Book, Regular/Roman, Medium, Semibold/Demibold, Bold, Extra Bold, Ultra Bold, Heavy, Black, Ultra Black
Width: Compressed, Condensed, Semi-Condensed, Narrow, Normal, Extended, Extra Extended, Expanded, Extra Expanded, Ultra Expanded
Styles: Roman, Italic, Cursive, Oblique, Small Caps, Petite Caps (rare), Upright Italic (rare), Swash, Script, Stencil
Optical Sizes: Micro, Caption, Text, Subhead, Display, Deck, Poster
Grades: Grade 1, Grade 2, Grade 3, Grade 4…
Effects: Inline, Outline, Shadow, Fill…
|
Each of these font appearances can be combined with another or multiple others. The combination possibilities are endless.
Keeping job cases organized was imperative.
Does it matter anymore?
If you’re a typographer, yes.
If you’re anyone else, not really.
As computers and electronic keyboards came into existence, the difference between the two words became muddled. It was easy to stay consistent with fonts, there was no more running out of sorts of letters (that’s where the phrase “I’m all out of sorts” comes from!), and no more rummaging through cases.
These days, it only takes seconds to switch between fonts and typefaces.
What do I do with this information?
It’s been a while since the difference between “typeface” and “font” was relevant.
Most of us can go ahead and use the word “font” to describe Times New Roman, no matter what the variation of it is, and never let the word “typeface” become a part of our vocabulary.But if you’re a typographer or looking to expand your knowledge of typography and graphic design, know that the two terms aren’t synonymous, even if that’s the way they’re used today.
Want to learn how to make a few different fonts and typefaces look good together? Read all about font pairing and then make your own font!