Last week I showed you the 3 key rules of choosing the right fonts for your brand. This week, I’m still talking about typography, but we go one step further. We’ll talk about an important and often ignored step in brand identity design: defining your brand typography system.

But what is a brand typography system? – you might ask.

WHAT IS A BRAND TYPOGRAPHY SYSTEM?

Have you ever flipped through a magazine and figured out the discussed topics within just seconds? Have you ever scrolled through a blog post and got your answers immediately even if you didn’t read the entire post?

This all happened because the editor/designer of that given magazine or blog post put a big emphasize on setting up the right typography layout. And you can do the same when you define your brand typography system.

Your brand typography system defines the hierarchy for the different text categories you use in your content, therefore helps your audience reading & digesting it easier.

This hierarchy must be present in your long-form written content (blog copy, sales page copy, e-books) by the right formatting of:

Titles
Headings (H1, H2, H3, etc)
Pull quotes
Regular paragraphs

This hierarchy should also be present on your website by the right formatting of:

Navigation text
Footer text
Titles on slides
Comment section text
Sidebar widget headers

No matter if you work on your website, a blog post or a downloadable workbook, you will need to set metrics for these texts. Your brand typography system will help you do this in a consistent manner. This consistency is key for establishing a recognizable visual identity.

HOW TO BUILD AN EFFECTIVE & STUNNING BRAND TYPOGRAPHY SYSTEM?

STEP 1 – CHOOSE UP TO 2 FONTS

No joke, you shouldn’t pick more than 2. I know this is a hard to follow rule, but more fonts won’t make your content better. They will actually be distracting and result in a crowded, not optimized look.

Picking only 2 fonts can be a tough process. I recommend you pick those font families that have many font styles (e.g. light, regular, medium, bold, extra-bold). These font families will give you more flexibility while also look well together.

For my 3 tips on choosing the right font for your brand, read this article.

Extra Tip: if you want to make sure that your website is consistent with other content you create, choose fonts that you can easily add to your website. Many WordPress themes allows you to choose from Google Fonts or to upload your own webfonts. Webfont files are not the same as regular font files you install on your computer. When you purchase fonts, always make sure that the webfont versions are also available.

STEP 2 – DEFINE WHAT TEXT CATEGORIES YOUR TYPOGRAPHY SYSTEM MUST COVER

After you decide on which fonts to use, you must define the headings, paragraphs and other layers of the text hierarchy that you use most often.

For example, in my case I use H1, H2, H3 across all of my content (blog posts, website pages, workbooks, etc) but I rarely need H4, H5 and H6 headings.

Also, I don’t have a complex footer area, so in WordPress I didn’t define anything specific for “footer headers” in the typography settings of my theme. But I put content in the sidebars, so I had to define the sidebar headers.

Go through your blog posts, your other content and your website and make a list of the text categories (headings and other text types) you must define in your brand typography system.

List these categories in order of a hierarchy that helps guide the readers’ eyes. For me this list was:

STEP 3 – CHOOSE A DESIGN APP

Take your favorite design or text editor app. Choose one that you use often to create content for digital or print use. Some options I will cover in this article:

Photoshop or Illustrator
Canva
Word
Pages

STEP 4 – DESIGN EACH OF YOUR TEXT CATEGORIES

When your app is open, start writing out some text for each category like this:

Then start editing each category. You’ll need to define:

Font name
Font style
Font capitalization (e.g. all caps, small caps)
Font size
Tracking (distance between 2 characters)
Leading (distance between 2 rows of text)

You can define some more specific metrics too (e.g. distance before/after paragraph) but the above ones are the most important.

You’ll end up with something like this:

For the best results here are some additional tips for the design process.

TIP 1 - START FROM THE BASIC PARAGRAPH

You most likely have to define the typography style for your basic paragraphs.

See if it’s easily readable. If not, adjust:

The font size, to make the characters bigger
The leading, to make more space between two lines of copy
The tracking, to make more space between characters

TIP 2 – SCALE UP & USE THE POWER OF MATH

When you designed the text for your basic paragraphs, you can start scaling up to higher level of texts, for example the headings.

When you do this, you can use the power of math.

Not really a mathematics fan? No worries. It’s really simple, just look at this example:

TIP 3 – KEEP IT SIMPLE

No need to overcomplicate things. This is especially true when it comes to your website typography settings.

Here you can have a dozen of text categories, like navigation menu text, widget area header text, etc.

These areas can be based on the same categories that you’ve already defined.

For example, on my website, the main navigation menu is the same font, same size as my regular paragraphs. The only difference is that my navigation menu is all caps.

TIP 4 – BUILD HIERARCHY

Don’t forget that the purpose of your brand typography system is to establish a visual hierarchy in your written content. If your WordPress theme offers you more categories than just the regular H1, H2, H3… headings make sure to size and format them by importance.

Make the more important texts bigger, bolder, all caps.

Make the less important text smaller, lighter, small caps.

TIP 5 – A NOTE ABOUT MOBILE SCREENS

When defining the text styles for your website elements, some WordPress themes and plugins let you make different settings for desktop and mobile view.

I use Thrive Architect when building my pages. Thrive Architect lets you create different settings for desktop and mobile screens. I noticed that sometimes a text that looks good on desktop is way too big on mobile screens. So for some elements I set different sizes depending on the screen.

Now, this is an advanced setting and not many WordPress theme makes it possible, so don’t worry if you can’t set it.

TIP 6 – ALL CAPS FOR SHORT TEXT

Last but not least, a final tip on the use of capitalized text: apply this sparingly, because all caps text is harder to read when it’s long. Use all caps for short headings, buttons, etc. Never use it for full paragraph text. Even if it looks cool first, it will be harder for your audience to read your copy.

STEP 5 – GATHER & RECORD THE KEY METRICS

Now that you designed all categories of your brand typography system, it’s time to record all the metrics in an easily reachable place.

The best way to do this is to make a cheat sheet for yourself.

To make this easier for you, I created a freebie, the Brand Typography System Cheat Sheet Creator. You can fill it with all the metrics and then keep it at hand for future referencing.

HOW TO GET THESE METRICS?

It depends on what design tool you used.

In Adobe tools like Photoshop or Illustrator, get the metrics from the Character Panel:

In Canva, click on the text and you’ll get the metrics in the top right corner.

In Word, you get it under the Home tab. To set the tracking you have to go to Format/Font and change the “spacing” under the advanced settings.

Extra tip: notice that depending on the tool you get these metrics from, there can be slight differences. For example, the Tracking in Illustrator has a different measurement than in Canva. When collecting the data, get it from the app that you’ll most likely use in the future, or create separate cheat sheets for each apps.

HOW TO FILL THE FREE CHEAT SHEET?

If you decide to use the free Brand Typography System Cheat Sheet Creator, here’s how to fill it:

1 - WRITE DOWN WHICH APP YOU GET THE METRICS FROM

2 - PUT A CHECKMARK TO WHAT PURPOSE THIS CHEAT SHEET IS FOR

All: you use the same metrics across all platforms (digital, mobile, printed)
Desktop: you use these metrics on your website, digital workbooks, social media posts, etc.
Mobile: you use these metrics on your website’s mobile view – only mark this if you intend to set your mobile view differently than your desktop
Print: You use these metrics on printed publications (posters, flyers, books)