web typography study guide

Typeface vs. Font

The terms typeface and font often are confused. Here are some explanations of the differences between the two.

Typeface

A typeface is a design created by a typographer or type designer. It incorporates the specific letter-forms that include the variations of stroke weight, the forms of serifs, the counter shapes, the finial styles, the lengths of ascenders and descenders, and any other characteristics that differ from one type design to another.

Designers choose typefaces to create their projects. Each typeface is known by a name, such as Helvetica, Arial, Times New Roman, etc. The term “typeface” originated from movable type, whose blocks of wood or metal each contain a relief image of a character on one surface (the “face”).

Font

A font is the digital representation of a typeface. It is a collection of all the characters of a typeface in one size (12pt/1in) and one style (bold/italic). For example, Arial in 12pt size is a font, Arial in 18pt size is a font, and Arial bold in 24pt is also a font. Adobe's type glossary lists a font as “one weight, width, and style of a typeface.”

Type Family

The complete assembly of all sizes and styles of one typeface forms a type family. Web designers sometimes refer to it as a “font family” because that is the name of the CSS declaration. Usually the type family has the same name as the typeface. A type family may contain many variations, but all variations are based on common design characteristics. For example, the Caslon family consists of styles such as Roman (Regular), Italic, Semibold, Semibold Italic, Bold, and Bold Italic. Each of the style and weight combinations is a typeface, and together they form a type family.