Typeface

The distinction is inherited from metal type, where it was physical. A typeface was the design: Garamond, the shapes a punchcutter drew. A font was a case of sorts, one size and one style of that design, cast in lead and owned by the printer. Ordering more of the same typeface at a different size meant buying another font, because a font was a countable thing sitting in a drawer. Nothing survives of the lead, but the vocabulary does, and it is still the reason the two words are not interchangeable to anyone who sets type for a living.

On the web the file took the drawer’s place. Georgia is a typeface; Georgia Bold Italic at 18px is a font. A variable font is the interesting case, since one file carries a continuous range of weights and widths and therefore an unbounded number of fonts, which is exactly why the distinction still earns its keep: you cannot count the fonts in the file, but you can name the typeface. CSS keeps the older word in font-family, and what that property takes is a list of typeface names, not files, resolved against whatever is installed or loaded. Picking one entry from that list is what a font stack is about.

In casual use “font” has swallowed “typeface” almost completely, and correcting people is rarely worth it. Where it does matter is precision with a tool or a supplier: a foundry licence covers a family, a @font-face rule loads one file per style, and asking a colleague to “use the bold font” is unambiguous in a way that “use the bold typeface” is not. Related words carve the same territory finer: a family is the whole set of styles designed together, a style is one variant inside it (roman, italic, condensed), and a weight is one axis those variants differ along.

Choosing a typeface is choosing everything downstream of it, which is why the choice is worth making before the sizes are. The class the design belongs to (serif, sans-serif, monospace) sets the register, and its internal proportions, especially x-height, decide what your declared sizes will actually look like. Swap the typeface late and the type scale usually has to be re-picked with it.