typophilecomp4

Today I went to burger joint with my boyfriend. We sat down, got our menus, and started looking them over. He had been to this particular place multiple times before, and always ordered the same item on the menu. I was a newbie, and I did not understand how their ordering system worked. You basically had to build your own burger, but as I continued to glance at the menu I found it abundantly clear how unclear this menu really was. After roughly 15 minutes of very confusing navigation, I finally found what I wanted to order. Eventually the real issue dawned on me.

Thanks to type and visual hierarchy, looking at a menu, poster or even a letter, our eye can quickly navigate where it needs to go to, and what steps come first. But if the designer strays too far away from type layout, we can find ourselves confused and lost. In this particular case with the menu I found that the style and design of the menu was eye catching and very well done, but within that hierarchy was completely lost.

So if we want our design to look amazing, but we need to keep hierarchy, how do we do that?

Well here are some basic steps to maintaining type/visual hierarchy in your designs.

Step number Uno is usually size and placement. Size does matter! Our eye will automatically read the largest type on the page, even if it is not at the top. We will jump back up tot he top if we have to.

hierarchy1

Here are a few percentages to help you get started:

Main body copy (14 points)
Main headers: 250 percent more than main body copy (35 points)
Secondary headers: 175 percent more than main body copy (25 points)
Navigation elements: 165 percent more than main body copy (23 points)
Secondary navigation or menus: 140 percent more than main body copy (20 points)

*A little tip for when you are choosing your typeface, is too choose one that has a lot of different weights to it. Because this is your next important step for type hierarchy.

Weight comes next, it seems obvious that a thicker stronger font will draw more attention than a thin font, even if the thin font is larger. but this is not necessarily the case, placing a bold font next to the same font size, it will stand out more, mainly because it draws more attention.

paramore

The last step is a fun one, and the is COLOR! Yes adding or changing color will obviously make certain parts of your text stand out more than the rest. And remember, cooler colors, such as greys and blues, might sink back more, while warm colors tend to pop off the page and draw the reader in.

graphic-fixed

I hope these few tidbits have helped in some way. There are many ways to add hierarchy, and there are not strict rules about it. Just remember it is important, you do not want your audience feeling frustrated when trying to view your type.

Advertisements