Typography for Headlines

I’ve been thinking about how I might improve the typography in my headlines – be more creative, give them more ‘pop’, that sort of thing. So I took a look around some of the sites I frequent the most for some inspiration (and maybe even spot a trend or two).

Modern Life heading typography design example
Modern Life

Here’s a collection of the ones that caught my eye.

Parting Thoughts About Typography for Headings

Big type is in – the bigger the better! But for how long? Unusual date treatments (e.g. calendar style) seems to be increasing in popularity, and is certainly a style that appeals to me.

What did surprise me is how many sites (not web design-related) have awful typography, even well known, highly trafficked ones.

I’d certainly be interested to know about other examples that I’ve missed. I’m sure there are plenty out there.

Further Reading About Web Typography

21 thoughts on “Typography for Headlines

  1. Marko – you’re welcome! The more I look around, the more I find great examples of typography. I’ve been looking at regular ‘news’ sites, but the best examples always seem to come from blogs.
    And, yes, Typetester is a great tool!

  2. Interesting indeed. Whilst not typography specific I’ve always considered my headers as a key element in the site. They provided the most obvious visual cue that “something new starts here” and I’m always tweaking them.
    I’ve discussed this on my site previously, but for my last re-design I increased the size of the headers dramatically to FORCE me to write better articles (bigger headers = more prominence = more visibility = pressure to perform… or something).
    Question then: why ELSE would you have big header text?

  3. Interesting stuff. I think typography is an often overlooked aesthetic feature of websites, and your post reminds me how important it really is. Thanks. But now I’ll have to start re-evaluating the font work on my own site.

  4. *Christian* – interesting idea, but using that effect with such a small type size makes the heading hard to read. The effect would work better if the type was about twice as large.

  5. Thanks very much for that suggestion, you are 100% correct and I just needed someone else to say it because I didn’t realize it myself. I stepped up the header size a little and I might reduce the effect. Thanks again!

  6. *Christian* – that’s definitely better, although I think you’re right in reducing the effect a little more. I also wonder if that effect might work better in a different font – perhaps something a bit blockier. You’re using sIFR, right?

Comments are closed.