Typeface vs. Font: What's the Difference?

A client emails you: "Can we change the font on the blog to something bolder?" Do they want a different typeface entirely, or just the bold weight of the one you already use? A designer hands off a spec listing "Inter" and you install a single file, only to find the headings rendering in a synthesized, smeared fake bold because the 700 weight was never loaded. Both problems come from the same confusion between two words that most people use interchangeably: typeface and font.

This article explains what each term means, where the distinction came from, how it maps directly onto CSS properties like font-family and @font-face, and the practical situations — licensing, loading, and design handoff — where getting it right saves you time and money.

The Short Answer

A typeface is the design: the shared visual identity of a set of letters, such as Helvetica, Garamond, or Inter. A font is a specific implementation of that design at a particular weight, style, and (historically) size — for example, Inter Bold Italic, or in metal-type days, 12-point Garamond Roman.

A common analogy: the typeface is the song, the font is the MP3 file of a specific recording. Or, more precisely for developers, the typeface is the class, and each font is an instance with specific property values.

Concept	Typeface	Font
What it is	A design	A specific member of that design
Example	Roboto	Roboto Medium Italic
Analogy	The song	One recording of the song
CSS equivalent	font-family: "Roboto"	One @font-face rule with a weight and style
On disk	A folder or family of files	A single .woff2, .ttf, or .otf file (static)
What you license	Usually sold and licensed as a family	Sometimes sold individually by weight

Where the Distinction Came From

The two words used to describe completely different physical things.

In metal type, a printer bought a font (from the French fonte, meaning "something melted" or "cast") as a physical case of metal sorts: every letter, number, and punctuation mark of one design, in one weight, at one size. If you wanted 10-point Caslon Roman, 10-point Caslon Italic, and 14-point Caslon Roman, you bought three fonts. Each one took up space in a drawer and cost money.

The typeface was the design that all those fonts shared. Caslon was the typeface; the drawers full of metal were the fonts.

When type moved to phototypesetting and then digital outlines, size stopped being a property of the file. A single digital font can be scaled to any size, so "12-point Garamond" and "48-point Garamond" became the same file. That collapsed one of the axes that distinguished fonts and made the words blur in everyday use. Desktop software then cemented the blur by putting a dropdown called "Font" in every word processor, listing typeface names.

The Related Terms You Will Run Into

Typeface and font are only two points in a small hierarchy. Knowing the rest makes design specs much easier to read.

• Type family (or font family): All the related styles of one typeface — Light, Regular, Medium, Bold, Black, and their italics. "Inter" in casual speech usually means the family. There is a dedicated post on what a type family is and how many weights you need.
• Superfamily: A larger system that combines related families, often across classifications. IBM Plex includes Plex Sans, Plex Serif, Plex Mono, and Plex Sans Condensed; Source has Source Sans, Source Serif, and Source Code.
• Style: A variation within a family, typically upright (roman) or italic, and sometimes oblique.
• Weight: The thickness of strokes, expressed in CSS as 100–900 (and anything in between for variable fonts).
• Width: Condensed, normal, or extended versions, expressed in CSS with font-stretch or font-width.
• Glyph: A single visual shape inside a font file — a letter, a ligature, an alternate form. See glyphs vs. characters.
• Font file: The actual binary — WOFF2, WOFF, TTF, or OTF.

Here is how they nest for a real family:

Superfamily: IBM Plex
└── Family / Typeface: IBM Plex Sans
    ├── Font: IBM Plex Sans Light        (weight 300, normal)
    ├── Font: IBM Plex Sans Regular      (weight 400, normal)
    ├── Font: IBM Plex Sans Italic       (weight 400, italic)
    ├── Font: IBM Plex Sans SemiBold     (weight 600, normal)
    └── Font: IBM Plex Sans Bold         (weight 700, normal)

How Variable Fonts Change the Picture

A variable font packs a whole range of weights (and often widths, slants, or optical sizes) into a single file. Inter's variable font covers every weight from 100 to 900 in one WOFF2 file. So is that one font or many?

Technically it is one font file containing a continuous design space. Each specific position in that space, like weight 650, is called an instance. Many variable fonts also define named instances (Regular, SemiBold, Bold) so apps can show them in a menu.

For practical purposes:

• When you talk about design, treat a variable font as a family.
• When you talk about loading and performance, treat it as one file.
• When you talk about licensing, read the licence — some foundries price variable files differently from static families.

The variable fonts overview goes deeper into axes and browser support.

How the Terms Map to CSS

CSS is where the typeface/font distinction stops being trivia and becomes code. The naming is confusing — almost everything is called font-* — but the model is exactly the typeface/font model.

font-family names a typeface (a family). Each @font-face rule defines one font: a specific file for a specific weight and style within that family.

