Creative projects often have a bunch of little nuances which you need to have represented through typography. Here’s how I approach making a font hierarchy for my design clients. Having a font hierarchy for your project makes it pleasing to the eye, communicates more clearly, and saves you time in the long run.
Check out our case studies for overviews on how we branded these companies.
Scale Typography: Every Font Has A Communication Style
Don’t fall into the trap of thinking certain fonts are perfect for specific industries. It’s true, industries are prone to specific font choices, but the reason is because certain industries have particular communication preferences. All fonts come with intrinsic communicative styles.
It’s similar to how our network of friends, family, and coworkers speak. Some are formal; some laid back, others are warm, and others are descriptive.
Serif:
Just like good manners, these fonts never go out of style.
What makes a serif a serif is the little strokes attached to the ends of letters. Serifs have been around since antiquity and have sub-categories that have evolved with the times.
They have sophistication about them by each letter being clearly defined and standing on its own ‘feet’. They are comfortable to read for longer stints and is the font of choice for most books. These fonts are excellent choices for projects emphasizing a story-telling communication style.
Sans Serif:
These have none of the feet which serif fonts have. Sans serif fonts, and especially its subclass of geometric sans serif, are the modern, minimalist fonts of the bunch.
These fonts are prevalent among designers and tech industries. Minimal sans serif fonts play well with the straightforward and user-friendly communication styles of those in technology. Their crisp, clean lines bring balance to brands using bold colors or geometric patterns.
Slab Serif:
The slab serif is a Sans Serif font that goes through a serif’s closet for accessories. If done well, these are the perfect blend of serif’s structure and sans serif’s modern vibe.
The Rockwell font is one of the most popular Slab Serifs. The thicker font makes a statement in headings and captures the reader’s eye.
Handwritten:
These fonts are made to appear done by a human hand using a marker, pencil, or another traditional medium.
Use these fonts sparingly. They are excellent at communicating authenticity but usually are poor performers for readability. Authenticity is currently a big trend, and it’s no wonder we increasingly see more handwritten fonts on websites and social media. It adds a personal experience to brand messaging.
Best uses are on words and short sentences.
Scale Typography: Outline the Structure of Your Project
When creating a hierarchy, you must consider headlines (H1, h2, h3) captions, muted captions, body, pull quotes, hyperlinks, and lists.
The complexity of your structure impacts what fonts make good choices. You may want to choose a complete font family with 10+ weights for a large editorial project, whereas a smaller project can get away with a less robust font with, say, two or three weights.
Weights are the choices you see of the font: light, book, medium, bold, and heavy are standard weights you see in font families.
Finally, put your Type on a Scale
Should you go with the golden ratio or perfect thirds?
A scale relates to the font size you’ll use for the different components of the typographic structure. Many of the scales take inspiration from music. Designers have strong opinions on what their ideal ratio is, but the important thing is to have a scale in place. With that said, some ratios, like the golden ratio, can be harder to manage. That’s because the size gets enormous pretty quickly as you start moving higher up on the scale.
Two websites that are lifesavers for creating a hierarchy is Type-Scale and Modular Scale.
You’ll start by choosing your base font size. Size 16px font is a popular choice since it is well rounded and divisible by four giving your many options for the scale.
Remember, these are tools. Once you pick your scale and start using it on your project, you may feel one of the fonts should be slightly smaller than the scale suggests. Go ahead and make these adjustments, but make sure you use the same adjustments on the whole scope of the project. If not, it can start looking messy and unprofessional.
4. Typography Scale Tip: Two Degrees of Separation:
Bold Medium Light
When you have touching elements in a hierarchy using the same font (ex. h2 + h3), it’s best to give it two degrees of separation. For example, if you had a font with Bold, Medium, and Light. You would use Bold for one, and light for the other. Increasing this contrast makes the separation of ideas more precise for your reader and is more aesthetically pleasing to the eye.
When you get to captions and smaller content, you might find yourself using the same font sizes. Having a robust font family becomes helpful for these situations. Use the different weights to differentiate these elements. Another option is to differentiate through color. Using a lighter gray is a popular choice for displaying muted text.
5. Lorem Ipsum: Beware of Filler Text when Scaling your Typography
My advice, don’t use Lorem Ipsum for finalizing your font choices. If you absolutely have to, you can have more fun using Jeff Goldblum filler text. But it still doesn’t help with the main problem. Using actual content with your voice, style, and messaging helps you make a better decision on your font choice.
I’ve experienced projects where once I put the actual copy into the document (as opposed to filler text), it became evident it wasn’t a fit. One time it was because the specific serif font I used suddenly seemed too playful when used with the medical jargon needed for the project.
I still use filler text in my projects. It is an essential part of my workflow when dealing with layout. But I avoid it when making final decisions on font choice using filler text.
6. Where to get the Fonts
Best Free Fonts:
Font Squirrel does a great job at curating fonts which are free to use. Some of these fonts have limitations to where you can use them, so check out their licensing agreements.
They have a beautifully laid out inventory of open source fonts that are available for download.
Best Paid Handwritten Fonts:
There is a wide range of talent in regards to font creators on Creative Market. Jeremy Vessey is one of my favorite designers, who heads the foundry Hustle Supply Co.
Font Foundries
Typewolf is a blog that does a great job on the ever-expansive subject of typography. This post has a list of commercial font foundries you may found useful for your project.
