What is the Difference Between a Font and a Typeface?

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.

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 FontsOpen 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 for a total for 10 different styles or variants within the type family. You can see examples of this in the image below or live on the Google Fonts website.

Open Sans” is the name of the typeface or type family. “Open Sans Light (300)” is one font within that type family or typeface. “Open Sans Regular (400) italic” is 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 must be available in the type family you choose if you want your text to display properly.

PT Sans Narrow Type face
How do you set the properties of text on a website?

I talked about the WordPress Customizer in my last blog post that explained how to use Google’s web fonts to change the way text is displayed on your website.

So the first thing you’re going to need to do is select a font or set of fonts you want to use on your website. Typically you should use no more than three type families to display the various text on your site. 

Many people will choose a different type family for the Header text and the paragraph text. But you don’t have to. You can use the same typeface for both.

A third font family can be chosen to display text that is highlighted or special in some way. For example, the text that is used for blockquotes or sub-titles is a good example.

The reason why 3 typefaces is the MAXIMUM you should choose is because the more font families and fonts you choose to load on your website, the slower your site can become.

To select a typeface and the various font styles for your website, use the WordPress Customizer.

In the example shown below, I’ve chosen the “Open Sans” typeface from the Customizer. Notice how all 10 variations of that typeface load.

If I choose a second typeface for my header text and titles, in this example I’ve chosen “Playfair Display.” It loads 6 variations of the typeface.

If I don’t narrow down my selection of fonts or typeface variations, a total of 16 fonts must load on this website every time someone visits a page. Trust me. THAT’S A LOT OF FONTS!

The problem is, I probably won’t ever use most of them when I write and style my content. So the smart thing to do is CHOOSE the font variants I need to display my text, and delete the rest so all 16 don’t load.

To delete a font variant, simply click on the little “x” to the left of the variant name.

How do you decide which ones you’ll need? There is no right or wrong answer. I generally need a few more typeface variants for my paragraph text than I do for my headers and titles.

Paragraph text will typically use either a 300 or 400 weight for most text. Try to choose only one of these weights, not both.

Then I’ll usually need an italic version of that weight, a “bold” weight of the typeface, and an italic version of the bold weight. That’s a total of only four (4) typeface variants for my paragraph text as opposed to the original ten (10).

For my headers and titles, I typically only choose one font weight, and an italicized version of that weight for a total of only two (2) typeface variations.

Take a look at the edited fonts shown below. My website will now only load six (6) font variants as opposed to the original sixteen (16) when someone visits my website. 

 

If you’re unclear what those numbers mean for the WEIGHT of each font, take a look at the image below. Not all typefaces will have all the weights in the font family. Some may only have one (1) weight. 

But in general, font weights can range from 100 to 900. 100 is the thinnest weight, and 900 is the boldest. 

The image below are the different weights and styles for the very popular Google Font called Raleway

100 or Thin weight is the thinnest font, and 900 or Black is the thickest.

An Important Reminder Before I Close

Don’t forget that if a font style or variant doesn’t exist, or you don’t choose it from the Customizer to load from Google’s web server – you must choose the correct font weight(s) and style in order for the text to display as you intend.

Setting up your Customizer determines which fonts will load on your webpage in order to display the text.

When you create your blog posts and pages, you have to STYLE the text by choosing the weight of the font and whether or not you want text to display in italics.

If, in the example above, I’ve chosen the weights of 400 (regular) and 600 (semi-bold) to load for my paragraph text, but in my text editor I accidentally choose 900 (Black) to style the text, the text may not display on my webpage as I intended. More than likely it will simply display in one of the font variants I did choose from Customizer. Or, if the person visiting my webpage has that typeface and weight installed on their computer, it WILL display as intended, but not for anyone else.

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

Share Post
Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on pocket
Share on email
Affiliate Links

One or more links on this page may be an affiliate link. What does that mean? At no additional cost to you, I will earn a small commission should you click on one of the affiliate links and purchase the product or service. 

Take the Brand Personality Quiz

Discover your brand archetype and how you can use its power to your strengthen your online presence