How to: Create a Typographic Hierarchy

Having a strong typographic hierarchy is one of the most fundamental pieces 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(s)

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 (or not)

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 important 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 was weak. It was one font, with the only difference across levels of the hierarchy being size. And those differences were subtle at best.

When deciding to reevaluate 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.

For our H1, I upped it’s size and also gave it a medium weight. For H4, I reduced it’s 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.

Another element we wanted to focus on with our update to the hierarchy was simplification. Previously, our typography included 13 (!!!) header styles. We knew we wanted to simplify that and make it easier for designers and developers to select a style. So we reduced our header count to 5 and then captured additional styles in a “Miscellaneous” category

Ultimately, our typography went from a gradual slide from top to bottom to something that has much more differentiation 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