What is a Typeface and How Is it Different from a Font?

By on Feb 11, 2020 in Inspiration
What is a Typeface and How Is it Different from a Font?

If you’ve ever had to ask what is a typeface, you’re not alone. Getting a typeface confused with a font is something a lot of people—even sometimes designers—routinely do. Part of the problem lies in the fact that we’ve gotten used to using these two, distinct terms interchangeably.

Without getting into the particulars just yet, here’s how to tell the difference between a typeface and a font right off the bat: one is what you see while the other is what you use. If that still doesn’t help you from asking what is a typeface, then understand that desktop publishing is ultimately to blame for worsening this confusion over the decades.

You see, the difference between a typeface and a font originates in the old-school process of how analog printers used to create a page layout. As things have gotten more digital over the last few decades, the separation between typeface and font has gotten blurrier.

Where It All Started

To understand the difference between a typeface and font, it’s important to understand the origins of printing itself. Back in the days before digital printing, printers would cast entire collections of metal characters to comprise a font. In fact, the etymology of the word “font” is actually from the French, “fonte.” It means to be cast in metal.

Now, the fonts that shared similar characteristics or designs would be grouped together as a typeface. Each font would have a different set or case for capital letters and small letters. These cases, if you will, also remain in our vocabulary today as upper and lower case.

In order to even create something as basic as a page layout, printers would have to physically put together chunks of text letter by letter. This was then rolled out with ink, then subsequently pressed on paper to fashion prints.

As you may have guessed, old-school printers would require a plethora of metal casts of letters to create page layouts, and the task was quite labor-intensive, to say the least. These metal letters were then set out in relief (raised), so that they were more easily seen, thus making them the typeface. This ties back to how we mentioned you can distinguish a typeface from a font: it’s really what you see as opposed to what you use.

So how does a font fit into all of this, and what is a typeface in relation to it?

A font refers to these metal frames or blocks that were a part of this larger and broader group of typefaces. Every font actually possessed a unique weight and size, allowing printers to get more detailed with the characters that they were using.

In other words, a font that had a size of 14 points was a different font than one that had a size of 18 points. When you add weight to the equation, things can get even more specific from a typography point of view. For example, a bold font at 22 points would be a very different font than an italicized font at 26 points.

Let’s look at an example using a specific typeface.

The Bulmer typeface is a serif that was designed in the late 18th century. This font family is considered transitional because it’s historically regarded as epitomizing the rational, more symmetrical aesthetic of the Enlightenment, as opposed to quaint Old Style features. A lowercase, italicized Bulmer at 9 point is a different font entirely than an uppercase, bolded Bulmer at 59 point. Though these two fonts would be part of the same font family (Bulmer) and, therefore, the same typeface, they are unique due to their significant weight and size differences.

So, to sum up, a font is essentially a subset of a typeface or font family, which encompasses various fonts of different sizes, styles, and weights. It’s important to point out that not every typeface will feature multiple fonts, however. It really all depends on the typeface in question.

Take a look at just some of our extensive typography assets to familiarize yourself with the difference between a typeface and a font:

That begs the question, if this was the origin of a typeface and a font, then how did we get to where we are today, where we’re routinely confusing the difference between a typeface and a font?

The answer: blame computers.

How Computers Forced Us to Ask, What Is a Typeface?

The digital revolution of the last few decades has been great. Information is now available at a moment’s notice with a quick search on the web, while remote work is opening up career opportunities and new ways of collaboration that were unforeseen just a few years ago. Communication with anyone across the world is possible in real-time, as is shopping at the touch of a button.

All this progress, unfortunately, has also led to confusion between typefaces and fonts.

Computers gave rise to digital typesetting, where entire font selections—er, rather entire typefaces—were readily available to use on your new Mac or Windows desktop or device. You can thank desktop publishing as well as word-processing software specifically for introducing this confusion between typefaces and fonts.

