6 tips for better typographic hierarchy in web design

Peter Vukovic

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.   

typographic hierarchy example
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

paragraphs vs sections
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

typographic hierarchy in new yorker magazine
The New Yorker creates typographic hierarchy through varying font size, typefaces, color and layout.

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.

Check out our articles on “Google Font pairing for your website” and “3 principles you need to pair typefaces perfectly” to learn more.

4. Use larger type for body text

large body copy
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

typographic hierarchy
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

setting up typographic hierarchy

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
Peter Vukovic

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.

Related articles

How to create more fun and playful typography

How to create more fun and playful typography

Good typography may be hard work, but designers shouldn’t forget to have some fun with it! While crafting fonts and typographic characters can sometimes feel stiff and overly mathematical, we want you to help you find the joy in creating more expressive and playful typography. Of course, this approach is great for children-oriented design projects—but let’s not limit ourselves. After…

Digital Fonts: A condensed history

Digital Fonts: A condensed history

More than ever before, designers today are tasked with designing with digital tools, for digital environments like web pages. The digital-to-print connection, once paramount, is now only one task among many. This change affects all aspects of design, but perhaps none more than typography, where the readability of digital fonts depends so much on the…

How to make the right font selection for your design

How to make the right font selection for your design

Making the right font selection is like choosing the right outfit. Whether you do it consciously or casually, it says a lot about your style and taste. Just like your everyday outfit won’t work for every occasion, different fonts serve different purposes. A bubbly font is perfect for a kid’s birthday party, but try using it in corporate collateral—you’d never be…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%