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.
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?
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, like expressive swashes or tiny counters. 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. (Expressive type has also evolved a lot since then.)
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:
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.
More on making the most of typography.
Bite into the history of the squishy sans serifs making scrolling sweeter
Typeset a mood with the spookiest type in pop culture, from 'Psycho' to 'Suspiria'
Get in on the psychedelic design trend with these groovy typefaces
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.
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.
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:
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 ITC Berkeley Old Style, designed by Frederic W. Goudy in 1938 for the University of California, Berkeley. Another old style typeface is Bembo, which was inspired by a printed travelogue by the Renaissance Italian writer Pietro Bembo.
What is a font?
So, if all the examples in the previous section are typefaces, then what’s a font?
A font is just a more specific way of defining the kind of text you’re using. It hones in on both the size and weight of a typeface. Let’s look at the typeface Helvetica Neue as an example:
As you can see, there are lots of variations of Helvetica Neue (each assigned a different number). Each line in the image above—Helvetica Neue 25 Ultra Light, Helvetica Neue 35 Ultra Thin, Helvetica Neue 45 Light, and so on—represents a different font. These eight fonts are distinct because of their different weights, but they all lie within the same typeface: Helvetica Neue. (More on font sizes here.)
In this way, a typeface is a broader term that encompasses all the possible versions of that particular design—whether it’s large, small, italic, bold, expanded or condensed.
Here’s a breakdown of the ways that fonts of the same typeface can vary from one another:
Size
You know how titles and headings tend to be larger than body text? Technically, that makes them different fonts, even when the typeface is identical. That’s right—Garamond 12 pt and Garamond 16 pt are two distinct fonts.
Weight
The example of Helvetica Neue shows how fonts can be different by virtue of their weights, even when the typeface is the same. That is, Helvetica Neue 12 pt Light is a different font from Helvetica Neue 12 pt Bold, with the latter having incrementally thicker strokes.
Letterform width
Spacing further highlights the difference between typefaces versus fonts. As a web designer, you can get creative with typefaces by expanding or condensing them (creating more or less space between each letter). When you squish the letters together, you’re compressing them. When you space them far apart, you’re expanding them.
There’s a whole range of letterform widths: compressed, condensed, semi-condensed, narrow, normal, extended, extra extended, and expanded. Just like font weights, different widths indicate different fonts.
Italics
Likewise, characters that are italicized versus roman represent different fonts. That means when I write “Do you like pizza?” versus “Do you like pizza?”, I’m changing the font of the word “you.”
Typeface vs. font: A brief history
Most of the time people talk about fonts, they’re really talking about typefaces. This colloquialism didn’t emerge by chance. We can, in part, thank Microsoft for making “font” the more popular term of the two. Since the earliest versions of Word in the late 1980s, they’ve labeled their list of typefaces “fonts,” catapulting the term into everyday vernacular.
But the history of typefaces versus fonts goes even further back than that.
The distinction has its origins in the history of printing. The word “font” itself comes from the Middle French word “fonte” of the late 16th century. This word denoted the action or process of casting in metal. During this period, printers needed to cast complete sets of letters in metal in order to make a font.
Fonts with a common design were called a typeface. This would include the capital and lowercase versions of that particular design, as well as different sizes or weights.
As you may suspect, manual typesetting involved a bit more work than simply hitting the keyboard. Typesetters needed to line up the individual blocks letter by letter to form a page layout. Once their layout was complete, they’d roll it with ink and press it onto paper to make prints.
You can imagine how something so tedious would require meticulous organization. To make the job quick and efficient, each font was placed in a separate metal case (the capital letter case was typically placed above or behind the small letter case, which is where the terms “uppercase” and “lowercase” originated). Think about how frustrating it would be if different sizes and widths were all jumbled together! For typesetters, knowing where different fonts were located was critical to success.
When web typography emerged centuries later, the terminology remained the same even as the old technology disappeared. But these days, the distinction is a bit outdated, at least on a practical level. In the computing world, it’s easy to scale a typeface to obtain any font of that style. A click of the mouse is all you need to create new sizes, weights, and more, because all that data is automatically saved to your font file.
Why does this matter as a web designer?
That brings us to the inevitable question: Is the typeface versus font distinction actually important? Is it just an example of snooty academic jargon, or can it have a tangible impact on your work as a web designer?
Thierry Blancpain, a designer, art director, and co-founder of the type studio Grilli Type, doesn’t think that knowing specific terminology is essential to producing great work. He explains, “Every single person in the room will know what you mean no matter if you call it a typeface or a font. In the few cases where the distinction is truly relevant and could lead to problems down the line, you can easily communicate that in other ways.”
Of course, knowing the right words helps you communicate these concepts more clearly. It can also help you better understand your colleagues and avoid grinding the gears of linguistic purists. But as Blancpain notes, being able to articulate differences like size and weight is far more important than knowing the proper terms. “We do think that the designer caring about typography is a very important aspect for the quality of a website,” he adds.
The verdict? Your own knowledge of type—and your ability to prioritize it as an integral part of the web design process—is far more critical than the language you use. Still, a little vocab now and then can’t hurt.
Subscribe to the FWD newsletter for more stories from industry experts in your inbox.
