Creating Great Typographic Hierarchy on your Site

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.

A diagram of text. Let's start somewhere simple. Most typographic elements fall under three categories: Headings, Body text, and Buttons.

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:

Headings

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.

Body Text

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.

Buttons

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.

Different typography examples. This is a simple question that doesn't get asked enough - do you ask yourself this when you work on your site?

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 of text.

Here are some ways you can get the same key message across, without overwhelming your site visitors:

Typography example.

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.

Typography example.

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 of text.

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.

Different typography examples. Expandables are your best friend when it comes to large amounts of text.

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:

Typography example.

Accordions

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.

Typography example.

Tabs

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 appropriately.

Next on the list: how to handle Call-To-Actions properly.

Different typography examples. Simple doesn't mean lazy. When you simplify your Call-To-Actions, you make it easier than ever for visitors to engage with the buttons you're promoting.

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.

Typography example.

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.

Typography example.

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.

Typography example.

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 Call-To-Actions.

The next tip we'll look at involves the width of your text areas.

Different typography examples. Narrow columns make your text much easier to read than wider columns.

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:

Typography example.

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.

Typography example.

Using multiple columns

Breaking your content across multiple columns is a great way of using horizontal space to feature large amounts of text.

Typography example.

Contrast is king

Always ensure your text has a good amount of contrast with the background. Learn more about colour contrast here.

Typography example.

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.

Different typography examples. A good amount of space goes a long way.

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:

Typography example.

Margins

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.

Typography example.

Kerning

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.

Typography example.

Line-height

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.

A man texting our agency. Contact our team today to resolve all of your typographic hierarchy issues.

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