Have you ever looked at an ad or a page and struggled to read it? Maybe the headline was too similar to the body text and looked like a never-ending page of words, or the sections were too close together and your brain just wanted to move on. Whatever the case, the piece’s design probably felt chaotic and overwhelming — something that typographic hierarchy could have prevented.
Typographic hierarchy is the method of presenting content to tell the reader where to look, and in what order. When you organize type (content) to make less work for the viewer, they’ll have a better user experience and be more likely to read the entire page or ad.
Strategic design uses type to communicate a certain message, lead people through organized content, and even prompt customers to take action. Understanding and implementing typographic hierarchy (bold headings, space in between sections, etc.) can help you do just that.
Check out our five tips for using typographic hierarchy — as well as a few words from Erin, one of our graphic designers.
1. Read the content you’re designing for.
It may be tempting to just dive into the design and layout of a piece without actually reading its text first. After all, wasn’t that part of the writer’s job?
But by going over the content, you can learn about its relative importance. For example, you might read the content and decide that Quote A would make a great pull quote, but Quote B should simply be in the body text. Or you may notice that Points A, B, and C would work better as bullet points and would be easier for someone to digest. Once you’ve read the content that you’ll be designing for, you’ll be better equipped to organize the information in a way that makes sense to the reader.
2. Understand factors that play into hierarchy.
As you organize the content and establish a hierarchy of importance, you’ll want to keep a few factors and tips in mind. “ All of these things working together — font, size, and layout — can give a piece contrast and guide the viewer to the information they need,” Erin says.
- Font: Bold and decorative typestyles are often used as headings because they quickly grab the viewer’s attention and signal importance.
- Size: Our eyes typically travel to the largest type first (usually the headline), then move on to body text and other (smaller) elements.
- Layout: This allows you to create structure by strategically placing elements on a page so the design is balanced. “Think about how the viewer reads: from left to right, then top to bottom,” Erin says. “Your layout should draw the viewer in and lead them somewhere without being too busy and confusing.”
- Color: This can either emphasize or downplay an element. For example, a red subhead will pop on a page with mostly black text. A gray byline, on the other hand, will de-emphasize the author’s name. Just remember not to use too much color, as that can overwhelm the reader and make them unsure of where to look next.
- Case: Every once in a while, you can use all caps to draw attention; headings or subheads are an appropriate time to do this. Otherwise, stay away from all caps and opt for the typical uppercase-lowercase combination for the best reading experience.
- Alignment: Centering shows an element’s importance, which is why we often use it for titles and headlines. On the other hand, body copy usually doesn’t need the same emphasis, so you may want to align it flush left for better readability.
3. Vary your fonts, colors, and sizes.
Don’t be afraid to add variety to your typography. You’ll want to stay within brand guidelines if you have them, but different fonts, weights, sizes, colors, and so on will add visual interest to your design and allow you to express a little creativity. What’s more, you’ll encourage the viewer to spend more time with the piece if it’s not just a single boring block of content that looks the same throughout.
“The most common mistakes I’ve seen [with typographic hierarchy] are font choice and font size,” Erin says. “When it comes to font choice, it’s important to choose fonts that pair well together and ideally have a large family (i.e different weights — light, regular, italics, bold, etc). This gives contrast and consistency to your design.”
If you’re worried about choosing the wrong fonts, rest assured that even professional designers struggle with this, too! “Over time and with practice, I’ve gotten better at knowing what styles work well together,” Erin says. “I still find myself doing research to better understand typography so I can create cohesive designs.”
You’ll also want to try a larger type for body text — think 16-point font instead of 12-point. Using small font was appropriate back in the day when computer screens were tiny and you had to squeeze in as much content as possible. Sometimes we still stick to smaller text as we try to fit more information on the page, but too much content can overwhelm the viewer. But with a larger font, you’ll increase the likelihood of someone actually reading your whole ad or page!
And don’t forget to make your headings clearly bigger than your subheadings, and subheadings bigger than your body copy. “Creating a hierarchy starts with [these] copy sizes,” Erin says. “Each should be easily distinguishable to ease the viewer and lead them through the piece well.”
4. Consider line spacing and element distinction.
Whether you’re designing for two lines of text or 20, it’s important to add enough line spacing between different sections. The size of the line spacing will depend on the font size, type of element (heading vs. body text), the design dimensions you’re working with, and so on. But by making it clear where Section 1 ends and Section 2 begins, you’ll improve readability for your viewers.
Your design will also benefit from visually separating elements, which will keep the content organized and help the reader make their way through the piece. For example, you can give a colorful heading some breathing room before jumping into the body text. Or, create a list for items in a paragraph that could be easier to digest as bullet points.
Another tip: Use white space, the zone around design elements (like margins) and the area between visuals (like the spacing between lines or letters on a page). It lets the design “breathe” and distinguishes headings from subheads, paragraphs from sections, and so on. White space also helps users remain calm with easy-to-read text and visual elements that don’t overwhelm them.
5. Place images above corresponding text.
There may be some truth to the saying “A picture’s worth a thousand words.” Our brains process images faster than text (especially if you’re talking about a 1,000-word article!). While quality content is still essential to a strategic ad, web page, or another piece, photos allow your viewer to take a break from reading and process a different type of information.
It also helps the brain when you place descriptions (or related content) below the image, because that’s where someone’s eyes will naturally travel after seeing the photo. If relevant content appears above an image, that might confuse the viewer as to which section that photo belongs. A good rule of thumb: Try to design layouts that will make sense to the reader. Whether you’re working with 10, 100, or 1,000 words, a well-placed picture will guide them in where to look next.
With these five tips in mind, you can establish typographic hierarchy and design the best ad, page, mailer, or brochure layout for your reader.
“Creating a typographic hierarchy doesn’t have to be difficult,” Erin says, “Focusing on font size, pairing, and layout can help you tremendously in designing a great piece.”
If you’re feeling overwhelmed with all of these do’s and don’ts, that’s okay! Just do your best to place headlines, quotes, images, and other elements in places that help the reader understand your message, and you’ll do well. A professional graphic designer can also help you organize your type in a way that makes the most sense for your audience.
Our proven marketing protocol helps companies make more money, free up time, and plan an effective strategy.
Treefrog Marketing is an agency in Lafayette, Indiana focused on small business. We specialize in strategic marketing and advertising, graphic design, web design, social media, SEO, and more. For more information, visit our website and connect with us on Twitter, Facebook, LinkedIn, and Instagram.