: Difference between font face, typeface, font in the context of typography? I am confused by the way these terms are used in the context of typography for web applications? Is there an accepted

@Merenda852

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.

Vote Up Vote Down

@Holmes874

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


No.

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.

Vote Up Vote Down

@Nimeshi706

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.

Vote Up Vote Down