Search

Define your brand typography system

Updated: Apr 25

Define your brand typography system.


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:

  1. Titles

  2. Headings (H1, H2, H3, etc)

  3. Pull quotes​

  4. Regular paragraphs

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

  6. Navigation text

  7. Footer text

  8. Titles on slides

  9. Comment section text

  10. 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.


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.


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 

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.




#Typography

0 views

Let's Connect

Get The Next Diploma's Details 

© 2023 by Shahenda Abdelrazek. Proudly created with Wix.com