Never be confused by typefaces vs. fonts again: here’s how they’re different

Profile picture of Rebecca Strehlow




Illustrations by {name}

Never be confused by the typographic terms again: we break down the difference with this explainer.

7 min read

An infographic depicting the difference between a typeface and various fonts.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

Couch versus sofa, soda versus pop, typeface versus font—they’re the same thing, right? Well, not all of them.

Sure, the first two examples might be synonymous, but there’s a difference between typefaces and fonts: the latter is stylistic variation of the former. And while confusing the two terms won’t make or break the quality of your web design projects, it can be useful to know the difference (and the various classifications and styles of each). Not only will this help you stay on top of industry jargon, but it can help you to precisely articulate your creative vision to your colleagues and peers.

With that in mind, let’s go over the differences between a typeface and a font, a brief history of both, and whether or not knowing this distinction really matters for web design.

A title card that reads "Typeface Helvetica Neue" with "Font" written below, to the left of different fonts, like regular or italic.
A typeface is a set of distinct glyphs that characterize a particular style of lettering. Fonts are variations within a typeface, like italic or bold. So the latter is part of the former.

Typeface vs. font

The words “typeface” and “font” are typically thought of as synonymous, but they actually refer to different things. While a typeface describes a particular style of lettering, a font refers to variations of a typeface, like its size and weight. The simplest way to understand this difference is that a typeface is a set of fonts with common aesthetic qualities.

Let’s break this down even further.

What is a typeface?

An infographic showing two sans serif typefaces and two serif typefaces. "A sans serif typeface means without serifs—the small caps on the end of some strokes. In contrast, a serif has smaller strokes on the ends of some strokes and terminals. Here are two examples of each."
A sans serif typeface means without serifs—the small caps on the end of some strokes. In contrast, a serif has smaller strokes on the ends of some strokes and terminals. Here are two examples of each.

Typically, what we refer to as a font is actually a typeface. That is, Times New Roman, Helvetica, and Arial are not actually fonts—they’re typefaces.

Essentially, a typeface is the set of design features that characterize a particular style of lettering. This may include the presence (or lack) of a serif; the relative height, spacing and width of the letters; and any other aesthetic embellishments. There are several different type classifications, including:

Serif typefaces

These are typefaces that include serifs, which are slight projections added to the ends of a stroke. In web design, this style tends to evoke a sophisticated and timeless feel.

Perhaps the most obvious example of a serif typeface is Times New Roman. Classic and readable (but, arguably, without much character), it was originally designed in 1932 for The Times of London newspaper. Today, it’s still widely used in printed newspapers and news websites. You’ve also seen it as the default font on some of the older versions of Microsoft Word.

Of course, as a web designer, Times New Roman probably isn’t your go-to. Georgia is another serif typeface that has more character and charm. Inspired by Scotch Roman typefaces of the 1800s, it was invented by Matthew Carter in 1993:

A particularly elegant serif typeface is Linotype Dido. Its delicate old world style makes it one of the best fonts for digital publications and blogs:

A text card that reads "Linotype Didot", written in that same typeface.
The thin, equally weighted strokes of Linotype Didot make it an elegant serif typeface choice.

Sans serif typefaces

A second classification of typeface is the sans serif typeface. As the name suggests, these are styles without the tails at the end of a stroke. While this style started developing in the 1800s, it wasn’t widely used until the 1920s and 1930s, when the Bauhaus movement embraced the sans serif as a reaction to the more embellished Art Noveau typefaces. It continues to be popular because it’s refreshingly clean, minimalist and bare, with a more relaxed and casual feel than serifs.

Helvetica, originally designed in Switzerland in 1957, is one of the most well known sans serif typefaces. It’s widely used for printed materials, websites, signage and corporate branding. In fact, Helvetica is everywhere—it’s the typeface for the Target and American Airlines logos, BMW, and the