{"id":17411,"date":"2016-07-20T17:48:13","date_gmt":"2016-07-20T17:48:13","guid":{"rendered":"http:\/\/www.designbombs.com\/?p=17411"},"modified":"2016-07-20T17:48:13","modified_gmt":"2016-07-20T17:48:13","slug":"visual-hierarchy-improving-designs-typographic-hierarchy","status":"publish","type":"post","link":"https:\/\/www.designbombs.com\/visual-hierarchy-improving-designs-typographic-hierarchy\/","title":{"rendered":"Visual Hierarchy: Improving Your Designs with Typographic Hierarchy"},"content":{"rendered":"

Visual hierarchy balances form and functionality in a design. It can help you combine your abilities as a designer with the message you need to relay to your audience to pull together a design that guides the audience through it.<\/p>\n

Typographic hierarchy is one of the easiest yet most effective forms of visual hierarchy you can use in your designs. You\u2019re most likely using it in your blog posts without even knowing it. We\u2019re going to go over what this means and how you can use it to improve your designs.<\/p>\n

What Role Does Typography Play in Visual Hierarchy?<\/h2>\n

Typography plays a huge role in visual hierarchy, and it\u2019s nothing new. In fact, typographic hierarchy has been used by the newspaper industry for centuries. Check out the front page of The New York Times<\/em> after the sinking of the Titanic<\/em>:<\/p>\n

\"The<\/p>\n

The article was published on April 16, 1912, a time when newsstands were the primary resource for obtaining the latest news. Just like you\u2019re fighting for your designs to stand out from the hundreds and even thousands of other designs users have to pick from on social media, newspapers needed a way to catch a reader\u2019s eye so they were more likely to buy when passing a newsstand.<\/p>\n

They did this with typographic hierarchy. The New York Times<\/em> article uses four levels of typographic hierarchy. The first level is the title of the article, \u201cTitanic Sinks Four Hours After Hitting Iceberg\u2026\u201d Excluding the The New York Times<\/em> print at the top, the title is using the largest size in the entire article, and it\u2019s even written in all caps to emphasize the urgency of the event.<\/p>\n

The first level should always express what the article is about. This is the title of your blog post in the digital era. The second level of the New York Times<\/em> article uses a smaller font size and contains more information about the incident.<\/p>\n

The third and fourth levels follow this trend, using visual hierarchy to arrange the details of the event from most important to least important.<\/p>\n

How Typographic Hierarchy Improves Your Designs<\/h2>\n

\"Typographic<\/p>\n

Typographic hierarchy improves your designs by increasing their effectiveness and ability to convert, and it can even improve the overall look of your designs when incorporated properly. This includes using different font sizes, different font styles, different typefaces and even different colors.<\/p>\n

Users are more distracted now than they have ever been. Whether you\u2019re creating a featured image for a blog post, a cover for an audio track, a cover for a book or a graphic to use to promote something on social media, you have a lot of competition.<\/p>\n

Utilizing visual hierarchy with compelling headlines and captivating graphics or images can make your designs stand out against the crowd. Users scroll endlessly through music libraries, online book stores and social media feeds. It\u2019s hard to stand out against everything else being thrown at them, so incorporating as many simple tricks into your designs as possible can be crucial.<\/p>\n

The Three Levels of Typographic Hierarchy<\/h3>\n

No matter what style you go with, every design that incorporates typographic hierarchy typically uses three levels of it.<\/p>\n