Profile picture of Rebecca Strehlow

7 min read

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

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

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

Illustrations by {name}

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. 

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. Especially on mobile websites (whether designed with responsive web design or adaptive design technologies)—sans serif typefaces prove to be easier to read when perusing on a small screen.


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 New York City subway system. It’s even the subject of research in a documentary film (aptly titled Helvetica).


Then there’s the iconic sans serif typeface Futura, which was invented in 1927 by German type designer Paul Renner. Also based on the Bauhaus movement, it was praised for its functional geometry and stripped-down style. The book Never Use Futura argues that the font never went out of style—and, in fact, has only gained momentum with each new generation.


An text card with a few words written in the sans serif typeface Futura in the top two thirds, and the alphavet and numeric system written in the bottom third.
Futura is a versatile typeface choice and one of the most used sans serif typefaces out there (aside from, perhaps, Helvetica). Image: https://commons.wikimedia.org/wiki/File:Typeface_specimen_Futura.svg.


Open Sans, based on an earlier Google typeface called Droid Sans, is another widely used sans serif typeface. In fact, it ranks among the most popular Google Fonts with more than 1.5 trillion views in a year.


A title card that says "Open Sans" in that typeface.
Open Sans is one of the most popular Googe Fonts, with over 1.5 trillion views in a year.


Script typefaces


A third kind of typeface is the script typeface, which is designed to look like cursive handwriting. This category includes creative designs like Clattering, a carefree brushstroke typeface and Barcelony, an elegant signature-style script.


A title card that says "Clattering" and written in the same typeface.
Script typefaces are designed to look like their name—script, or cursive handwriting. Clattering is just one example. Image: https://www.behance.net/gallery/80778799/CLATTERING-FREE-BRUSH-TYPEFACE-FONT


Decorative typefaces


These experimental typefaces are decorative and fun. Because they’re highly embellished, they’re ornamental rather than practical. As such, they’re better off used for titles and headers rather than body text. These include Morris Troy, an Art Nouveau-style typeface, and Outlaw, a design evocative of the Wild West.



Didone


This typeface classification is a genre of the serif typeface. Didones are marked by thin, unbracketed serifs, thick vertical strokes, a contrast of bold and delicate lines, and ball terminal endings on some of the letters. Originating in the late 18th century in France, didones became popular in the 19th and early 20th centuries for newspaper headlines and advertisements. Thanks to their contrasting weights and elegant curves, these typefaces are refined, attention-grabbing, and easily readable.


A popular type of didone is the fat face, a kind of didone marked by an extremely bold design. Take Abril Fatface, for example, or Quiche Fine Black, another stunning didone typeface. This high contrast style evokes drama and sophistication:


A title card that reads "Quiche FINE BLACK" in that typeface.
Didone typefaces are known for the high contrast between their thick strokes and thin serifs.


Old Style


Before we move on to fonts, let’s discuss one more typeface classification—Old Style typefaces. These are characterized by curved strokes with an axis that inclines to the left, as well as subtle contrast between thick and thin lines.


A classic typeface in this category is