In design, a very crucial aspect that goes easily unnoticed is hierarchy — specifically, the hierarchy with your typography.
No, we’re not talking about Kings and Queens type of hirerarchy.
I’m talking about the arrangement of your text, in terms of size, scale and color.
I can’t express enough how important it is for your copy to be organized in a way that makes it easy to digest at a glance.
Plus, you want visitors to your site to be able to navigate and find what they need in a timely manner — especially with the attention span we all have these days (next to nothing!).
So how do you approach proper hierarchy, and what’s the best practices in design?
Determine Importance
When you’re laying out your copy, whether on a banner or webpage, you want to base the hierarchy of your text by importance.
What do you want users to read first? What is most important?
An easy place to start would be page titles — these should be the largest and first thing read on any webpage.
Next, you would tackle your H2s, or subheads — these are commonly used as the next level of heading below your page title.
In some cases, you’ll even have sub-subheads which break down that particular topic or section further.
As you progress through the page and determine your hierarchy, you can come up with an outline of your page. We’ll look at our Website Design & Development page for an example:
On this page, the first thing you see is the page title — it’s’ the largest text on the page, and starts at the top. However, you will notice “LET’S GO DIGITAL” above it — but because it’s smaller, and styled differently, it is read as a secondary piece of copy.
Now, we look at the beginning of the body of the page:
The next copy that catches your attention is “Start Getting Noticed Online” — this subhead is larger, in an orange hue, and situated on the left.
All of these factors help point you to that section next — which indicates a proper hierarchy of your content.
The call-to-action below that is the next subhead on the page, however because it is smaller and in a box on it’s own, it signifies a less importance than that of the section above it.
You can continue on down the page and should see a resemblance in how text is laid out and styled.
Page titles should be largest, H2 subheads should be second largest, H3 subheads should be third largest, and so-on.
In the end, there should be a clear and easy way to dissect your page content to know what it’s about, and what information is most important.
Check out your website
Now, I challenge you to go visit a page on your website and ask yourself:
– Is the page title clear and the largest text on the page?
– Do you have proper subheads that are second-largest and laid out appropriately for readability?
– Can a user scan your page and easily understand what it’s about?
Go through and make improvements as needed until you see a clear and defined hierarchy in your webpage content.
Or, if you’re unsure and prefer a professional opinion, give AWD a shout.
Remember, you can apply these same principles across many mediums — stickers and labels included.
The end goal is to help your visitors navigate and read your content with ease — any disruption and confusion could lead to a lost sale, and that’s the last thing we want to be doing.
Until next time!
