Here’s some tips to help users find the content they are looking for. These tips show how to make headers more effective and easier to identify and apply to both page headers and content sub-headers. Although they aren’t the gospel they will definitely help and are things to consider when designing a site.

1. Make Sure You Go Big

We’ve been saying this since the design of sites went to 1024 resolution. Once they got the extra width that was so badly needed (remember designing to 800×600?) content got to breath and headers could start making more of an impact. Users know that when something is bigger, it’s more important. Look at any newspaper and you’ll get the picture. The title of any newspaper is the most prominent, and as you move down the page, headers typically become less prominent. When designing an interface we can create this effect by changing the size of headers.

The headers on MailChimp use a large type and are given padding to give them space to breath and to stand apart from the page content. Sub-headings still remain large and are clear to see.

2. Keep It Brief

Make sure that your headers are short. It’s a given you’ll need to use the likes of “the” and “a” from time to time but keeping them short helps a user to quickly determine where and what they want to view, but not only that it gives them a better user experience that will make using the site a comfortable experience.

3. Use Colour and Contrast

You can easily make headers bigger using larger type but headers will still need to appear separate from your content. Just as if your using underlines or different colours for links, headers must appear unique as well. Colour, font weight, and font families to add contrast to your headers all work. Warmer colors will catch the attention of the user better than cooler ones. Warm colours appear to come off of the page while cooler colours blend into it. Where possible, use warmer colours or use a well contrasting one to stand off of the page.

Made In England use a vibrant orange and italic type face to give headers contrast from the body text.

4. Make Things Clear

So you’ve made your headers big, you’ve given some thought to the colour and typeface and you’ve kept them short, but if you’re not labeling a section of your website clearly then you’ve failed in making them stand out. It’s paramount to make sure your headers are titled appropriately. Don’t use confusing, trendy, or otherwise misleading titles. OK have a bit of fun but your header should convey the who/what/when and where of the content it describes. Let the copy do the full explanation and make the title do the job of “doing what it says on the tin”.

Sometimes It’s Not Always That Easy

So it’s not always possible to cover all of these when designing a web site. Sometimes it depends on the brand and the colours and type faces that the client might be using, or it could be the client themselves. But if you try and follow these tips and advise the client to best practices then it is possible to make the headers work for the user and the site.