6 tips for better typographic hierarchy in web design

Have you ever looked at a design and thought, “Something doesn’t feel right”? If you can’t put your finger on what it is, the odds are good it’s an issue with your visual or typographic hierarchy.

When you cram content onto a page with a muddied mass of line breaks, bolded letters and italics—you’re sure for a nasty result. Good looking pages need serious love, and over the years I’ve discovered six tips that are especially useful for design things that people actually want to read.

1. Know your content
—

To create successful typographic hierarchy, it’s important that you understand both the elements needed on the page—and their relative importance.

Traditionally, books were divided into parts, chapters, sections and paragraphs—each with their own typesetting rules. In today’s web-centric world, we still hold onto many of those guiding principles. Chapters now live on individual pages, tables of contents are organized in the navigation bar, and the paragraphs and sections remain as they always have been.

Apple Music’s approach to typographic hierarchy is ideal—minimal and easy to read.

If you look at a typical page from Apple Music’s website above, you’ll notice they paid specific attention to their typographic hierarchy. There’s a clear distinction between page title, lead paragraph and individual sections of content, including headings of those sections.

The reading experience of such perfectly crafted pages seems smooth and effortless, but required the designer to think hard about the content, individual elements and their relative importance.

So before you copy/paste a chunk of your client’s text, take some time to actually read what it’s about. You’ll quickly get a better idea on how you need to structure it.

2. Separate sections from paragraphs
—

A paragraph is a small piece of writing separated by new line or indentation. A section is a group of paragraphs dealing with a certain theme, usually with a heading.

Let’s take a look at the example above. To the untrained eye, these two pages look similar, but the reading experience is very different. Why? Because the left page makes no distinction between individual sections and paragraphs. The line spacing is identical, making the page feel like an endless marathon to the reader. This is a breakdown in typographic hierarchy.

However on the right page, we can see how a little breathing room between sections (aka section breaks) gives content much-needed structure and easier readability. Spacing between paragraphs has also been adjusted to be less intrusive, but still visible. All of this results in a more harmonious page design and a better reading experience.

So next time, don’t forget to give your sections a break.

3. Experiment with different type combinations
—

Size, color, position, typeface. These are just some of the attributes you can experiment with to create typographic hierarchy. The right combination will give your content a whole new look, make section headings pop and help guide your reader’s eye through the page.

As a rule of thumb, always choose your heading style before settling on body type—otherwise you may find yourself using larger or different colored versions of the same typeface. Instead, you should be looking for amazing combinations to bring the right flavor to your project. Sometimes, that’s all you need to make your work look beautiful.

4. Use larger type for body text
—

This is the actual size of body copy on Forbes. Whatever your opinion on it is, it sure makes for an easy read.

If you hate seeing large type on-screen, here’s what usability expert Oliver Reichstein has to say about it:

“16 pixels is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display… It looks big at first but once you use it you quickly realize why all browser makers chose this as the default text size”.

If you’re still not convinced, try reading a long article with 12px font—you probably won’t make it to the end. The use of small type stems from an age when computer screens were embarrassingly small, so it was necessary to show as much content as possible. No one was thinking about design or readability back then.

Times have changed and so should you. Use larger type!

5. Place images above related content
—

The page on the left is harder to digest than the one on the right. You can’t really tell whether the image belongs to the text above or below.

Our natural reading direction is left to right, top to bottom. But there is a catch. Our brain perceives and processes images much more quickly than text, which means we see images first, then naturally proceed to read whatever we find under them.

When you place descriptions above the image, your brain cannot process the information without extra heavy lifting, which results in a bad reading experience.

For this reason, the content that goes with the image should always be below the image.

6. Mock up text for content-rich projects
—

For most projects, you can experiment with type while working with other elements in your layout. Chances are you won’t need more than a page title, section headings and paragraph text.

But if your project involves more complex typographic hierarchy (like an online newspaper or magazine), it’s best to do a quick mockup first. An easy way to do this is by setting up a file like the one above to test out chunks of typographic content to see whether they look good together.

This allows you to easily experiment with type combinations without being distracted by other design elements. Once you find something you’re happy with, you can begin properly setting up your design.

Typographic hierarchy is more important than ever
—

According to research conducted by Dr. Martin Hilbert from the University of Southern California, the average person today receives a daily dose of information that equals 174 newspapers. That’s not a mistake. We are processing thousands of pages of information every day, through reading, listening and watching.

As a professional designer, you’ll never get a chance to play a bigger role in this story than by organizing visual information in the most digestible and comprehensive way.

Bringing order to chaos is what typographic hierarchy is all about. From a design perspective, there is no bigger or more important task than that.

What tips do you have for better typographic hierarchy?

The author

Peter Vukovic is a seasoned designer & creative director with 10 years of experience in worldwide advertising agency.
He is a proud member of the 99designs community. You can view his 99designs profile here.