Typographic Hierarchy: it’s not just for designers anymore

As web developers, we don’t necessarily place importance on the design aspects of a web page, so much as making sure that everything functions properly and quickly for our end-users. Sometimes we are so focused on page load times and file sizes, that things like typography and typographical hierarchy can get easily overlooked when building a new site. Typographic hierarchy is important for keeping text organized and making web pages easy to navigate. 

What is typographic hierarchy? 

Typographic hierarchy is the various ways that fonts, font weights, and font sizes are situated within a block of content so that everything is organized according to importance for the user. It quickly establishes an order to the content on the page and helps a user find things quickly within a web page. Although the web does have an inherent heading structure, it’s important to understand why separating headings from subheadings and ordering headings according to importance is a simple web practice with vast benefits. 

How can it help my website?  

Decrease your bounce rate
In a study done by Jakob Neilson, the typical web user only reads around 20% of the content that is on a web page. Keeping your web page organized is crucial not only for a great user experience, but also to keep your overall bounce rate low. When users can easily navigate through the content on a page to find a specific section they’re looking for, they’re going to have a much better user experience and are more likely to stay on your website longer. When incorporating typographical hierarchy into the content on a website I managed for an IT group, I saw a nearly 4% drop in bounce rate from just adding a few subheadings to break up the content. 

Get ADA compliant
How the heading tags are organized on your site are essential to screen readers for ease of accessibility for the visually impared. It allows screen readers to scan the page and read these heading tags to users so that they can easily find or skip to a specific section in a page. When asked by WebAIM in 2017, 67.5% of screen reader users said they prefer to navigate through the headings on the page in order to find the content they are looking for. Organized heading structures are key to making your website accessible to everyone.

Improve your SEO
Search engines utilize the heading structure to quickly crawl the page to see what content is provided for the user. Although it can have a relatively small impact on SEO, search engines will utilize these headings to provide search results to users and rank the results. Wrapping your relevant content or keywords in a header could be the little bump you need to get your webpage on a higher ranking search results page. 

Increase conversions
Typographic hierarchy isn’t there to just make pages easy to navigate for users, web developers have to help the user to take certain actions on the page (ie: click on a button or fill out a form). Trying to increase conversions is often a priority for companies and typographical hierarchy is just another tool that can help draw a user’s attention to whatever actionable item you are trying to get them to on a webpage. 

Cleaning up our typographical hierarchy can have a vast impact on the overall user experience and user interaction of websites that we’re building. It’s worth investing time to learn how to make these minor changes that can have a pretty big impact on our end users.