What is the Difference Between a Font and a Typeface?

When you start to build your business’ brand and website, one of the things you’ll need to choose are the fonts or typefaces you want to use.

What is the difference between a font and a typeface?

The words “typeface” and “font” are often used interchangeably. It is difficult to understand the nuance of how they are different. A typeface is the actual design of the various characters of a typeface created by a type designer. Another phrase used for “typeface” is “type family.”

A “font” is one weight and one style of that type family.

Let’s take a look at two Google Fonts, Open Sans and PT Sans Narrow.

Open Sans has five different weights within its type family – 300 (light) to 800 (extra-bold). It has also a variation of the italic style with its type family. You can see examples of this in the image below or live on the Google Fonts website.

Open Sans” is the typeface. “Open Sans light(300)” is one font within that type family. “Open Sans normal (400) italic” is yet another.

Let’s take a look at another Google Font, PT Sans NarrowPT Sans Narrow is the type family or typeface. But it only has two weights (normal and bold) and no italic style in its type family.

This is important to understand when choosing the fonts you want to use for your business’ branding and on your website. The font you want to use in must be available in the type family if you want your text to display properly online and in print media.

How do you set the properties of text on a website?

On the web, how the actual text is displayed on a website is determined by the different properties declared in the CSS (Cascading Style Sheet). The CSS style sheet tells the web browser how to display the typeface using various font declarations. Below is an example of a font declaration.

font: italic light 18px “Open Sans”, sans-serif;

The above font declaration tells the browser to display the text using “Open Sans” at 18 pixels using the font weight of light (or 300) using the italic style. Just a side note: the “sans-serif” attribute is just the fallback in case Open Sans can not be loaded.

font: italic light 18px “PT Sans Narrow, sans-serif;

The above font properties for the typeface “PT Sans Narrow” are written the same as they were for “Open Sans.” But there is one problem – actually two problems.

The PT Sans Narrow type family does not have the font weight light (300), nor does it have the italic style. (See the image above of the different fonts within the PT Sans Narrow type family).

So although text assigned that font declaration would display using the PT Sans Narrow typeface, it would not display in the style or weight declared (italic / light) because they do not exist. More than likely the text would default to displaying in normal weight (400) and normal style (not italic). Or, it might attempt to display the content “slanted.” But “slanted” is not the same as an italic font style.

So, when you set about to choose the different fonts for your brand, make certain the actual font exists! This isn’t a difficult rule to understand but one that can completely affect the way your website looks if it’s not understood or applied properly.

Share this:

Leave a Comment