CleanStyle

Understanding Typographic Emphasis and Hierarchy

When communicating your message through design, your readers need your help to determine the importance of design elements on the page.

For example, you might make your call-to-action section larger or more visually striking while putting the minute details in a smaller font that doesn’t draw much attention.

Solving problems of emphasis using type and hierarchy is a critical skill and not as complicated as some might have you believe. Hierarchies will not only make your overall design more appealing, but they will help you communicate the primary and secondary information easily.

Here are some tips for doing typographic hierarchy well.

447-Spread.jpg

When You Want to Create Emphasis

The following tips will help you add emphasis to the essential pieces of your design.

Place with cases.

Changing some lowercase text to capitals can give your design a more formal look. With this technique, you’ll want to keep an eye on your spacing as ascending letters (b, d, f, h, l, k, t) can sometimes collide with descending letters (g, j, p, q, y).

Make important text stand out.

Using pull-out quotes is always popular, and if they are used correctly, they can help add emphasis to your piece. Set your pull quotes apart from regular copy text and let them form a bridge between columns.

When You Want to Create Contrast

Using contrast is another way to add emphasis to elements in your design. Experiment with these contrast tips below.

Experiment with contrasting condensed and extended type.

Condensed type can add a lot of interest to design with short, concise headlines, while extended type options will push out the length of your copy. Remember, while contrast is good, complexity is bad. Keep your paragraph styling simple and effective.

Use color.

Using color is another way to add interest. If printing your design, be sure to test the ink color on the paper stock you will be using. Transparent inks can make your message hard to read, and using colors that are too close together in value or hue won’t limit your impact. If using a soft color, try using a typeface with more weight and use it in a larger area. Sometimes, reversing the type works to get the attention you want.

Communicating Hierarchy with Numbers

Headings play an important role in your document. To ensure you’re hitting the right visual mark with your headings, try doing a little math.

447-Hierarchy.jpg

The Fibonacci number series.

An easy trick to determine a hierarchy of font size is to use what’s called the Fibonacci series, “in which each number is the sum of the preceding two.” For example, if your caption text size is 8 pt. and your text is 10 pt., your subhead should be the size of those two sizes added together, 8 pt. + 10 pt. = 18 pt. Your title would then be 46 pt., as the subtitle size (28 pt.) and the subhead size (18 pt.) added together is 46 pt. While using math is good, trust your eye and be true to the content.

Less is More

Lastly, remember that less is more in visual hierarchies. Too many techniques make for a confusing layout, so use them sparingly. Too many elements will confuse the eye and make it tired. There is no need to overstate your points by using italics, bold, underline, and then making it an angle. This is overkill. Keep it simple.

Wondering the best way to communicate the importance in your message? We can help. Reach out today!

Graphic Design School: The Principles and Practice of Graphic Design

by Sandra Stewart, David Dabner, Abbie Vickress

From understanding graphic design fundamentals, to developing original concepts, to creating finished designs—Graphic Design School develops design students' core competencies and provides practical advice and tips for how these fundamentals translate into new and evolving media. This Seventh Edition offers all new examples from web, app, social media, magazines, websites and books, presenting a comprehensive overview of the visual communications profession. This updated edition includes guidance and media examples using the latest in grahpic design software, and traditional printing techniques such as risograph and screen printing are revisited. Pedagogical tools throughout the text focus on the growth of interdisciplinary learning and collaborations between design specialists, as well as highlights on key players in the past and present of graphic design.

Topics covered include: color, typographic rules and typefaces, coding requirements, information architecture, file organization, web design and layout, mobile device composition, app design, CMS, designing for social media, and SEO. Graphic Design School, 7th Edition includes full-color illustrations throughout, as well as case studies, designer biographies, and student assignments for testing skills and concepts.