</p>
<p>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. </p>
<div class="lh-featured-snippet">
<h2>Typeface vs font</h2>
<p>A <strong>typeface</strong>, called a font family in CSS, refers to the design of the letters and numbers (how the letters look). <strong>Font </strong>refers to the different weights and sizes that are within a typeface.</p>
</div>
<div><img src="https://learn.g2crowd.com/hubfs/typeface%20vs%20font-1.png" alt="typeface vs font" width="340" style="width: 340px; display: block; margin: 0px auto;"> </div>
<p>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.</p>
<p>This definition seems simple enough, so why are these two terms confused?</p>
<p>Let’s take a look back at their original usage.</p>
<h2>Where did the terms typeface and font originate?</h2>
<p>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.</p>
<p>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. </p>
<p>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. </p>
<div><img src="https://learn.g2crowd.com/hubfs/california%20job%20case.jpg" alt="california job case" width="576" style="width: 576px; display: block; margin-left: auto; margin-right: auto;"></div>
<p style="text-align: center;"><em>Source: Zeichen Press</em></p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 710px;"><strong>FUN FACT: </strong>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”!</td>
</tr>
</tbody>
</table>
<p>Each <em>font</em> was placed in its own job case because, although they were part of the same <em>typeface</em>, each font had a distinguishable appearance: weight, width, style, optical size, grade, and effect.</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 710px;">
<p><strong>Weights:</strong><span> </span>Hairline, Thin, Ultra Light, Extra Light, Light, Book, Regular/Roman, Medium, Semibold/Demibold, Bold, Extra Bold, Ultra Bold, Heavy, Black, Ultra Black</p>
<p><strong>Width:</strong><span> </span>Compressed, Condensed, Semi-Condensed, Narrow, Normal, Extended, Extra Extended, Expanded, Extra Expanded, Ultra Expanded </p>
<p><strong>Styles:<span> </span></strong>Roman, Italic, Cursive, Oblique, Small Caps, Petite Caps (rare), Upright Italic (rare), Swash, Script, Stencil</p>
<p><strong>Optical Sizes:<span> </span></strong>Micro, Caption, Text, Subhead, Display, Deck, Poster</p>
<p><strong>Grades:<span> </span></strong>Grade 1, Grade 2, Grade 3, Grade 4…</p>
<p><strong>Effects:<span> </span></strong>Inline, Outline, Shadow, Fill…</p>
</td>
</tr>
</tbody>
</table>
<p>Each of these font appearances can be combined with another or multiple others. The combination possibilities are endless.</p>
<div><img src="https://learn.g2crowd.com/hubfs/font%20variations.png" alt="font variations" width="500" style="width: 500px; display: block; margin: 0px auto;"></div>
<p>Keeping job cases organized was imperative.</p>
<h3>Does it matter anymore?</h3>
<p>If you’re a typographer, yes.</p>
<p>If you’re anyone else, not really. </p>
<p>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. </p>
<p>These days, it only takes seconds to switch between fonts and typefaces.</p>
<h4>What do I do with this information?</h4>
<p>It’s been a while since the difference between “typeface” and “font” was relevant.</p>
<p>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.</p>
<p><strong>Want to learn how to make a few different fonts and typefaces look good together? Read all about <a href="https://www.g2.com/articles/font-pairing" rel="noopener" target="_blank">font pairing </a>and then <a href="/make-your-own-font" rel="noopener" target="_blank">make your own font</a>!</strong></p>
Imagine you work at a retail store. Black Friday is coming up and it’s time for your quarterly...
by Andrew DeBell
I have an idea for an app, but should it be for web or mobile?
by Bridget Poetker
Ever catch yourself drowning in a flood of ideas, so many that you don’t even know where to...
by Samudyata Bhat