/* Four fonts, one typeface */
@font-face {
  font-family: "Source Serif";
  src: url("/fonts/source-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

@font-face {
  font-family: "Source Serif";
  src: url("/fonts/source-serif-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Source Serif", Georgia, serif; /* the typeface */
}

strong {
  font-weight: 700; /* the browser picks the matching font */
}

em {
  font-style: italic; /* the browser picks the italic font */
}

When the browser needs bold italic text, it looks through every @font-face rule with font-family: "Source Serif" and runs the font matching algorithm to pick the closest weight and style. There is no bold italic file registered above, so it will choose the closest available and may synthesize the missing style.

For a variable font, a single rule describes a range:

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

Faux Bold and Faux Italic

If you request a weight or style that has no matching font, browsers will often fake it: smearing outlines to make faux bold or slanting upright letters to make faux italic. Both look noticeably worse than the real designs — faux italic in particular lacks the distinct letterforms (like the single-storey a) that true italics have.

You can turn synthesis off so missing fonts are obvious during development:

html {
  font-synthesis: none;
}

/* Or control each kind separately */
body {
  font-synthesis-weight: none;
  font-synthesis-style: none;
  font-synthesis-small-caps: none;
}

With synthesis off, a missing bold simply renders at the regular weight, which makes the gap easy to spot and fix by loading the right font.

In Next.js and Tailwind

With next/font, you declare the typeface once and list the fonts (weights and styles) you need. Static families need explicit weights; variable families do not.

// app/fonts.ts
import { Source_Serif_4, Inter } from "next/font/google";

// Variable typeface: one file covers all weights
export const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

// Request only the fonts you actually use
export const serif = Source_Serif_4({
  subsets: ["latin"],
  weight: ["400", "600"],
  style: ["normal", "italic"],
  variable: "--font-source-serif",
});

In Tailwind CSS v4, the typeface becomes a theme token, and weight utilities select the fonts within it:

@import "tailwindcss";

@theme {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-source-serif), Georgia, serif;
}

<h1 class="font-serif font-semibold">Typeface: serif. Font: SemiBold.</h1>

When the Difference Actually Matters

For casual conversation, nobody needs to correct a colleague who says "font" when they mean "typeface." But in four situations, precision pays off.

1. Licensing

Commercial typefaces are often sold per font or per style package. Buying "Brandon Grotesque Regular" does not give you Bold. If a spec calls for four weights and two italics, that may be six licences. Free families from Google Fonts are licensed under the SIL Open Font License as a whole family, but premium foundries frequently price by style. The font licensing guide covers how web licences are structured.

2. Performance

Every static font you register is a separate file the browser may download. A site that uses "just one typeface" with Light, Regular, Italic, Medium, SemiBold, Bold, and Black is actually loading up to seven fonts. Thinking in fonts, not typefaces, makes the performance cost visible.

Setup	Typefaces	Font files
Inter Regular + Bold	1	2
Inter Variable (upright + italic)	1	2
Merriweather 4 weights + 4 italics	1	8
Two families, 3 weights each	2	6

3. Design Handoff

"Use Montserrat" is not a complete spec. A useful handoff lists each role with family, weight, style, size, and line height:

Role	Typeface	Font (weight/style)	Size	Line height
H1	Montserrat	700 normal	3rem	1.1
Body	Montserrat	400 normal	1.125rem	1.6
Emphasis	Montserrat	400 italic	inherit	inherit
Button	Montserrat	600 normal	1rem	1.2

This tells the developer exactly which fonts to load, and nothing more.

4. Debugging Rendering Issues

When text "looks wrong," the question is often "which font is the browser actually using?" In Chrome or Edge DevTools, select an element, open the Computed panel, and scroll to Rendered Fonts. Firefox shows the same under the Fonts tab in the Inspector. You will see the exact font file in use — and whether it is your web font, a fallback, or a synthesized style.

Typeface vs. Font FAQ

Conclusion

A typeface is a design; a font is a specific weight and style of that design, usually delivered as one file. The distinction began with physical metal type, blurred with digital scaling, and blurred further with variable fonts — but it maps cleanly onto how CSS works, with font-family naming the typeface and each @font-face rule defining a font.

You do not need to police the words in conversation. You do need to think in fonts when you license, load, and spec type, because that is where the costs and bugs live. Count the files, request only the weights you use, disable font synthesis while developing, and write handoff specs that name the weight and style for every role.

Here are some useful references for going deeper on typefaces and fonts:

1. Google Fonts Knowledge: Glossary — concise definitions of font, typeface, family, and related terms.
2. MDN Web Docs: @font-face — descriptors for registering individual fonts under a family name.
3. MDN Web Docs: font-synthesis — controlling faux bold, italic, and small caps.
4. W3C: CSS Fonts Module Level 4 — the font matching algorithm and variable font descriptors.
5. Butterick's Practical Typography: What is good typography? — a practical perspective on why typeface choice and use matter.