Typography is so important in branding (and graphic design in general). I know colours, patterns, pictures and logos are fun to design and look at… but never forget that the purpose of graphic design is to communicate. While images are incredibly powerful in helping us do that, at the end of the day, we can’t ignore the words themselves. The text that carries the messages we want to send.
So, never overlook the design of your type!
In this post, I’m sharing some tips for creating a beautiful typographic hierarchy so you can make sure your text capturing your reader’s attention and being read in the correct order. Use the typographic hierarchy you create everywhere from your website to your marketing material to client documents.
Not sure what I mean by “typographic hierarchy”? Check out this post for an explanation.
1. Start with your logo
Your logo is what defines the rest of your brand identity. That includes which typefaces you should use. As you choose your typefaces and create your typographic hierarchy, I highly suggest having your logo on the same screen. That way, you can see how they look together and make sure the text complements the logo.
Also read: Logo design tips to help you come up with strong ideas
2. Choose your heading type
Most of the time, your heading is what you want people to notice and read first. So that’s where I like to start when creating a typographic hierarchy.
Choose a typeface that looks good with your logo. Something that complements the logo’s design and sets the same overall tone. Although not a hard-and-fast rule, I generally avoid using the same typeface for my headings as I use in logo text. The reason for that is that I don’t want the text to blend together. The logo should always stand out, and not get lost with the rest of your layout designs.
I also suggest that you use a clean, highly readable typeface for your headings. The reason? Well, sometimes you will have long headings and you don’t want to make your readers work too hard to understand what you’re saying. If you use a typeface that is very ornate or highly textured, it can take extra effort to read. You don’t want to make your readers work too hard to read your copy. Otherwise, they’re more likely to simply avoid it altogether.
3. Style your heading type
Once you’ve chosen a typeface that looks good with your logo, sets the right tone and is easy to read, let’s look at some styling options. This is how you can take a regular typeface and start to make something more “ownable”. By setting your text in the same format every time, you create a consistent image that becomes as recognisable as your logo.
Here are some options to play with:
- all uppercase
- all lowercase
- title case
- bold
- italics
- underlines
- letter spacing (i.e. tracking, if you want to get technical)
- line height (i.e. leading — this is the vertical spacing between lines of text)
- colour
- size
4. Make a font pair
Now that you’ve chosen your heading type, it’s time to pair it with a typeface for your body text. Making nice combinations of typefaces is a whole topic on its own, but in this post I’m going to keep it simple.
The key to good type design is contrast. An easy way to do this with your font pairing is to pair a serif typeface with a sans-serif. Serifs are the typefaces with the little hats and feet on the letterforms. Think Times New Roman. Arial and Helvetica are examples of sans-serifs.
If you’ve chosen a sans-serif for your heading type, try pairing it with a serif body type. Or vice versa. Again, you want your body text to be highly readable. Test it out with a few paragraphs and make sure your choice is comfortable on the eyes. Nothing too ornate or distracting.
5. Build out the other main elements of your typographic hierarchy
At this point you have two typefaces to work with. And you know what? Usually this is all you need to create beautiful design work. Each level of your typographic hierarchy doesn’t need its own typeface — that’ll only end up looking chaotic and messy.
Instead, use different styling options to create contrast between your headings, sub-headings, body text etc. You’ll also want to use size to create contrast between the different levels.
At a minimum, you’ll want to set a typeface and its styling for:
- heading
- sub-heading
- body text
- hyperlinks (for websites)
6. Choose your display text
If you want to get even more creating and give your designs some additional levels of hierarchy to play with, there’s plenty of other options to consider.
One I like to include is display text. “Display text” is the term I use to describe a level above headings. The purpose of this text is to set the tone of a layout by being big and dramatic. It’s usually intended to be more of a design element than an important piece of text to read.
For that reason, this is where you can choose to be more adventurous with your typeface choice. You can choose something really elaborate or gritty. Maybe a handwritten script font. Just be sure not to overuse your display text. The trick is not to overuse your display text. A really dramatic typeface is most effective when its use on only one or two words at a time.
7. Add your new typographic hierarchy to your style guide
Like all your design elements (logo, brand colours, image styling) your brand typography should be outlined in a style guide. That way, you have a document that you (and your team or any contractors you hire) can reference any time. It helps to make sure you stay consistent with your visual branding and can remember exactly how to use your chosen typefaces!
Also read: What all style guides should include in detail
Last thoughts
Last thoughtsOkay, at this point you’ve done the work and should have a beautiful typographic hierarchy that you can apply to all the text layouts in your business. Use it to keep that important level of consistency in your brand’s visuals and make all your work look polished and professional.
One last piece of advice though? Don’t be afraid of mixing it up now and then to keep things fresh. Maybe add a bit of your display text typeface to a word of your headings for emphasis. Write a whole paragraph in your subheading type. Test it out and see what kind of new designs you can create.
LOOKING FOR MORE CONTENT? TRY THESE!
Very helpful information, As a typographic designer, this article is so helpful for me. Font pairing is the most likely section for me. Thank you for sharing this typeface.