Creating Great Typographic Hierarchy
How to easily improve the text on your site
One of the most easily preventable and most common issues across the web: are
websites with poor .
How well you lay out, organize, and format your text plays a significant and direct role in the success of your website. If you take the time to ensure the text on your site is attractive to , you'll be able to more easily control your .
This article is going to explore 5 essential tips for laying out the text on your website. We'll be looking at simplified scenarios, with examples of poor and great typography to help explain the benefits of creating good typography on your site. Although the focus of this article is for web, most of the tips provided can be applied to most other mediums.
Without further ado, let's jump into a quick refresher of the basics of web typography.
The big three of typography
Across every site, , , and make up the vast majority of
typographic elements. Headings help categorize your body text, which helps describe
the buttons you want visitors to click.
Let’s look at each of these elements:
These are the larger, but shorter lines of text that visitors use when scanning a web page for the information they're looking for. Great headings are short, and adhere to a consistent that visitors can familariize themselves with.
This is the bulk of the typographic content on a web page. These paragraphs form the main descriptive text content on your site, and are a very important element for , , and scores.
These are the that visitors interact and engage with across a site. Buttons typically require some sort of context or description, which is almost always accomplished by a descriptive heading or nearby body text.
There are other typographic elements to be mindful of, but the most important ones to
be familiar with are headings, body text, and buttons. Being experienced and
proficient with handling these elements will naturally help you create better
web pages, user journeys, and results.
With our basic understanding of web typography, let's move onto the first tip of the article.
1. Ask yourself, would you read your own text?
From our team's experience at Mediashaker, one of the most common issues we resolve -
are areas on a page with way too much text content. Site visitors
expect to find the information they need quickly, and they become
discouraged from accomplishing that if they know they have to read large amounts
Here are some ways you can get the same key message across, without overwhelming your site visitors:
Chop it down
Remove any unnecessary text content from an area. If the information is already somewhere else on that page or the next logical page for a site visitor to go - it can be removed safely.
Spread it out
If you have several topics being discussed in one text area, you can safely cut the text into multiple areas. This might extend the height of the page, but it's almost always better than an overwhelming text area.
Remember, body text is intended to provide context and a description to the other
content on your site. When you add too much, it offers less value -
potentially taking away from your site when there's an overwhelming amount
The next tip we'll look at involves the same issue, but when you're not able to cut or spread the text out easily.
2. Stuck with a lot of text? Use expandables!
are organziational tools,
designed so you can feature large amounts of text without overwhelming your
visitors. Keep in mind, the value from expandables can be lost if your
or headings are
confusing or innaccurate. When that happens, visitors may find it
difficult to find the exact information they're looking for.
Here's some more information on accordions and tabs:
This is a classic tool that almost everyone is familiar with. You
might not know it by it's name, but you've certainly used one before.
Because of the widespread usage, it is a safe expandable to use for things like and .
Accordions function by expanding vertically, so keep in mind that you may want to use tabs if you want visitors to read all of the information. Having to open and close accordion rows can be frustrating for visitors wanting to read all of the text content available.
These function very similarly to accordions, but instead of
vertically expanding rows - there is content hidden and displayed
depending on which tab button is active.
Tabs are also widely used, but to a lesser extent than their expandables counterpart. They typically get used as a for visitors, where they can toggle the button with the content they're interested in.
A hidden benefit of tabs, is that the hide and display functionalitiy keeps pages at about the same height, reducing the amount of 'bouncing up and down' visitors may experience with an accordion.
Expandables are a helpful organziational tool, but you shouldn't rely too
heavily on them for large amounts of text. Make sure you're cutting out
unnecessary text content, using lots of headers, and spacing out content
Next on the list: how to handle Call-To-Actions properly.
3. Creating simple, yet effective button layouts
typically perform better when
there's a small amount of descriptive content around them. Best practices involve
alluding to what will happen or where a visitor will go, essentially teasing
visitors into engaging with your site.
The goal is to find the perfect balance of descriptive content needed to entice a visitor to click on your button. Remember, visitors are usually looking for specific information - so they want to know that the button they've found will help them achieve that goal.
Too much context
This can 'scare' away visitors if they think they have to read a huge amount of information to know what the button will do. Alternatively, you may accidently 'talk' a visitor out of clicking if they read confusing or complex information.
Not enough context
If you're too vague with your buttons, visitors will be cautious to engage with your site. Buttons should always have a sufficient amount of context provided around what will happen when you click on the button.
The perfect amount
Take a moment and ask yourself, what does someone need to know regarding your Call-To-Action. Answer that as simply as possible, and leave it at that.
Another consideration, is that having multiple buttons makes it trickier for visitors
to know what you want them to click on. You can get creative with your
buttons, possibly featuring one more than the other if you have two or more
The next tip we'll look at involves the width of your text areas.
4. Use narrow columns for your text areas
Everyone enjoys reading information presented neatly, and there is no better way to
accomplish this - than using narrow columns. By reducing the amount of on each line, you make
it easier for visitors to scan line to line while they read your content.
Here's a couple more helpful tips when it comes to text width:
The 80-120 rule
Typically, you want your text to have between 80-120 characters on each line. Any more or less, and you'll likely encounter readability issues with your text.
Using multiple columns
Breaking your content across multiple columns is a great way of using horizontal space to feature large amounts of text.
Contrast is king
Always ensure your text has a good amount of contrast with the background. Learn more about colour contrast here.
Max-width is your friend
Set a max-width on your text areas to easily keep them contained to a desirable width.
If you want people to read what you've written, take some time to ensure it fits in a
narrow column. This relatively small tweak will greatly improve the
usability of your site.
The next, and last, tip we'll look at - is how to deal with space within your text areas.
5. Space out your text appropriately
There are numerous variables you can modify with spacing when it comes to text, which
notably include , , and .
Spacing is an important design consideration, because it affects how easy it is for site visitors to engage with, read, and benefit from your text content. For this reason, you should be very mindful of how much space you're giving your text areas.
Let's explore the above terms highlighted:
This is the space between different areas and items. For example, if you wanted more space between your heading and body text, you could increase the margin-bottom value of the heading - or the margin-top value of the body text.
Properly setting margins for text requires you to be actively thinking about the overall typographic hierarchy on your site. This type of spacing should be consistent across your site, and should be just enough that text is more easily read - without it being too spaced apart from each other.
This is the spacing between characters in a text area. When letters are too close together, they can blend into each other - creating a readability issue.
Your kerning should be set so each word is clearly readable, no more - no less.
This is the spacing between each line of text. This is the same spacing variable noted in the above diagram.
Proper line-height can be calculated by considering the set height of a heading or . This process involves taking that set height, increasing the value slightly, and reviewing the newly set line-height for readability.
Spacing is an incredibly valuable variable within your typographic hierarchy, and knowing how to use it appropriately takes time to master.
Not mentioned above, are the numerous ways you can calculate all of these values using usability and readability formulas. There are a variety of advanced techniques developers and designers use when calculating proper spacing.
Finally, let's talk about what to do with all of this knowledge.
Make your text look incredible
Our team at Mediashaker includes a roster of all-star designers and developers who know a thing or two about typographic hierarchy.
We know how important readable, aesthetically-pleasing text is when it comes to high-performing websites. If you want to ensure your site is performing at the highest level possible - contact our team.
Our team actively helps our clients understand why and how their sites perform the way they do, making it easier than ever to manage a powerful website.
Let's make your text look perfect
Contact our team today if you want to easily and quickly improve the typographic hierarchy across your site.Contact us to get started