Give Your Headings Higher Contrast with Serif Fonts

by on 09/02/10 at 3:02 pm

What does the websites of ABC, CNN and Fox News all have in common? They all use Arial as their font for all their text. This results in a bland and uniform look and feel, and makes the headings hard to distinguish when users scan. A serif font can give your headings higher contrast and give your website more flavor and appeal.

Look at the fonts used at The Daily Beast in comparison with ABC News:

Which site has higher contrast between headings and body text? The answer is The Daily Beast. Their serif headings allow users to quickly scan story headlines because it contrasts so well with the sans serif body text. ABC News’ sans serif headings blend into the sans serif body text making it slower for users to scan each story headline. Using a serif font for headings and a sans serif font for body text can give your text higher contrast and make it easier to read. Users shouldn’t struggle to scan your headings. Make them easy to scan by giving them higher contrast with a serif font. When your text is fast and easy to scan, you’ll get more activity and engagement from users on your site.

4 Responses to “Give Your Headings Higher Contrast with Serif Fonts”

  1. Rajesh

    Sep 3rd, 2010

    Yes I agree. Using different fonts and styles helps. But I’d add that links that are accompanied by a thumbnail image or photo gets the most clicks. Just playing with fonts may not be enough, it needs a picture too.

  2. Ashit Vora

    Sep 14th, 2010

    Not sure about Cambria but Lucida Grande is Mac font.
    What do you use for other OS?

    What do you think of Yanone Kaffeesatz (http://code.google.com/webfonts/family?family=Yanone+Kaffeesatz) for heading?

  3. Rebecca

    Feb 28th, 2011

    The Daily Beast example looks messy and difficult to parse. I’d go for the ABC version. It’s a news site, not an advertising campaign. People are there primarily to scan through information and find the bit that interests them, not battle through a load of text that looks fancy, but is constantly making the eye jump around the page. Good web design is about creating a look and feel that suits the content and context of the page/site.

    • Sachendra Yadav

      Aug 19th, 2011

      I think the proposal to diffrentiate between heading and body is fine, the example used is wrong. ABC does differentiate by making the headline big and bold, it may become a bit more nuanced by using diffrent fonts as suggested

Leave a Comment