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:
Headings (H1, H2, H3, etc)
This hierarchy should also be present on your website by the right formatting of:
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.
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
STEP 4 – DESIGN EACH OF YOUR TEXT CATEGORIES
start editing each category. You’ll need to define:
Font capitalization (e.g. all caps, small caps)
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.