A Simple Way to Make Your Headings Stand Out

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

What do ABC, CNN and Fox News all have in common? The obvious is that they all offer news. The less obvious is that they all use Arial as their typeface for everything. This results in a bland, boring and uniform look and feel. There are many flavors in typography. Choosing a good combination to use for your body text and headings is a skill that takes time and practice. When you finally find the right combination of typefaces, you will notice that your site looks a lot more flavorful and exciting.

Take a look at the typeface combinations used at The Daily Beast in comparison with ABC News.

Which one looks more exciting? By using different typefaces for headings and body text you’ll be able to make your site look better instantly. One way to do this is to use a serif font for your headings and a sans-serif font for your body text. This gives your text a contrast in letter shape, while making it easy to read.

It took me a while to figure out which typeface to use for my headings. I wanted one that would blend well with my body text, but wouldn’t overshadow it. The typeface I ended up choosing was Cambria. It is a serif font that blends well with Lucida Grande, my body text typeface, which makes it a perfect combination.

Take some time to figure out which typefaces make a good combination for your headings and body text. This small and simple change may seem like a subtle detail, but when you step back and look at your site you’ll notice that it has a lot more flavor and flair than it did before. That’s because good design is in the details. Never underestimate the power of typography.

interface libraries

interface styles

Related Articles:

  1. How to Design an Immersive Page Layout
  2. 5 Ways to Show Off Your Content

4 Responses to “A Simple Way to Make Your Headings Stand Out”

  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 Reply