Typography hierarchy

Hierarchy is a fact that is regularly maintained by us in our daily life chores. Really we’re habituate to ensure hierarchy in our daily life. So, why would we miss this interesting fact in our design work !

You may be astonished that really we do this in our daily life! Yes, definitely we do daily. Let’s disclose that how we do this in our daily life.

Try to remind that time while you were decorating your own room with your necessary things. You were definitely placing each thing one by one at the suitable place considering its necessity and importance. Suppose, you placed the medicine you need take frequently at the easier place even with a signalizing background or system if you needed. On the other hand you placed the less necessary thing at the beyond place. It’s the hierarchy. So, we may define hierarchy in a simple language like:

Hierarchy means dignifying things considering its importance.

So, if we can apply our usual habit in our design work it’s bound to be well organized, disciplined and meaningful.

Okay, if we think of hierarchy in typography the same fact to be considered there. In our design work, typography plays a vital role behind establishment of an attractive UI. So, if we can ensure a standard typography hierarchy our design will be meaningful.

We must have to be careful while ordering contents in our design frame. We have to emphasize the contents according to its role and importance. But how to emphasize actually? Enlarging the font size? May be but not only sizing font but there are some different ways to establish hierarchy like:

• Size
• Weight
• Color
• Position
• Type Contrast
• Background

Size

We can emphasize the important part of contents by enlarging the font size. So, when we emphasize by sizing then we’ll make the more important part larger than others. For example: we’ll make the headline larger than others. We can draw a visual example to make the fact clear more. Look at the two flyers below. We know that headline should be larger than slogan. In this regard the first one has right hierarchy while second one having wrong hierarchy. And there are some more missing of hierarchy in the second one. We’ll point out all them one by one.

We know that services or offers are more important than contact information according to the readers’ view. People usually want to know offers or privileges before contact information. So, designers should enlarge the font size of offers or privileges more than contact information font size like the flyer 1. So, the second one contains wrong typography hierarchy.

Okay it’s clear here for the print design. But for the web design there is a specific scale of sizing typeface like H1, H2, H3, H4, H5 and H6. The most important part of content should be sized in H1. Then the less important part should be in H2. Then H3, H4, H5, H6. This scale should be maintained to gotten searched by search engines. We’ll know H1-H6 later in another article in details.

Weight

We may make a hierarchical variation in a part of content giving different weight. In this regard we should consider the importance of that text block. We have to give heavier weight to the more important part and lighter weight to the less important part. Now we draw again the examples of flyers above. We can see the word “Privileges” on the flyer 1 is made bold as a title of that offering text block and the descriptions are made lighter than “Privileges”. It’s a right typography hierarchy. On the other hand we can see on the flyer 2, all the offering text block is made block where we can’t differentiate the title and description. That’s a wrong of typography hierarchy.

Color

Using different color we can create hierarchical variation. If we look at the above two flyers we can easily point out that variation. In the flyer 1 color application says us that “Sea Swing” is the headline of this flyer and “40% off” may be an important offer which is more important than “Privileges”.

On the other hand color application of the flyer 2 says us that “Phone ……….” is the most important than “Sea Swing” and “40%off” is nothing to see. But is it true in practical thought? No. So, this is the hierarchical weakness in the flyer 2 while color application in the flyer 1 making a leading typography hierarchy.

Position

We can easily point out that how does a position create an extra emphasis? In the flyer below our eye is usually grabbed by the part “40% off” though we’ve removed the star shaped background. The only one mystery of the eye-catching fact is the position. Among various texts “40% off” is placed surrounded by a significant white space. As a result it’s drawing our eyes with especial demand.

On the other hand we could place this text block just upon the “privileges….” or just beneath the “privileges”. But it would minimize its demand that it’s having now. So, this is the role of position in typography hierarchy.

Contrast

Contrast means difference between two or among many things. With typographic contrast we can create a meaningful hierarchy. If we apply contrast we may avoid using many colors. If we look at the example placed here we can easily find out a significant contrast in typefaces. The most important content have had the highest contrast and then the less important content have less contrast and then others all are according to their importance. There is only one color but the hierarchy is made by the typographic contrast.

Background

A different attractive background can create a eye-grabbing look that may be enough to dignify an imp
ortant content. There may not need a different color or bigger size for that content. We can look at an example here. Notice the flyer. The content part “40% off” is not much bigger but the starry background it’s sitting on is grabbing eyes of the readers. So, using a background may create a meaningful hierarchy.

Hey guys, I tried to make clear the mystery of typography hierarchy with different imagery examples besides our practical life activities. I think it’ll give you the vital concept of typography hierarchy. Moreover, if it’s not enough feel free to knock me via mail. And also I expect your suggestions that may help me to help people.

Okay, meet again with the next topic “Typographic readability and legibility”.

Thanks.

***If you think this article effective for you don’t forget to share this to help your friends.

Subscribe To My Newsletter

Join My mailing list to receive the latest news and updates from our team.

SUBSCRIBE!

You have Successfully Subscribed!

More articles that may be helpful for you:

• Color selection and effective color application
• Difference between serif & sans serif font
• A guideline to be a professional designer