Visual Hierarchy
- morganlchristopher
- Sep 30
- 4 min read
When you first hear the term hierarchy you may think about organizational hierarchy or ranking, who reports to whom, job titles, corporate America. However, within the world of Visual Communication, hierarchy refers to the organization of content, arranging elements to show their importance within the design.
As designers, before we begin any project we need to ask ourselves, "What is the message? What does this piece of visual communication need to say?" If we don't know the message then we can't establish hierarchy within the information that needs to be communicated.
For example, you may be designing an invitation. Many details go into an invitation. There's the name of the event/occasion, date, time, location, parking details, gift details, RSVP information, website information, etc. Visual hierarchy helps the reader to scan the text, knowing where to enter and exit, allowing the reader to digest the text more easily. If the information isn't organized something is bound to get overlooked or forgotten by the reader.
Visual hierarchy can be established by introducing different levels of hierarchy, which can be signaled by one or more visual cues; spacing, such as line spacing or text placement, or graphics, such as text size, style, or color.
In an invitation design, the first level of hierarchy would be the name of the event/occasion. This will be the largest text within the layout.
Sarah's 50th Birthday
The second level of hierarchy would be the details of date, time, and location. This text will be smaller than the name of the event/occasion, but it will not be the smallest text within the layout.
Please Join Us in Celebrating
Sarah's 50th Birthday
Saturday, October 4, 2025
at 5:00 PM
City Steak House | Atlanta, GA
The third level of hierarchy would be the remaining details of parking details, gift details, RSVP information, website information, etc. This information is important, but we need to differentiate it from the rest of the text within the layout. We can do this by making the text smaller and placing it in italics. Both of these visual cues will signal to the reader to pay attention to this information.
Please Join Us in Celebrating
Sarah's 50th Birthday
Saturday, October 4, 2025
at 5:00 PM
City Steak House | Atlanta, GA
RSVP to John by September 30
(555) 123-4567
We spoke last month about the importance of typography and pairing typefaces. Mixing and matching typefaces can also further establish hierarchy. Remember the term "superfamily?" Superfamily typefaces really come in handy when you're designing an invitation or a long format document like a book or brochure. All of the different fonts within the superfamily allow you to stay consistent within your design while also establishing different levels of hierarchy.
You can also use color and graphics within your design to further establish hierarchy. These design principles prompt the conversation of semiotics, the study of signs and symbols and their use or interpretation. However, that is a whole different blog post.
When hierarchy is establish in any design layout, the piece immediately adopts form and function. Readers are more likely to digest the information and apply it as you intended, rather than skipping over or ignoring certain aspects of the design.
As I mentioned previously, visual cues such as text size can help establish hierarchy within your design. In print design, it is a general rule of thumb that a text size of 12 pt. or higher is a sufficient size for a heading or title. Likewise, a text size of 8-10 pt. is a sufficient size for body copy. Anything smaller than 8 pt. should be reserved for the third level of hierarchy, such as RSVP information, image captions, page numbers, etc.
Last month I mentioned leading, or line spacing. It is also a general rule of thumb in graphic design that your leading will be 4 points higher than your text size. For example, if your text size is 12 pt. then your leading will be 16 pt. If your text size is 9 pt. then your leading will be 13 pt. However, while this is a general rule, this doesn't always look the best. It solely depends on the typeface you're using; specifically the x-height and the cap height of the typeface.
X-height - the height of the main body of the lowercase letter (or the height of a lowercase x), excluding its ascenders and descenders.
Cap Height- the distance from the baseline to the top of the capital letter determines the letter's point size.
Visual hierarchy is also present in digital design, such as websites, social media graphics, digital advertising, etc. In digital design, it is a general rule of thumb that a text size of 54 px is a sufficient size for a heading or title. Likewise, it is a general rule of thumb that a text size of 16-18 px is a sufficient size for body copy in the digital space. Anything smaller than 16 px should be reserved for the third level of hierarchy. You can read more about designing in the digital space at medium.com.
If you have good typography and good hierarchy, you are well on your way to a successful piece of visual communication. However, we can't forget about a few important principles that are absolutely necessary. Join me next month as we dig into C.R.A.P. - the four main principles of Graphic Design!
If you have a topic you would like me to cover, or you have a question about a project you're working on, drop me a line. I would love to chat!
(2020, March 6). Everything You Need to Know About Designing for Web Typography. Medium. Retrieved September 30, 2025, from https://medium.com/swlh/everything-you-need-to-know-about-designing-for-web-typography-69cec6ca8230
Lupton, Ellen. Thinking with Type. 2nd ed., Princeton Architectural Press, 2010.
Comments