Typography in Web Design: Part 4 How to create visual hierarchy with text
Welcome to the penultimate blog of our Typography in Web Design series. If you missed parts 1-3, let’s get you up to speed. So far, we have spoken about the different types of typeface, things to consider when choosing typeface(s) for your business and how to style them.
Today we will be discussing visual hierarchy, what it is and why it is so important within web design. Let’s get straight to it!
What is visual hierarchy and how to create it?
Visual hierarchy is the process of organising design elements in terms of their importance. It draws more attention to the more important elements, whilst letting the less pressing details fade into the background. So, when it comes to typography within web design, visual hierarchy is the grading of the written information on your website from the most to the least important.
In order to establish a visual hierarchy within typography, you can use all of the styling techniques we discussed in the previous blog. By adjusting the size, colour and weight of your text, you can make parts of it really stand out from the crowd and others blend in. We will go into more specifics about that later. But first…
Why is visual hierarchy important?
There have been lots of articles written about visual hierarchy and why it is so important within web design. Here are our top three reasons:
Makes a Strong First Impression
Two things to note about our online browsing habits. Firstly, we prefer to scan websites rather than read every word. Secondly, we make judgments on a website within 50ms. Therefore, a web page with a never-ending block of text, is going to be a powerful deterrent. Visitors will think, “I can’t be bothered to scan that; it’s too much hard work.” They bounce!
Visual hierarchy can help you create maximum impact in that tiny 50ms window. By drawing attention to the most important headline moments of your web page, visitors can quickly scan and ascertain whether it is worthy of their time to read on.
Consider a blog entry which is unavoidably text heavy. This blog makes 10 points. A visitor to the blog is particularly interested in point 10. Without visual hierarchy, it wouldn’t be clear where one point ends and another begins. They would have to read the entire blog to find the point they are interested in. By point 3, patience would be waning!
However, if the same blog had a visual hierarchy, their experience would be far more efficient. They could quickly scan the subheadings to find the point that is relevant to them without having to read all the others first. Clearly conveying the purpose of the page and respecting the reader's time contributes to a strong and positive first impression.
Brings Clarity
There are times in life when it feels like everything is demanding your attention! Family, friends, work, health…the list goes on. When that happens, it can feel overwhelming! It can also be difficult to know how to start tackling, prioritising and meeting all the said demands.
A website without visual hierarchy can have the same effect. If every visual element and every piece of text is equally demanding of attention, it can be hard for visitors to know where to focus their gaze. The visual overload makes taking in and digesting the contents of the page far more difficult. The thing is, they don’t have to put up with that and can go elsewhere.
By establishing a visual hierarchy in web design, you can provide visitors with subliminal instructions on how to navigate the site. Thoughtful design choices can guide them methodically around the page, so that their most pressing questions and needs get answered first.
Captures Attention
A design without hierarchy – to put it frankly – is boring! The image below says it all. Which one catches your eye and makes you want to read? The 4th option, right?
Web design is a form of visual storytelling. Indulge us a moment and consider a literary tale. What if every sentence started with the same word, followed the same rhythm and was the same length? For example: He got up. He was hot. He drank water. He is cool. It sounds like a monotonous drone – yawn!
A captivating story keeps the reader on their toes and engaged. Long sentences can be very descriptive and paint a scene, or they can be used to build dramatic pace, when all of a sudden…BOOM! A short sentence drops. The reader stops in their tracks. They take the moment in.
In web design, there are moments when you want the visitor to pause and reflect. There are others where they can scroll through at their leisure. Make sure the main moments of the plot don’t get lost.
Levels of Typography Hierarchy
The best way to achieve visual hierarchy within your website's typography is by breaking your text down into the following categories: body text, headings, subheadings, interactive, input and secondary. Each of these categories can be styled differently with the treatments discussed in our previous blog, to make them either less or more dominant on a page. Let’s discuss what each category is, how important they are and how they should be styled.
Body Text
Body text – also known as body copy or main text – is a term used in both printed and digital media. It refers to the written text that makes up the majority of a book, magazine, web page or any other digital content. It is the text that you are reading now!
Body text (with the exception of captions) will be the smallest text in web design and thus it needs to be in a really clear and easy to read font. It should also be consistent throughout your website.
Tips for Styling Body Text
Typeface: Use a legible typeface. Many will say it is better to use a sans serif font, rather than a serif font. In the early years of computing, screen resolutions were not what they are today. So, historically, yes, the serifs would have appeared blurry and sans serif would have been the way to go. However, in a time of HD, 4K and 8K, it really isn’t an issue. As long as the typeface is legible, go for one that fits your brand vibe check!
Font Size: Ensure your font size is readable. The general consensus is that body text should be sized at 16 pixels or above. 16 pixels is the screen equivalent of the standard text size used within printed media such as books, magazines and newspapers. It is deemed the smallest font that a majority of people can comprehend and read without having to zoom in. You don’t want your visitors having to work hard to make out the letters!
In some instances, your minimum text size will need to be larger than 16 pixels. Some typefaces are just not as legible as others at smaller sizes. However, if after increasing the size substantially, you still struggle to read the text, it is probably not the right typeface to use.
Font Weight: Opt for a middle of the road line weight – regular or medium – to give you more options with font weight for other categories of text within your website’s visual hierarchy.
Bolding, italicising, highlighting and underlining: Use italics, bold and highlight treatments sparingly to give emphasis to certain points. Avoid underlining as it can make text look like a hyperlink. Did you try to click it? Case in point!
Colour: Go for a colour that contrasts well with your chosen background. We shall discuss this in more depth in part 5.
Alignment: Make sure your text is left aligned. Also learn why in part 5.
Headings and Subheadings
What is a heading? Headings appear once at the beginning of the web page. They can also be referred to as the title. They instantly tell you what the web page is about.
What is a subheading? Subheadings are any other form of heading beyond the heading. There are no limits to how many you can have on a web page. Subheadings are useful devices to split up long reams of text into shorter paragraphs or sections.
Headings and subheadings should be the largest and most prominent text on your website. However, within them there also exists a hierarchy. You have your main heading, subheadings, subheadings within the subheadings and then more subheadings within the subheadings of the subheadings. Wow! The multiple heading levels get denoted by H1 (headings), H2 (subheadings), H3 (subheadings of subheadings) etc in web design.
In effective web design, heading levels will decrease in both size and prominence i.e. H1> H2> H3 etc. This is so visitors to a website can quickly scan the page and find the relevant information they need.
Tips for Styling Headings and Subheadings
Every heading within a heading level should be styled the same and remain consistent throughout your website.
Typeface: Use serif, sans serif, script or decorative. The world is your oyster when it comes to headings!
Font Size: Ensure your headings have the largest font size on the page. It grabs visitors’ attention so they instantly know what the page is about. The general rule of thumb is that your H2 subheading should be at least 200% – or double – the size of the body text. For example, if your body text is 16px, the H2 should be 32px bare minimum. The size of any further headings will decrease by 50% of the difference each time: H3 headings will be 150% (24px), H4 headings 125% (20px) etc.
If you intend to have more headings levels – H5, H6, H7 and beyond – you may want to make the more prominent heading levels even larger to begin with, in order to make sure that the lower heading levels are significantly bigger than the body text.
Font Weight: Apply bold or semi-bold treatments to your headings to make them pop.
Colour: Get creative and experiment with different colours within your branding palette.
Capitalization: Title Case or UPPERCASE works really well for headings. They are number 1 on the visual hierarchy ladder and so they can afford to SHOUT ABOUT IT!
Placement: There is a lot of choice when it comes to the placement of headings. Left-aligned headings are the most traditional and widely used. They follow the natural reading pattern (left to right) of many languages. Centred headings have become more popular in more minimal designs. They create a more dramatic, focal point. Right aligned headings are the least common. They may be used for specific design aesthetics or in cultural contexts where right-to-left reading patterns are the norm.
Interactive text
Interactive text is the text that users interact with i.e. the text they click or tap on. Think links, buttons and menu items. The text contained within navigation menus is already made distinguishable by its placement within a website’s design. Thus, the styling of it doesn’t necessarily have to be drastically different.
Hyperlinks contained within the body text need to stand out. Why? Because it makes navigation far more intuitive for the user. Buttons are a combination of geometry and typography. The button’s shape, colour and border makes it stand out from the rest of the page already, however it doesn’t hurt to add a few extra styling flourishes to the button’s text to make it stand out more.
Similar to traffic lights, links and buttons exist in various states. Before they have been interacted with, they are in a normal state. They will still have some discerning features so that users know they are in fact links and button.
However, when user interactions occur, they change state. Hover state is when the cursor is on it but hasn’t been clicked. Active state is when the link or button is being clicked. Finally, focus state is when the link or button has been selected via keyboard navigation.
Styling the different states of links and buttons is important for several reasons. It can provide immediate visual feedback to the user, confirming that their actions have been recognized by the system, reducing confusion and frustration. Differentiating states can also help users with disabilities, such as those relying on screen readers or those with visual impairments, to interact with the website more effectively.
Tips for Interactive Text
Typeface: Use a legible sans serif or serif typeface.
Font Size: Make button text slightly larger or the same size as body text. Link text will be the same font size as the section of text it is a part of, which will most likely be the body text.
Font Weight: Applying a slightly bolder font weight to links will make them stand out from the rest of the text. A bolder font weight on button text also doesn’t hurt!
Colour: Make buttons and links stand out with a different colour. Blue (hex code #0000EE) is the traditional colour for links, but you can make it whatever you want it to be.
Underlining: As we mentioned in part 3, underlining has become synonymous with links. So go ahead and underline your links! Button text doesn’t need to be underlined as it already stands out being placed on a button.
States: Style the text to differentiate between the different states – hover, active and focus – using styling treatments such as colour, underlining or bolding.
Input Fields
Input fields are interactive web design elements that allow visitors to enter non-standardized responses. An obvious example is a contact form where you enter in your personal information such as name, address, email and contact number.
Each input field is denoted by labels or questions. Sometimes input fields have placeholder text. Placeholder text hints at what should be typed into a field, in the field. It is usually a paler text.
To make the design look less cluttered, some designers get rid of input field labels altogether and rely solely on placeholder text. However, this isn’t very user friendly, as per the case put forth by the Nielsen Norman Group. For example, you cannot check you have filled in the form correctly because your answer has replaced the instruction. It is best to avoid and stick to labels!
Tips for Styling Input Fields
Typeface: Stick to sans serif and serif typefaces. The most important thing here is legibility. Visitors could be filling out sensitive information which needs to be correct – make their job easier!
Font Size: Use a legible font size. General consensus is 14px-16px.
Labelling: Make sure labels are clear and descriptive. Use a bolder font weight to make the labels stand out.
Secondary Textual Elements
What do we mean by secondary text elements? Secondary text is any textual element that doesn't fit into any of the above categories. Things such as captions, footnotes, endnotes, sidebars, disclaimers, pull quotes, and date- and time stamps. It is a mixed bag!
A lot of the secondary textual elements listed above will make up the lowest ranks of a website’s visual hierarchy. Things such as captions and footnotes. They are there as a reference, should the user require it, but they are not essential. On the other end of the spectrum you have secondary textual elements such as pull quotes. Pull quotes exist to draw attention!
With secondary textual elements, it is all about determining how important they are to the user journey. You then need to pitch where they are within the website’s visual hierarchy and style accordingly.
Tips for Styling Secondary Textual Elements
Less prominent secondary textual elements such as captions:
Typeface: Stick to sans serif and serif typefaces for legibility. It is common practice to use the same typeface as your body text.
Font Size: Use a smaller font size than the body text. We recommend 2 sizes smaller.
Font Weight: Choose a lighter font weight – regular or light – to make text fall into the background.
Colour: Pick a softer colour to reduce the text’s prominence. For example, if your body text is black use grey. Just make sure it has enough contrast and is readable - more on that in part 5.
Italicization: Use italics to create a subtle distinction between secondary info and the body text.
Capitalisation: Stick to sentence case or title case. Remember capitals are synonymous with shouting and you want this text to be whispering.
Placement: If applicable, place secondary text near any related primary text. It gives context and makes sense to the reader. If it is totally unrelated info, it can distract for the wrong reasons. Us humans, we love trying to bring sense to things that don’t make sense. Any intrigued visitor to your website, will see the rogue text and won’t be able to resist trying to figure out why it is there. Suddenly, the text which is meant to fade into the background becomes a high profile case to crack!
More prominent secondary textual elements such as pull quotes:
Typeface: Be creative and use a different typeface to the body text to make it stand out.
Font Size: Use a larger font size than the body text.
Font Weight: Experiment with a bolder line weight to draw emphasis.
Colour: Use another colour in your brand palette to make the quote pop.
Italicization: Try out italics to further differentiate the pull quote.
Quotation Marks: Add personality with oversized or stylized quotation marks.
Alignment: Apply an ident or centrally align pull quotes to create separation from the body text.
Placement: Place pull quotes near the relevant section of body text to avoid spoilers, or use them earlier on, to drop a bombshell and make your readers want to read on! Pull quotes can also be used as strategic visual breaks in the text to break up long passages.
Conclusion
There you go, a beginner’s guide to visual hierarchy within typography. You now know what visual hierarchy is; it is the organisation of written information on your website in terms of its importance. You also know why it is so important. It can make a strong first impression, bring clarity and capture the attention of the user.
A good place to start with creating visual hierarchy within your text is by breaking it down into the following categories: body, (sub)headings, interactive, input and secondary text. Once you have done that, you can then style each category of text to be either more or less dominant on a web page.
We only have the fifth and final instalment of our Typography in Web Design series to go. Learn all about how to make your website more readable here.
In the interim, if you feel like your business’s website is lacking visual hierarchy and would like some help implementing some, the team at Made by Dave would love to hear from you! Get in touch with us here and let’s see what we can do.