I am confused by the way these terms are used in the context of typography for web applications? Is there an accepted use of these terms and what is the difference when it comes to specifying the look and feel of the content on a webpage?


3 Answers 3


Type Family - You didn't mention this but it's important. The design of all the characters comprised of a family and all its encompassing faces. Helvetica is a type family. Helvetica Condensed is a type family, Myriad Pro is a type family, etc.

Typeface - the specific weight or instance of a particular family. I.E. Bold, italic, oblique are all typefaces. Typeface is generally referred to by family + face. For example Helvetica Bold Italic would be referred to as the typeface where Helvetica is the Family and Bold Italic is the face.

Font - Refers to the computer software file which contains information regarding the display and output of a typeface. You choose a font from the typeface menu. Fonts only exist on a computer. In the world today many use the word "Font" incorrectly -- "oh, I like that font." is wrong. It should be "Oh, I like that typeface." However, "Which font did you pick for that Photoshop design?" would be correct. Whereas, "What font is used in this logo?" is incorrect (should be typeface).

Font Face - (somewhat interchangeable with typeface) the face of the type family. For example Bold or Italic are a face where as Helvetica would be the family. Referencing "font", font face specifically refers to the software used to render a particular face of a family - You may have Helvetica bold as a font face, but not Helvetica italic.

  • You had me up until typeface and then Font and Font Face confused me as they seem the same as Typeface
    – SaturnsEye
    Jul 9, 2014 at 7:36
  • 1
    @SaturnsEye "Font" is the file. "Font face" is a variant of the original file (bold) the way "typeface" is a variant of the original type. Same idea, different medium. Jul 9, 2014 at 10:11
  • @LaurenIpsum Hmm yea I understand it when I think about it. I think it's just that I've always said Font instead of Typeface as I've grown up so it feels strange to say otherwise :S
    – SaturnsEye
    Jul 9, 2014 at 10:26
  • @SaturnsEye It's a reasonably new development as terminology goes, so don't feel bad. I think it's also a bit nitpicky among designers; 95% of everyone else uses the terms interchangeably. We're sort of trying to insist on the new definition/demarcation for our purposes and dragging the rest of the world along. Jul 9, 2014 at 11:02
  • @LaurenIpsum I don't feel so bad now haha :)
    – SaturnsEye
    Jul 9, 2014 at 11:46

Is there an accepted use of these terms in the context of typography for web?


The only web-centric terms would be those dedicated to CSS styles which would include:

  • font-family = either a specific or generic name for a computer font (digital file). Specific names would be something like Helvetica. Generic names would be something like monospace. As for style (italics, etc) weight (bold, etc) and such, these are all set via different CSS styles.
  • @font-face = a way to load a digital font file and then refer to said font-file via CSS's font-family
  • additional secondary attributes = these dictate other aspects of the font beyond family and includefont-weight (bold, thin, book, etc), font-style (italics, etc), font-size (12pt, 40px, etc), text-transform (allcaps, etc), and others.

As for the terms you mention, these are all somewhat vague and have no universally agreed upon specific definition.

Broadly speaking:

  • Font Face = See above. This isn't really a typographic term outside of CSS's @font-face

  • typeface vs. font = this is where things get really vague. Traditionally, a typeface was a particular style of lettering. So, for example, Futura. Font was a specific cut of said typeface. By cut, that is in the literal sense in that it was either cut from wood, or metal (or cast in metal). So Futura would be a typeface and Futura Bold 12pt would be a particular font.

When it came to the digital world, the terms began to become much less specific. One could argue that typeface refers to the 'design' and font refers to the 'code' these days, but there's no hard-and-fast rule regarding that.

The bottom line: Typographic terms, in general, have fuzzy definitions and the team at the W3C that created CSS styles and attributes didn't necessarily come from typographic backgrounds when they came up with their terms and definitions.


Since you're asking about web specifically: no, there's no wide consensus on the definition of these terms. Generally, all of those three terms are interchangeable and interchanged, but there are occasionally minor differences in meaning.

By a font, we may understand a collection of symbols whose appearance is given by CSS – that is properties such as font-family, font-size, font-style, font-weight, color etc. A typeface is a collection of glyphs of certain design, it can be set using the font-family property. Font face is, as far as I can tell, a recent term that came to existence in relation to CSS. In comparison, the first two terms are somewhat older – font dating to the 17th century and typeface to the 19th.

In the more professional typographic circles, the definitions seem to be distinct and slightly clearer. As Mark Simonson put it:

You've got a collection of letters, numbers, symbols, etc. that can be used together to form words, paragraphs, tables, etc.

The physical embodiment of such a collection (whether it's a case of metal pieces or a computer file) is a font.

When referring to the design of the collection (the way it looks) you call it a typeface.

A typeface family or font family refers to a related collection of typefaces or fonts.

See also the whole thread and a related discussion on Typophile.

Not the answer you're looking for? Browse other questions tagged or ask your own question.