What is the difference between a typeface and a font?

A typeface is a design for a set of letters, numbers and symbols, such as Helvetica, Garamond or Inter. A font is a specific implementation of that design: one particular weight, style and, traditionally, size. In metal type, a font was a physical case of sorts for, say, 12-point Garamond Bold, while the typeface was the overall Garamond design. In digital terms, a typeface is usually delivered as several font files, one for regular, one for bold, one for italic and so on. Put simply, the typeface is what you see and the font is what you use to produce it.

In everyday speech the words are used interchangeably, and most of the time that's fine. But the distinction becomes useful when you're buying licences, configuring @font-face rules, talking to designers or debugging why the browser is showing a fake bold. In this article you'll learn where the two terms come from, how they relate to font families and font files, how CSS uses the word "font", and when it's worth being precise.

Where the Terms Come From

The difference made more sense in the days of metal type. A printer who owned the Caslon typeface didn't have one object called Caslon. They had separate cases of individual metal letters, each cast at a single size and style: 10-point roman, 10-point italic, 12-point roman, 12-point bold and so on. Each of those cases was a font (from the older word "fount", related to casting). The design they all shared was the typeface.

Because each font was physically cast at one size, size was part of the definition. A printer running low on 12-point italic couldn't simply scale up the 10-point letters.

What Changed With Digital Type

Digital fonts are outlines, and outlines can be scaled to any size. So in modern usage, size is no longer part of what defines a font. A single file such as Inter-Bold.woff2 serves every size from a 12px caption to a 96px headline.

What remains is the split between the design and its variations. Today, a font is usually understood as one weight and style of a typeface, and in practice it's very often the file that contains it.

Typeface, Font Family and Font: How They Relate

You'll meet three closely related terms. Here's how they fit together:

Term	What it means	Example
Typeface	The overall design of the letterforms	Source Sans
Font family	The collection of all weights and styles of a typeface, often used as a synonym for typeface	Source Sans 3 Light, Regular, Semibold, Bold, and their italics
Font	One specific weight and style, usually one file	Source Sans 3 Semibold Italic

Some foundries distinguish further. A superfamily groups related typefaces that are designed to work together, for example a serif and a sans-serif that share proportions. A font file is the physical container, which may hold one font or, in the case of variable fonts, a whole range of weights.

Variable Fonts Blur the Line

A variable font is a single file containing a continuous range of one or more design axes, most commonly weight. One file can produce any weight from, say, 100 to 900, and sometimes width, slant or optical size too. With variable fonts, the neat "one font equals one weight equals one file" model no longer holds. You might have a whole typeface's roman styles in one file and its italics in another.

How CSS Uses the Word "Font"

CSS doesn't follow the typographer's distinction strictly, which is one reason the terms get muddled. The font-family property names a typeface (or a family), and the browser then picks the right font within it based on font-weight, font-style and font-stretch.

body {
  font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

In that example, "Source Sans 3" is the family. The browser chooses which font, meaning which specific weight and style, to use for each element.

Mapping Font Files to a Family

When you self-host fonts, you tell the browser which file belongs to which weight and style using @font-face. Each rule describes one font, and rules that share a font-family name form a family:

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

Here you have one typeface, Source Sans 3, delivered as three fonts. The browser downloads each file only when the page actually uses that combination of weight and style.

For a variable font, a single rule can cover a range of weights:

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

The font-weight: 200 900 range tells the browser that any weight in that span can come from this one file.

Why the Distinction Matters in Practice

Most conversations don't need precise terminology. But there are a few situations where mixing up the two causes real problems.

Licensing

Commercial licences are often sold per font, not per typeface. Buying "Brandon Grotesque Regular" doesn't give you the bold or the italic. If you're quoted a price for "the font", check whether it covers the whole family or a single style. Free typefaces from Google Fonts and similar libraries are usually released under the SIL Open Font License, which covers every style in the family, but commercial foundries vary.

Faux Bold and Faux Italic

If you ask for a weight or style that hasn't been loaded, browsers synthesise one. They thicken the regular font to fake a bold, or slant it to fake an italic. The results are usually clumsy: letters smear together, and a fake italic is just a slanted roman, missing the distinct letter shapes that a true italic has.

You can stop the browser doing this with font-synthesis:

body {
  font-family: "Source Sans 3", sans-serif;
  /* Never fake bold or italic; fall back to the real regular style instead */
  font-synthesis: none;
}

This is useful during development to reveal missing font files. In production, it's better to load the styles you need, or to accept that the regular style will appear where a missing style was requested.

Communicating With Designers

A designer who says "use the bold font for the button" usually means a specific weight of the existing typeface, not a different design. A developer who hears "font" as "typeface" might go looking for a new family. Asking "which weight and style?" avoids a lot of confusion.

Performance

Each font in a family is typically a separate download. Choosing a typeface doesn't cost much on its own; choosing six fonts from it does. Thinking in terms of fonts, the actual files, helps you keep track of how much you're shipping:

ls -lh public/fonts/

-rw-r--r--  1 dev  staff    47K  source-sans-3-regular.woff2
-rw-r--r--  1 dev  staff    51K  source-sans-3-italic.woff2
-rw-r--r--  1 dev  staff    48K  source-sans-3-semibold.woff2

Three fonts, roughly 146 KB in total, all from one typeface. Dropping the italic, or switching to a variable file, would change that number.

Finding Out Which Font Is Actually Rendering

Because CSS asks for a family and lets the browser pick, it's not always obvious which font ends up on screen. A fallback might be showing instead of your web font, or a synthesised bold might be standing in for a missing weight.

In Chrome or Edge:

1. Right-click some text and choose Inspect.
2. Open the Computed tab in the Elements panel.
3. Scroll to the bottom to the Rendered Fonts section.

It lists the actual font used, for example "Source Sans 3 Semibold — Network resource (12 glyphs)". In Firefox, the Fonts tab in the Inspector shows similar information, including which fonts are used and where they were loaded from.

You can also check whether a font has finished loading from the browser console using the CSS Font Loading API:

document.fonts.ready.then(() => {
  const loaded = [...document.fonts]
    .filter((face) => face.status === "loaded")
    .map((face) => `${face.family} ${face.weight} ${face.style}`);
  console.log(loaded);
});

["Source Sans 3 400 normal", "Source Sans 3 600 normal"]

That output shows two fonts from one typeface have loaded. If the italic is missing from the list, any italic text on the page is either synthesised or using a fallback.

Common Misuses of the Terms

A few phrases are technically loose but so common that nobody will misunderstand them:

• "What font is this?": Usually means "what typeface is this?", and that's fine.
• "Font library": Usually means a collection of typefaces.
• "Change the font": Could mean change the typeface or change the weight. Ask.

The places where precision pays off are contracts, licences, design specifications and code. In a specification, write "Inter, Semibold 600, 18px" rather than "the semibold font", and you'll avoid ambiguity.

---

FAQ: Typeface vs Font

---

Conclusion

A typeface is the design, and a font is a specific weight and style of that design, which in digital terms usually means one file. Font families group all the fonts of a typeface, and variable fonts fold many of them into a single file. CSS uses the word "font" loosely, but its model matches the distinction: font-family names the typeface, and weight and style select the font.

You don't need to correct anyone who says "font" when they mean "typeface". The distinction earns its keep when you're buying licences, writing @font-face rules, checking what you're shipping, or working out why the browser is faking a bold. In those moments, thinking in terms of individual fonts will save you time and money.