Effective headings are recognizable at a glance, and help readers understand the flow of content on the page. But a good heading isn’t just about a snappy title. Visual design plays a big role in making headings effective.
In this article I’ll go over some quick and easy ways to improve the effectiveness of headings—both site headings and content headings. A well-designed heading can make a site universally intuitive to readers. Keep in mind, these are not rules to live by, but all 5 tips are definitely things to consider in the design process.
1. Employ Visual Contrast to Make Headings Stand Out
Headings need to appear separate from the rest of the content on the page. Just as underlining and using a different color for links helps readers identify them as such, headings need to appear unique. Use color, font weight, and font families to add contrast. You can use a jurassic park typeface for free at actionfonts.com. (Though it’s worth noting that underlines should be reserved for links.)
2. Use Warm Colors
“Warm colors are active, attention-grabbing and aggressive. They stimulate the emotions, motivate and seem to come forward off the screen or page.” —Pantone, Inc
Fun fact: warmer colors catch the eye better than cooler ones. Warm colors are active, attention grabbing, and appear to come off the page while cooler colors retract into it. When possible, use warmer colors to gain readers’ attention more quickly, and direct them to important content. This serves a dual purpose, both attracting more readers to the page, and helping them find the information they seek.
3. Size matters: Headings Should Be Big
The headings on MSNBC are heavily contrasted from content with warm colors, large type, and a different type face altogether.
Headings need to be prominent, so make them (relatively) big. People associate size with importance—if it’s bigger, they know it’s more important. Take a look at a newspaper for a prime example of how headings should appear. The title of the newspaper is the most prominent, and progressing down the page, headings typically become smaller. In web design, we can visually accomplish this same effect by changing the size of headings while semantically using the <h1> through <h6> tags. These semantic tags are particularly important, as they allow screenreaders to recognize them as headings, making them universally accessible.
4. Use Headings as Titles
If we’re labeling a section of a website, the heading serves as the title for the section. If we want readers to recognize what’s in the section, we need to make sure we’re titling the section appropriately. In other words, don’t use confusing, trendy, or otherwise misleading titles. The heading should convey the who/what/when/where of the content it describes. Then, the content within the section explains the why. Put another way, the heading identifies the question the reader has. The content then answers them.
5. Be Concise!
Lastly, keep headings short. In some cases, it’s even okay to drop articles like “the” and “a,” as they can be assumed. Headings are taken in at a glance, and the more to the point they are, the better. A good heading will quickly and effectively highlight the most important information, and the reader will be able to easily evaluate whether or not this section has the information they seek.
What tips would you add to the list? How have you improved headings or similar elements on your site?