How to: Create a Typographic Hierarchy

Having a strong typographic hierarchy is a fundamental piece of the design equation for any digital product. Typography is kind of the like the tires on a car. When everything is working well, you don’t really think about it too much. But if something is wrong, then your whole car is at risk of falling apart.

So how do you create a typographic hierarchy that can go the distance? Here are three important things to consider.


Font

Selecting which font or fonts you will use to create your hierarchy is something that can be agonizing if you let it get to you. But there are a few simple things you can do to help make sure you pick the “right” one. I put “right” in quotes there because there is no perfect font for all instances. Different contexts should have different fonts.

Legibility

User ability to read text is the primary concern when selecting your fonts. Some font choices were designed specifically to be legible on screens (Georgia, Open Sans, Verdana, etc). If you’re designing for a screen, grab a screen friendly font.

Sometimes, it’s okay to veer away from pure legibility for accent text or for branding style purposes (Think “Disney” logo) but you want to build the meat of your typography around legibility.

Pairing

Selecting a pair of fonts is another great way to build out your hierarchy. A combination you’ll see used often is a more stylized Serif font being used for headers and a more legibility focused Sans-Serif used for body text. It’s also okay to just stick to one font family. But if you do, using styling and size will be of higher importance when distinguishing between levels of your hierarchy.

Tone

There are a lot of fonts out there. And they convey wildly different tones. You should select a font or fonts that match the tone of what you are building. You probably don’t want to use a cursive, hand lettering style for a high efficiency digital tool. But that would be great as an accent header for a cozy bed and breakfast website. The best way to test out if your font is working for your tone is to try a handful out until you land in the right place.


Size

The best place to start with sizing a typographic hierarchy is by selecting a base “paragraph” size for text. The most common size you’ll find for this is typically 16px, but depending on what you are applying your typography to, you could scale this up or down.

For instance, if you are building a complex application with lots of moving parts, using a 16px or even 14px can be nice to give your self the most bang for your buck when it comes to screen real estate. On the flipside, if your interface is simpler or less efficiency focused, bumping up your base paragraph size to something like 18px or 20px can really make a difference for your users.

Either way, you will want to start at the paragraph and build your sequence up and down from there. The best way to do this is with a type scale. A type scale acts as formula for you to move up and down in size with your hierarchy without having to spend too much time splitting hairs. Some font scales include:

  • 1.200 – Minor Third
  • 1.250 – Major Third (My personal favorite)
  • 1.333 – Perfect Fourth
  • 1.500 – Perfect Fifth
  • 1.618 – Golden Ratio

To apply your type scale, you would take one your formula (ex: 1.250 Major Third) and multiply your base paragraph size by that number (16px x 1.250 = 20px) You would then do this to your next number (20px x 1.250 = 25px) and so on and so forth. To move down your scale, instead of multiplying your base by your scale number you divide it. (16px / 1.25 = 12.8px)

💡 A great part of using type scales is that they will help define how your font should be set up in CSS if you are using rems.

So using the 1.250 Major third type scale above, we get this nice scale up and down of font sizes we can pick from:


Style

Finally, applying different styles to your type can make a huge difference when it comes to having a solid typographic hierarchy. Some areas where you can tweak the style of your typography are:

  • Color
  • Weight (Medium, Bold, Extra Bold, etc)
  • Italics
  • Capitalization
  • Letter Spacing
  • Line Height

Small tweaks to these styles can go a long way in creating differentiation in your hierarchy. A rule of thumb with style is that you typically don’t need more than one differentiator to make an impact.

Dont: H2 - Extra bold weight, italic, all-caps and with 7% letter spacing
Do: H2 - Medium weight

Lessons Applied – Updating BriteCore’s Typographic Hierarchy

When building BriteCore, our initial pass at typographic hierarchy for the application did not provide much differentiation between different levels but also had lots of variation. This created inconsistency across the experience as far as type was concerned and needed to be addressed.

When reevaluating our typography, I had a few goals in mind:

  • Create differentiation between levels of the hierarchy
  • Clearly define the typography to prevent variation
  • Accommodate the typographic needs of the full, interconnected application

To create differentiation in our hierarchy, I leaned hard into tweaking the styles of each of our levels of the hierarchy. Here are a few of the edits made:

  • H1 – Upped its size and also gave it a lighter weight. This made it the most distinct styling as the only lightweight font, which works great as an H1.
  • H3 – Kept the same size, but given a medium font weight and a lighter recommended coloring. This allows it to keep a heavier weight on the page but remain distinct from the H2 and H4 around it.
  • H4 – Reduced its size to be closer to the size of our paragraph size but instead bumped up the letter spacing to 4% which helped it stand out when being used above paragraph text.
  • Small Text Size – Added a class for small text (14px) and gave this smaller text a 1% letter spacing. Upping the letter spacing of this smaller text allows it to be more legible.

Another element we wanted to focus on with our update to the hierarchy was simplification. Previously, our typography included 6 header styles, and then a handful of editing classes for each of those headers. With this setup, each level of the hierarchy could have a light, regular and medium font weight. Meaning that we ultimately had around 18 different header styles live around the system. 😳

This created a massive amount of variation throughout the product. By removing much of that variation, it allowed our typography to remain more consistent and easier to implement.

Ultimately, our typography went from a gradual slide from top to bottom to something that has much more definition and clarity:

Left: Before, Right: Updated

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s