Look at Microsoft Word. You can easily find the font, not typeface, menu in the dropdown choices from the primary navigation, as well as in secondary and tertiary navigation tabs. Look at Apple’s answer to Word: Pages. In Pages, too, typefaces are routinely referred to as fonts, furthering the confusion. When you open up these font menus in these word processors, you’re really getting a huge list of typefaces in subsequent dropdown menus. Only after choosing the “font,” which is really the typeface, can you go ahead and set the particular characteristics of your typeface (size, style, weight, etc.).

Unless you’re a typesetter or a typographer (or someone who just enjoys correcting people), these distinctions don’t matter too much in practical terms. After all, in spite of the confusion, most people understand what you mean when you tell them that you like this font or that typeface. The irony is that people are more familiar now than ever before with the wide range of font families at their disposal, thanks to their digital devices.

The Difference Between a Typeface and a Font in Their Characteristics

One of the best ways to further illustrate the difference between a typeface and a font to anyone asking what is a typeface, is to show them.

As mentioned, a typeface is an entire font family. It includes the broad range of fonts that all share a common design.

Here are some well-known and popular typefaces:

  • Baskerville
  • Helvetica
  • Times New Roman
  • Arial
  • Futura
  • Didot
  • Garamond
  • Rockwell
  • Georgia

On the other hand, a font is where you can appreciate the minute details exclusive to an individual character or word.

Now, let’s take a look at some of the characteristics of a font.

Weight

Think of the weight of a font as the thickness of the outline of a letter compared to its height. Typefaces feature fonts of various weights. Some rare typefaces may have as many as a dozen or so weights, but it’s more common for a typeface to have four to six weights for its fonts.

Here are the naming conventions for font weights:

  • Thin or hairline
  • Ultra-light or extra-light
  • Light
  • Normal or regular
  • Medium
  • Semi-bold or demi-bold
  • Bold
  • Extra-bold or ultra-bold
  • Heavy or black
  • Extra-black or ultra-black

Eleanora is an example of a regular and bold font.

Its modern and accessible appearance makes it easy to read at the right size.

Typography terms made simple.


Download the PDF

img

Download the PDF

Remember key typography concepts

Grab this handy cheatsheet summarizing some of the most important typography terms.

Size

What is a typeface or a font if you can’t read it properly?

Another vital aspect of a font, the size of a font has considerable impact on its readability and legibility. Therefore, the size of a font is also crucial to the user experience of a reader. That said, some fonts work better at smaller sizes while others are ideal at larger sizes because they were designed that way.

Here’s a widely accepted naming system for font sizes, courtesy of Adobe:

  • Caption – The smallest range of sizes, Caption usually ranges from 4 to 8 point
  • Small text – This ranges from 8 to 10 point
  • Regular – Including the average or default size for reading (12 point), for both print and the web, Regular spans 10 to 13 point
  • Subhead – Meant for larger text, it ranges from 14 to 18 point
  • Display – The widest range of sizes, Display goes from 19 all the way to 72 point
  • Poster – The largest range of sizes, typically greater than 72 point

The Groovy – Retro Font is an example of a font that’s better suited to projects where you need to see typography from far away.

Its sizes go from 24 px all the way to 72 px.

Slope or Style

When we speak about the style or slope of a font, it’s an indication of how much the font slants from left to right. The purpose of slope is to give more weight to the importance of words. This is particularly the case in European (Roman) typefaces and fonts.

Here are common font slopes or styles:

  • Italic – Cursive font that borrows from stylized, usually calligraphic handwriting to stress key points in a text, point out creative works, or quote a speaker
  • Oblique – Slanting font similar to italic, except it only uses the same glyphs as roman type does instead of varying glyph forms
  • Swash – A typographical exaggeration or flourish, including stylized or embellished terminals, strokes, serifs, etc. (Note: For a more in-depth understanding of these typographical terms, see our font anatomy guide)
  • Cursive or Script – A calligraphic face that provides an exaggerated, italic style; this is a rather rare slope
  • Slant – A slant is subtler than an all-out italic and doesn’t undergo any change to its appearance to achieve the slant; this isn’t a true italic since its lowercase forms don’t change

Note the distinctive, italic slope in the Archive Garamond Italic Pro font.

