Your Guide to Brand Typography and Hierarchy
Believe it or not, a color palette isn't the most important asset of your brand—it’s your font.
Your font quickly communicates your brand’s identity and individuality. If your logo can't stand on its own without a creative element (i.e., hand-drawn flower), then it's not a strong brand identity.
So, where do you start?
An Intro to Typography and Font Hierarchy
Selecting the right font for your logo can be a tough decision, especially when you have no idea how to pair multiple fonts that look good together. Consider this blog your crash course.
Have you ever heard the terms "typographic hierarchy" or "font hierarchy" and thought it was just designer lingo? In this article, I break down what typographic hierarchy means in layman's terms.
If you're changing your brand font selections every five minutes—in the most sincere tone—please, stop that.
I'm going to show you how to stop falling down the rabbit hole of new fonts on Creative Market, understand typographic hierarchy, and how to use it effectively.
First, let's review some terms.
What’s the Difference Between Font and Typeface?
To understand type hierarchy, let’s break down the difference between typeface and font.
To best illustrate the differences, think of Times Roman Numeral (the 12pt font your college professor made you use when writing papers).
Times Roman Numeral is a typeface that you can bold, italicize, ENLARGE, shrink, etc. while stylistic variations within each typeface are called "fonts."
Typefaces
Typefaces or "font families" refer to the overarching design that characterizes a particular style of lettering, which contains a collection of fonts.
Fonts
Fonts are the stylistic variations within a particular typeface such as weight and size.
One cannot exist without the other.
Serif vs. Sans Serif: What’s the Difference?
Here's a FAQ you may have: What is the difference between serif and sans serif fonts?
Serif
Times New Roman is what's called a "serif" font. Along with Garamond, Baskerville, Playfair Display, and a slew of others.
All of these typefaces have extending features (or "feet") on the ends of each letter, making them look elegant when italicized. Serif fonts are typically seen in books or papers because they are easier to read than sans serif fonts.
Sans Serif
Common sans serif fonts include Arial, Helvetica Neue, Proxima Nova (the font you're reading right now). "Sans serif" literally means "no serif" or "without serif."
Sans serif font families are more minimal and modern by design. They don’t boast the accent features of serif fonts, but sans serifs stand strong as a timeless choice for brands.
You can use both serifs and sans serifs in a brand’s type suite, but sometimes you only need to communicate with one family.
Whichever you choose, stay consistent! Use a select number of typefaces to promote your business without deviating.
What is Typographic Hierarchy?
Typographic hierarchy is essentially a system of ordering fonts to highlight the most important information first, then second, then third, etc.
Why is font hierarchy important?
Proper hierarchy adds structure, creates visual organization, reinforces brand recognition, and makes it easier for people to read your content.
What Are the Three Levels of Typographic Hierarchy?
The three levels of typographic hierarchy are headlines, subheadings, and body text. However, as you grow in your ability to create font hierarchy in your designs, you will begin to use more than these three primary levels.
What are the 6 levels of heading tags?
There are actually six levels of typographic hierarchy, and I’ll explain why.
When you develop a website, there are codes called “HTML headings” or “header tags” that are designed to create typographic hierarchy on a web page. These headings are numbered one through six (<H1> - <H6>), plus body copy, which doesn’t count as a heading. Header one is the most important while body copy is the “least.”
Each header is meant to provide value and clarify your content further, so readers and search engines like Google can understand what each of your web pages is about. Proper web typography hierarchy also boosts your search engine optimization (SEO).
Now, I would say out of those seven levels of typographic hierarchy, four of them are crucial.
Hierarchy Typography Rules
The first, largest words you read are known as the primary heading, headline, or title (<H1>). This heading is the most important whether you’re designing for digital or print.
Next, you read the secondary heading (<H2>) or subtitle, which is the next largest font style. As you might have guessed, this is the second most important level of your text hierarchy. (Are you starting to get the picture here?)
Then, you may find subheadings (<H3>) or accent headings, which further break down content under a secondary heading. These tertiary headings clarify what’s being communicated in smaller chunks of information to make the content scannable.
Pro SEO Note: Whether a subheading displays before or after the two larger headings is preferential. However, following SEO best practices, subheadings should be coded as paragraph text and not an <H3> tag if it comes before primary (<H1>) or secondary (<H2>) headings. You always want your headings to show up sequentially (H1 is your top-level heading, followed by an H2, then H3…etc.).
Finally, we land on the paragraph text, which is the smallest font under all of the headings (also known as body copy).
Examples of Brand Font Hierarchy
In the top right hierarchy, I solely used the Roboto font-family: Roboto Mono for all headings, Roboto Condensed for subheadings, and Roboto Regular for body copy. The one below it showcases a subheading before the main/primary heading paired with an elegant script font for secondary headings.
P.S. My absolute favorite font designer is Jen Wagner who designed the Modena Script font used above. Shop her collection of industry-leading fonts and *get 20% off your first font purchase!
Want a Brand That Stands Out?
There you have it, folks—the difference between fonts vs. typefaces, how to create font hierarchy, and the importance of each. Now, what are you gonna do about your brand?
When you work with a brand designer like me, you don't just get a logo, or a type suite, you get an entire creative library of assets wrapped up in an interactive PDF called your Brand Guidelines. The information contained in this document directs you on how to implement your brand in the wild all after we're done.
Part of my process at Selah Creative Co. is designing all of my clients' logos in black and white using text only for their initial concept review (I usually only show one).
Very rarely do I incorporate a creative element after selecting the logo font. I specialize in typographic logos because I believe if your brand can’t stand on its own when it’s stripped away, it’s not a brand that books—that’s the power of a strong typeface selection!
Boost your online presence with a brand that stands out. Submit a Client Application to see if we’re a good fit for each other!
