27Jun2006

Typography for Headlines

Update 01/30/07: I've put these into a blog so that I can add them more easily. 200 headlines is my next goal!

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).

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

Related: looking for examples of great comment design? Check out my blog comment design showcase.

Parting Thoughts

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.

20 Comments Posted

Christian, thanks for a great article. Well, maybe you'll be interesting in my article 25 Best License-Free Quality Fonts. ;)

With warm greetings from Saarbruecken,
Vitaly Friedman

1. Posted by Vitaly Friedman on January 02, 2006

Interesting idea. Thanks.

2. Posted by Joerg Petermann on January 02, 2006

Sheesh! Never saw that before (probably still wouldn't, if you didn't leave a trace in my referrer logs).

Nice collection, thanks for letting me in!

BTW, why not experiment with the Typetester for a while?

3. Posted by Marko Dugonjić on January 13, 2006

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!

4. Posted by Christian Watson on January 13, 2006

Gasp! Shock! Wow!

So surprised I was included! But thanks! And major props has to be given to my theme's original designer, Clemens at:

http://clemens.orth.me.uk/2005/05/15/wordpress-theme-3-column-relaxation/

I just tweaked the colors & fonts :)

5. Posted by Alvin on March 10, 2006

Collection of headers was very helpfull. Maybe with css style and fonts used it would be more complete but that would be too much.

6. Posted by Marko Petkovic on March 28, 2006

Great collection of Blogs. I've found several great blogs from your list! How about putting together a resourse of the best headlines?

7. Posted by ClassifiedAd on April 17, 2006

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?

8. Posted by Gordon on April 28, 2006

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.

9. Posted by v on May 01, 2006

What do you guys think about the headlines at http://www.foxymcloud.com?

10. Posted by Christian Montoya on July 05, 2006

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.

11. Posted by Christian Watson on July 05, 2006

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!

12. Posted by Christian Montoya on July 06, 2006

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?

13. Posted by Christian Watson on July 06, 2006

I am not using sIFR, I don't use that on links. It's plain text with a GIF overlay, here's the tutorial:

Worn Type

14. Posted by Christian Montoya on July 06, 2006

Nice resources for proposal seekers.......

I have already bookmarked it for future reference

15. Posted by web design on August 04, 2006

Nice little article. I still don't feel right about my site's headlines though.

16. Posted by J David on August 25, 2006

really cool! I love these headlines!

17. Posted by zhaiduo on August 28, 2006

Thank you for this collection of headlines!