Mastering Headings and the Hierarchy of Text

How do you arrange the text content of a website page? How do you write a compelling piece of content that will keep readers skimming to your call-to-action? The answer lies in how you arrange your words, in the headings and text hierarchy.

Text and design go hand-in-hand. You wouldn’t post a website blog with a solid column of text and your readers wouldn’t read it. However, when most people think of graphic design, they automatically exclude text. After all, there’s text and there are pictures, right? Not so!

Text is just as much a visual element as your graphics and colors. Text is a prominent element, especially with so many pages composed mostly of text content. As a rule, no-one likes to read a solid column of text, and we do like to skim section headers to quickly pick out information. If you want to build heat maps (a study of on-site page use) instead of bounce rates (users who leave without reading), text hierarchy is serious business. The headings and organization of the text are what shapes the reader and customer experience. This, in turn, is why headings are essential to SEO page structure and your inbound marketing strategy. 

Text Hierarchy and Headings

So what is text hierarchy and how do headings fit in? A hierarchy is anything organized from top to bottom. King to serf, director to a production assistant, general to private, and first chair to last chair; these are all examples of hierarchies. A text hierarchy is just the same, ranking the page elements from the most to least prominent. Inside one page, however, there may be many smaller hierarchies – making for interesting graphic design down the page.

Also, search engine crawlers scan your headings just like a reader might. Keywords and useful information in your headings (and immediately following) can win you a higher ranking and sometimes even a snippet spot. Let’s break down the heading and hierarchy elements:

• H1 Title / Headline
  • The title is the largest text, often made into a prominent title banner for modern blogs and pages. The total summarizes the page and is normally built around keywords or target search phrases (long-tail keywords).
• H2 Subheadings
  • Subheadings organize a page. Use them to title paragraphs and sections. They serve as the roadmap for the page and are often the first thing that readers skim. Use keywords in subheadings and, if you’re a pro, work in a few jokes.
• p Paragraphs
  • Paragraphs are the meat of the page. They contain detailed content and often require no notation. Paragraphs often are broken up every three to six sentences and/or lines of text. Clusters of paragraphs can be organized under sectional subheadings.
• H3 Subheadings 
  • Sometimes used when the subjects within a section are diverse and merit organizing further.
• * Bullet Points
  • These points can be used between or embedded into the paragraph. The points help summarize information and act as a visually dynamic difference in the text layout.
• ” Floating Quotes
  • Quotes in blocks or at full-column width are used to break up paragraphs and add emphasis to the quote contents.

A Designer’s Eye for Page Design

Think of your text content from the perspective of visual design. It can help to sketch or model the visual block elements of the text as you would lay them out. Newspapers and magazines have been using this method for over a century. Use matching rectangles for your subheadings. Model how long each section and paragraph should be for visual appeal and for it to be aesthetically skimmable.

Naturally, the text forms a hierarchy. You might have several H2 sections with H3 sub-sections and bullet points. Embed floating quotes for visual appeal and emphasis of content. With this, you will likely decide where to place a few images, and how the content ought to look when framing those images.

Headings are essential to page arrangement. They guide the reader’s eye along with the page. Headings mark the useful and interesting paragraphs on each page. After using the markings, headings in the hierarchy make a page both easier to read and more enjoyable to look at, which is why smart designers and content writers eventually become pithy subheading authors, working jokes, and rhymes into the headings as the quality of content improves.

Non-Article Text Design

Headings and text hierarchy matter beyond primarily text pages, as well. Consider how text size, font, and heading influence your home page. What would appear to be sub-sections in a text page can be organized into graphics with blurbs in web design. Next up, headings might have a description text and a few detailed info-bubbles instead of the usual hierarchy. However, behind the scenes, H2s and H3s are still being used and still help to organize your page.

Honing Your Hierarchy Technique

Titles that Earn Trust

A good page title needs to sum up the page perfectly, embody a keyword, and earn the trust of the reader. That is asking a lot, but the right title fits every time. It helps to build your page out of concepts that make a good title. Fortunately, the principle of inbound marketing means often, the contents of your page are often summarized into a title that people are looking for – people who would find your page useful.

Writing Powerful Subheadings

Writing subheadings is about leading your reader. Remember that they read the subheading before the paragraph. The subheading both tells them what to expect and makes promises on what they’ll find. Subheadings can be definitive (ex: “The Molecular Structure of Potatoes”) or leading (ex “When the Plan Failed”). The key is to know your reader.

If your readers have come for straight-forward information, break up your subheadings as mini-guide headers. They should be clear and indicate the details found in the paragraphs. If your readers are along for the ride, lead them and work a little cleverness into the subheadings like jokes or rhyme.

How to Detail Your Details

Paragraphs are about arranging your points. But sometimes, you want to use a list, chart, bullets, or quotes. These elements help to break up your text blocks and to highlight key information. Your goal is to find the right facts to highlight. Bullet points can help outline a process that you’ll explore in detail, or just organize a quick list of diverse statements. Lists sometimes offer a lot of information or a very detailed pack of information in an easy-to-skim way.

Space out your bullet point lists so they break up the page. Quotes work best as narrow strips or side-mounted spotlights of key content. Numbered lists work best at the top of content or when summarizing a large chunk of information for the reader’s benefit.

Building Your Reader Experience

Finally, consider the reading experience of your website visitor. This is not just about their aesthetic appreciation of the page, but also their consumption of the content. Many brands focus their best content and the page summary near the top – before the page-bouncers bounce. Tech and academic brands sometimes embed their best content ‘below the fold’ because they know only dedicated readers want the technical juicy details.

This can affect your page hierarchy. If you place a ‘TLDR’ (too long, didn’t read) bullet summary at the top, your subheadings should reflect that summary as you scroll down. A ‘listicle’ is a series of equal subheadings, often mixed so that the list feels like a pleasant jumble. This contrasts to a count-down, which is like a listicle but the subheadings themselves are ranked. 

Educational and how-to articles are more likely to have a dynamic design. It’s more common to see H2 sections followed by bullet-lists and H3 subheadings below, with multi-point sections throughout the page. This indicates in-detail content where the facts are organized in a way convenient to the reader.

The Right Page Hierarchy for Your Website Content

The right page hierarchy design depends on the page you are creating. Blogs commonly found in article-form with the best articles broken up with an attractive text hierarchy. Home pages are often artistic in their display of headings and subheadings, while product pages use text hierarchy to neatly present the details of each product in a way easy for the customer to read. Just remember that H1 is your page title, and everything cascades into sections neatly from there. 

For more exploration in website design, brand design, and text hierarchy, contact us today!