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?
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
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
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
- additional secondary attributes = these dictate other aspects of the font beyond family and include
font-weight(bold, thin, book, 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.
Font Face = See above. This isn't really a typographic term outside of CSS's
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
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.