Headings in the Right Direction

There are certain design elements that can make or break a project for me. One such element in my experience thus far has been headings. It may sound strange to many, but I think taking a worthwhile amount of time and devoting it to the proper implementation and styling of headings is a smart move for both the designer and developer.

The Reasoning Behind Headings

As a developer, you have probably read that the attention span of the average site user is quite short and can be measured in a matter of seconds. What’s also interesting is how they’re reading content on the Web. Luckily for us, Jakob Nielsen of useit.com has published a fascinating visual measurement of just that. In his report on how users are reading Web content, he provides a heat map of various typical Web pages and shows where people are reading. It is blatantly obvious that the average user is, as Jakob Nielsen put it, reading in an ‘F’ pattern.

This ‘F’ pattern is consisting mainly of page headings, which supports my stance behind their importance. This doesn’t go to say that any content you publish is any less important, it simply states that your headings are read first, and more often than your content. This is something that should be kept in mind when marking up any content intended for the Web.

Designing your Headings

I’m always taken back when I come across any particular work that really makes amazing use of typography. Typography is something I would really like to spend some time researching and learning because it is definitely an art form. When used properly, typography can help a stunning design come together, but when implemented poorly, font choice can destroy your work. I hope to have more experience on this topic in the future so I am able to provide some educational content on the subject.

Serif or Sans-serif for Headings?

The limited knowledge I do have on the subject has primarily to do with typography on the Web. I have read that users prefer to read headings in a serif font, while blocks of text are easier to read when in a sans-serif font. Faruk Ateş had written very comprehensive article on the issues surrounding serif and sans-serif on the Web. He came to the conclusion that there really isn’t much of a conclusion. The answer depends on many factors, and could vary given the situation. One fact remains, however; modern browsers and operating systems have really made the display of fonts much easier on everyone’s eyes with their built in anti-aliasing features. Mr. Ateş brings up some great points in his writeup and I recommend reading it as he feels the same way I do in many respects.

I know that as developers we’re extremely limited as to which fonts we’re able to use, but if we take a bit of time to play with things a bit, some really impressive things can happen. The W3C gave us 6 levels of headings to work with, we can make the best of it. There are many developers that feel 6 levels of headings are way too much, and often times that is the case, but they are available to us. Just use your headings properly, and you’ll be surprised at the improvement of your content.

Deciding on Heading Colors

In my opinion, content headings are a great way to include some colors from the designs color scheme. Staring at a block of text consisting of a single size and color seems bleak when compared to a section of content that has been broken up into smaller paragraphs guided by headings that pop.

To me, it’s more inviting to find content that is broken up into sections that are easier and quicker to read. If I’m staring at any lengthy amount of information, I get flashbacks of high school history books which I just didn’t enjoy reading.

Headings for SEO

When used properly, headings can be an excellent boost for your SEO. Many search engines love it when keywords are used in your headings and give that some weight when they’re given particular queries. As with all markup methodologies, it is important not to abuse this knowledge. Your content should flow normally, and keywords should not be included simply to aim for a good ranking in search engines. If your content revolves around particular keywords, use them when appropriate and perspective users will definitely find your content when they’re looking for it.

My Personal Preferences

Personally, I love when I see headings in a serif font, and content in a sans-serif font. Given the design of Monday By Noon, I don’t always practice what I preach. When putting this site together, serif fonts just didn’t seem to fit so I opted against using them and stuck with sans-serif. Perhaps I made the wrong choice, but my personal preference lead the way, as it does with any design I put together.

If a serif font just doesn’t work with a design, I say stick with sans-serif; you may run into the case where poorly designed headings really break your work.