register with us today and get 10% on your first order!!

  • united-states.png(760) 546-5213
  • info@madhya.agency
  • madhyaagency
typography.jpg

Understanding Visual Hierarchy in Typography.

nj.jpg Niharika Jamar 233 Comments 0 7.4k

What is visual hierarchy?


Visual hierarchy is the flow in which your eyes move through a composition.
It is an essential principle of design that dictates the order of importance of elements in a particular composition. It is important to make a design visually pleasing.

Hierarchy helps designers to give a visual cue to the observers and bring to their attention what is important in a particular design. Let us understand this with the help of an example. Consider a standard magazine article. Typically, it consists of a heading, an important quote or point from the article (if any), the writer's name, and the body of an article. And surprisingly, our eyes follow this exact order when we go through an article. Have you ever wondered why? As astonishing as it sounds, the reason behind our eyes following that particular order is no rocket science. The heading has the biggest font size in the article, which is why it is the first thing that catches our attention. The important quote or point from the article has the second-biggest font size, subsequently making it the second thing which catches our attention. The writer's name, which generally is the same size as the body, is mostly written in Italics, so it is the third thing we look at. Therefore, making the body the fourth thing that a reader sees. This whole system is dictated by visual hierarchy.

Visual hierarchy enables readers' to read chunks of data faster by placing the text in the right flow. Readers of the English language read from left to right. Visual hierarchy helps us mimic this behaviour to enable readers to skim through the data quickly. This is why in most articles with a large amount of data, the data is broken down into columns. The flow of information starts from the top leftmost column to the right in the bottom. Also, information of similar importance is written in identical font types and sizes so that the reader can subconsciously group it together.



Elements that dictate visual hierarchy in the text :-

  1. 1. Text size :

    typography_type.jpg

    In the example studied earlier, we clearly noticed that readers tend to first look at the biggest text size. The eye flows in the descending order of text size. However, for this to stand, there should be a significant difference in the text size. Ideally, the body text is mostly sized 14. The sizes of the headers depending on the levels of headings there. Each header size should be 50 percent more than the other.

  2. 2. Font type :

    typography_font.jpg

    There are no more than 3 types of fonts in a layout. More types than this can make the layout look cluttered and confusing. The primary purpose of typefaces in a layout is to segregate similar data together. The human mind automatically categorises data written in similar font types together, thereby dictating the flow of information. Usually, designers use a combination of serif and sans serif fonts.

  3. 3. Thickness of characters :

    typography_thickness.jpg

    The thicker the character, the more attention it draws. This is why vital information is written in bold letters. The different weights of fonts available in the descending order of heaviness are - Extra black, black, extra bold, bold, semi-bold, medium, regular, light, extra light, and thin. However, not all the typefaces have all the options available.

  4. 4. Placement :

    typography_placement.jpg

    The placement of the text is strategically important to determine its importance in the layout and the control of the flow of information. Generally, people tend to look at the top left corner first.

  5. 5. Colour :

    typography_color.jpg

    Last but not least, the colour of the text also determines the importance of the information displayed. Brighter colours tend to draw more attention irrespective of the font size and placement. The colour red is usually used to highlight important information.Visual hierarchy is used by designers all around the world to make their designs more effective and efficient in communication. It is the basis of most of the layouts available to us.

Leave a Comment:

Copyright © 2021 madhya.agency, All Rights Reserved