Creating Effective Typographic Hierarchy
Typographic hierarchy is often overlooked when formatting web content. However, it plays a major role in communication by directing your customers towards a desired result and improving their overall user experience when browsing your website.
Effective use of type hierarchy organizes and gives structure to your website content. It makes reading easier by visually showing users what is important and chunking related information together. Very rarely do people read every single word on a page. Instead, they scan headlines and subheads to get a general grasp of the content, deciding if it contains the information they are seeking. If they find the heads and subheads interesting, they may decide to read further. On the other hand, if they are confronted with a flat, visually dull page containing paragraphs and paragraphs of body copy with one main headline, chances are they will move on and not read the content you worked so hard to generate.
At Global Reach, our design process, combined with our easy-to-use SiteViz content management system, does much of the typographic hierarchy work for you. During the design phase, type hierarchy is established and a style guide is created. Many careful design decisions are made regarding size, weight, color, position, contrast, density and whitespace for headlines, subheads and body copy – not to mention table styles and bulleted lists.
During the development phase, the styles are turned into code and made available to you through the SiteViz administrative interface. The content management system (CMS) contains a “Styles” drop down menu with your typographic hierarchy choices easily available at the click of a button. All you need to do is to follow a few best practices to ensure you have web pages that communicate effectively with your customers and produce results.
Implementing Hierarchy
As part of the design process, the size, weight, and color of your headlines, subheads and body copy are established. However, the manner in which you apply those styles is ultimately in your hands. Our experience has shown that the following guidelines will help ensure your content communicates as effectively as possible:
Size: Size is one of the most powerful forms of organization, so it's important to associate size with importance in your content layout. Use the H1 headline style as your main headline on your page and then proceed in descending order with H2 and H3 subheads to break up body text into easily readable chunks of information.
Spacing and Proximity: Proper spacing between the various components of your page content is essential in establishing hierarchy. The rule of proximity states that related items should appear closer to each other than items that are not related. Too much space between associated items makes them appear disconnected and hinders readability. Too little space makes the page feel cluttered and also hinders readability. In addition, larger, bolder, more colorful text elements often need more space than smaller, simpler blocks of text.
Alignment: Alignment creates order between elements. This is why flush left text is so widely used. The left alignment creates a clean sight-line that makes reading easy and helps the page appear clean and organized. Refrain from centering content, even in captions, because it will make the layout appear cluttered and unorganized.
Repetition: Repetition creates consistency for the reader. When formatting text, it is important to be consistent in assigning type hierarchy throughout your site. Use H1, H2 and H3 headline levels consistently and predictably. Keeping in mind the rule of proximity, also be mindful of maintaining consistent spacing between elements from page-to-page.
Color: Color aids in prioritization and hierarchy by making important text such as headlines, subheads and hyperlinks stand out. Take care to not over-use color as it can have the opposite effect and contribute to confusion and chaos in your layout. As a wise designer once said, “If you emphasize all, you emphasize none.”
Go Forth and Format!
Strong visual hierarchy is one of the most important principles for effective communication on the web. Your website is an extension of your business and allows you to connect and interact with your customers when you can’t be face-to-face. The look of your website (graphics, photos and general layout) are an important piece of your brand, but so is the formatting of your content.
Keeping these guidelines in mind, create a hidden test page in your CMS so you can try out the various styles and get comfortable with the process. Compare your layout to the designer’s mockups. Save and preview often to ensure your content is visually impactful throughout your website.