This font takes its design cues from the ideas of the famous French typeface designer of the 16th century, Claude Garamond.

Width

Now, what is a typeface or font good for if it’s not legible enough?

Width is a characteristic that makes sure each individual letter of a font is clearly legible. This property is a reference to changing up the actual width of the letters (sometimes also called stretch), yet this is something that’s used less often than slope or weight adjustments.

If a font is relatively narrow, then it’s likely marked as:

  • Compressed
  • Condensed
  • Narrow

If a font is relatively wide, then it’s likely marked as:

  • Wide
  • Extended
  • Expanded

Both slab serifs and sans serifs are typefaces where the use of width in their fonts is relatively commonplace.

Clab is a perfect example of a slab-serif font that is of the condensed-weight variety.

Note how closely together each letter is, which means the tracking is very small. However, such a font, though harder to read at close range in print or on the web, would be ideal in situations where bigger fonts are necessary, such as posters or billboard displays.

Serif

A serif is that little foot or extension at the end of the bigger stroke of a letter within a certain font or entire typeface. Fonts are generally divided into those with serifs and without serifs, called sans serif, from the French word “sans,” for “without.”

However, there are also additional possibilities, like:

  • Slab serif
  • Semi-serif
  • Alternate capitals

Classy Marisa is a prime example of a sans serif.

It has no extensions, flourishes or swashes of which to speak. Due to this minimalist approach, it has fewer distractions and is easy to read.

A Showcase of Fonts

Now that you’re an expert at telling the difference between a typeface and a font, you won’t have to ask what is a typeface anymore. To mark this progress, let’s take a detailed look at some specific fonts and their unique characteristics.

Naïve Deco Sans

A highly interesting font, Naïve Deco Sans is part of the Art Deco font category. Elegantly stylized, it’s a clear throwback to the 1930s’ era of geometric patterns and shapes, sunbursts and clean and well-defined lines.

Besides being art deco, it’s part of the Naïve superfamily of typefaces that include additional variations like:

  • Serif
  • Sans serif
  • Line
  • Inline

As a font, Naïve Deco Sans is a slanted sans serif that features a clean design and whimsical feeling.

Silent Moon Scary Font

From the Scary Font category comes Silent Moon Scary Font. This minimalist font is highly stylized, which makes it easier to read and more legible at larger point sizes.

A handwritten sans serif, it’s both scary and evocative, making it the perfect choice for a mystical design project.

Gothic modern!

An homage to gothic design, Gothic modern! is right at home in a Mary Shelley novel. Another heavily stylized font, it features a very condensed weight in its letters, making it better for use in larger design projects.

A slab serif, Gothic modern! incorporates Victoria-era dread with sharp font design.

Slight

For those who’d like something lighter and airy in their typography, there’s Slight, an almost wispy calligraphy script font. This font is interesting for a number of reasons.

For starters, it features a very sharp and pronounced slope, infusing it with a heavy dose of character. It’s also an elegant, hand-lettered font, making it well-suited for editorial design, branding projects, and invitations.

Queen

From the larger-than-life Display Font category comes Queen. A regal choice of font, Queen epitomizes what it means to be a display font because it commands your attention from the moment you lay your eyes on it.

Queen features subtle serifs that leave their mark without being intrusive while also featuring a vintage, ornamental style that suggests power and class.

The font is available in four styles:

  • Regular
  • Grunge
  • Inline
  • Inline grunge

What Is a Typeface? So Much More Than a Mere Font…

Now, you know all about the difference between a typeface and a font. While a typeface refers to the entire collection of fonts that have a similar design, a font is any of the unique variations of characters that’s a member of this bigger collection.

A typeface and a font were distinct entities before desktop publishing entered the fray. Today, we use the two terms interchangeably in practical applications and most situations—in spite of this being technically incorrect. Nonetheless, now that you know the difference between a typeface and a font, it’s up to you to make sure that each term is used properly.


Products Seen In This Post:

Typography terms made simple.


Download the PDF

img

Download the PDF

Remember key typography concepts

Grab this handy cheatsheet summarizing some of the most important typography terms.

2 Comments

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →