Font vs typeface

A typeface is the design: the shapes its letters share, whatever their size or weight. A font is one concrete form of it. In metal type a font was a set of type in one size, weight and style: 12-point Garamond italic was one font, 14-point Garamond italic another. The word comes from the Middle French fonte, for the casting of metal type at a type foundry.

The typographer Nick Sherman compares the two to a song and an MP3: the typeface is the song, the font is the file you play it from. When you like how a text looks, you like its typeface; when you install, license or send something, it is a font.

A family gathers the fonts of one typeface: regular, italic, bold and bold italic at least, and often a range of weights from thin to black. Roboto, one of the most used families on Google Fonts, names 36 fonts: nine weights from Thin to Black, in a normal and a condensed width, each upright and italic. The board above sets every one.

Related designs can share a name and still be typefaces of their own, with fonts of their own: Roboto Slab and Roboto Mono belong to Roboto’s wider family, but their letters are drawn differently.

Usually. A static family ships one file per font: Lato comes from Google Fonts as 18 files, from Lato-Thin.ttf to Lato-BlackItalic.ttf. A variable font holds a whole range in one file: Roboto’s 36 fonts come in two, Roboto[wdth,wght].ttf for the upright styles and Roboto-Italic[wdth,wght].ttf for the italics.

The file’s format is a container, not a design: the same font can come as a .ttf, an .otf or a .woff2, and look the same in each. TTF vs OTF and WOFF vs WOFF2 explain the containers.

Typeface when the design is the point: Garamond is an old-style typeface, and Arial and Helvetica are two typefaces with the same widths. Font when you mean one style or one file: install the bold font, upload the font file, which font is that heading in?

In software and in everyday speech the two words are now used interchangeably, and nobody minds. The one place to be exact is a licence: commercial families are sold style by style, so a licence for one font of a typeface does not cover the others.

• Typeface: the design. Roboto.
• Font: one weight and style of it. Roboto Bold Italic.
• Font family: all of its fonts. Roboto’s 36.
• Font file: what you install. Roboto-Italic[wdth,wght].ttf holds 18 of them.

• Rounds 04, 10
  The balance test: Odd one out

  Four typefaces draw the same letter and three are built alike. Telling typefaces apart starts with one letter.

• Sans serif
  Roboto

  Sans · 36 fonts in two variable files

• Sans serif
  Lato

  Sans · 18 fonts, a file each

• Serif
  Roboto Slab

  Serif · Roboto’s slab-serif relative, a typeface of its own

• Serif
  EB Garamond

  Serif · one of many typefaces called Garamond

Is Arial a font or a typeface?

Both, depending on what you mean. Arial is a typeface, the design Monotype drew in 1982; Arial Bold is one of its fonts, and Arialbd.ttf is the file Windows installs for it.

What is the difference between a font and a font family?

A font family is all the fonts of one typeface: Roboto’s holds 36, from Thin to Black, normal and condensed, upright and italic. A font is one of them, such as Roboto Condensed Bold.

Where does the word font come from?

From the Middle French fonte, for the casting of metal type at a type foundry: a font was the set of letters cast in one size and style.

Is it wrong to say font when you mean typeface?

Not in everyday speech: the two words are used interchangeably for computer fonts. Say typeface when the design itself is the point, and font for one style or one file.

1. Wikipedia: Font
2. Letterform Archive: Fonts and typefaces
3. ISO50: Font or typeface? (2009), quoting Nick Sherman
4. Microsoft: Windows 11 font list
5. Google Fonts: Roboto

• Kerning
  Drag a letter into place, then see how the typeface spaces the pair.
• Ligatures
  Switch ligatures on and off in real fonts, from fi to code arrows.
• Glyphs
  One character, 24 glyphs: see what a font actually draws.
• Serif vs sans serif
  The same letters in both, measured: serifs, contrast and when to use each.
• Types of fonts
  Five kinds of fonts and the styles inside each, in free fonts you can open.
• Font anatomy
  Pick a part of a letter to light it up, from the x-height to the overshoot.
• TTF vs OTF
  Quadratic or cubic curves: what a .ttf and an .otf hold, and which to use.
• WOFF vs WOFF2
  The same font packed for the web: six popular fonts weighed in each format.

Every lesson