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.
Comments
There have been many times for me as well, in deciding serif -vs- sans.
You state, “Personally, I love when I see headings in a serif font, and content in a sans-serif font.”
I always felt the opposite.
I’ve read that the content should be displayed in a serif font, becuase the “hooks” of the letters aid the reader in maintaining the flow as they read. Makes sense to me?!
Visually, I’d rather see a block of text as sans-serif. It nicer looking. Cleaner. I agree with you. Headings should = serif. Body/Content should = sans-serif.
I just got “hooked” using that other method.
I agree as well that sans-serif seems easier to read in a content situation. To be perfectly honest, serif is visually displeasing enough to myself that I usually skip over headers that use it as a font selection without thinking twice.
I also think that the argument about serif being hard to read for dyslexic people is kind of ridiculous. All of the letters have distinguishing features and if you’re going to change the entire font of your page because a 2% minority can’t see those features, then you might as well be using a 720 em font so the 20% minority with bad vision can view text without resizing it. While you’re at it, erase all content on the right side of the page so that the .05% of people with blindness in their right eye don’t feel left out.
Believe it or not but you CAN go overboard when it comes to accessibility.
@jammo: I think each person is going to have different preferences. From what I’ve read, the majority of people prefer a serif font for text in print, while preferring blocks of text on screen in a sans-serif font. I’m in that crowd. But absolutely to each his own.
@Michael: I can understand your response, but might word it a bit differently. Instead of stating that you can go overboard when it comes to accessibility, I’d probably say that it’s possible to take it to an unneccessary level. You’re right when you say it doesn’t make a whole lot of sense to increase your text size so that someone who is legally blind will read it easily without having to resize. The important thing is that the option is available to them.
Nice article as always.
I think that first and foremost, the typography should be readable (duh). This sounds very obtuse, but many times people think too aesthetically and drop the type to unreadable levels. Secondly, I personally feel the choice of fonts should be consistent and symbiotic with the concept and implementation of your site. I personally think it would be very difficult to justify using a serif font with this design. Personally, I believe that serif/sans-serif is ultimately a choice of style.
That’s a great point, P.J. and I’m kicking myself for neglecting to mention it. There are absolutely times where headings are completely unreadable and absolutely destroy the design. You’re so very right when you said that there should be consistency between your design and implementation. We’re on the same page when you said:
“Personally, I believe that serif/sans-serif is ultimately a choice of style.”
Thanks for writing.
I think it’s really important to choose the “right” style for text. It should also harmonize with the whole design of the website. The work of professional designer is difficult because of such details.
[…] Headings in the Right Direction – Monday By Noon kip to main content Secondary content Monday By Noon Home Archive About Contact Headings in the Right Direction Tags: design, headings, HTML, opinion There are certain design elements that can make or break a project for me. One such element in my experie […]