27Jun

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.

40 Comments Posted

I love it! No need to be trapped in sans serif modernist purgatory (I can't call it hell).

Here are some type site's interetesting takes on it:
http://www.typographi.com/
http://www.typotheque.com
http://typophile.com/

and a dad blog to boot:
http://daddytypes.com

1. Posted by Stephen Halsey on June 28, 2005

Stephen, thanks for the links - I'm still working on how my typography is going to work out. And frankly, I'm beginning to think my site needs a color injection. Now, if only I had some spare time...

2. Posted by Christian Watson on June 28, 2005

Interesting to see them all together like that! Nice collection. I'm honored to be included. :)

3. Posted by Jeff Croft on August 03, 2005

This page alone is a great resource for ideas for everyone and can be a fun game too. I can only name 4 of the above sites..... ;/

4. Posted by Rick on August 03, 2005

Very interesting post, I see you have included almost all the big web designers like Andy Budd, Authentic Boredom...

I think SEO has changed the way we design sites. Text is the only way to go up in the ladder of the search engines.

5. Posted by Petros Dimitriadis on August 04, 2005

I think your header looks nice, could be a bit more legible.

6. Posted by Wesley Walser on August 05, 2005

I'm shocked, shocked, that you overlooked my insane reliance on Zapfino for Weblog headlines. (Me and Quarter[-]Life Crisis, actually.)

7. Posted by Joe Clark on August 07, 2005

I recognise some of the sites, but not all of them. Links to the respective blogs would be good?

8. Posted by James on August 07, 2005

Hi,

I've recently been building my own collection of headline typography and article layout examples. Thanks for the addition of another great resource! The only suggestion I have is to link the images back to the originating site so the headline can be viewed in context. I recognize most of these, but I'd like to visit the sites of those I don't.

9. Posted by Michael Wilson on August 08, 2005

All, thanks for the feedback, and Joe, sorry for not including your site in my list - indeed one of the few (only?) sites using Zapfino for its headlines. Any reason why you don't include the date in your headlines, by the way.

Anyway, by 'popular demand' I've linked the headlines to the sites they come from. Should have done this in the first place, of course, but I was just too damn lazy. Lesson learnt.

10. Posted by Christian Watson on August 08, 2005

great post, man! This flies in the face of those that say "all blogs are the same" ... there's quite some variety here ... loving the large type! Its amazing what you can do with a headline.

11. Posted by chuck on August 09, 2005

More of an illustration type feel: http://www.bearskinrug.co.uk

Speaking of big type, here's some shameless self-promotion: http://www.danielmall.com

12. Posted by Dan Mall on August 09, 2005

Dan - thanks for the link to Bearskinrug and to your own site - I've added both those headlines. You may have won the prize for the largest typeface, I do believe!

13. Posted by Christian Watson on August 09, 2005

Awesome! What's the prize? Let's hope it's not reading glasses...

14. Posted by Dan Mall on August 10, 2005

Ack! I'm not sure - hmmm, maybe I should start some sort of giveaway thing. Yes, with toasters-no, how about iPod shuffles ... combined with food ... or art.

What a concept - I bet no one's thought of that before. Oh, they have? Doh!

15. Posted by Christian Watson on August 10, 2005

Awesome article, really usefull list!

Its refreshing to just see a list of images to preview some typography on other sites. No junk, just type. Thanks again

16. Posted by Danny Halarewich on August 14, 2005

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

17. Posted by Vitaly Friedman on January 02, 2006

Interesting idea. Thanks.

18. 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?

19. 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!

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

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

22. 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?

23. 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?

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

25. Posted by v on May 01, 2006

Great idea. This is a lot more interesting than the random css-based site galleries you see around. This is actually useful as it it shows why sites are notable from the small details that matter.

26. Posted by Dat Nguyen on June 08, 2006

Dat - thanks! That was my intention. Sometimes it's more helpful to look at variations of a specific design element than sites as a whole.

I could have sworn that Devil's Details had a whole site devoted to the same idea, but their site has been down (splash page only) forever.

27. Posted by Christian Watson on June 08, 2006

More examples from Spain:

alexsancho.name
sentidoweb.com (Blogs Media, people of cssmania.com)
microsiervos.com
htmllife.com (Devils Details author)

Thanks

28. Posted by Xavi on June 09, 2006

It's interesting to note which ones use SIFR (Flash headlines). It sure looks a lot more interesting.

I'm guessing these screenshots were taken on Windows - or at least, with a system with antialiasing turned off.

Another theme/head game: identifying modified Wordpress themes. I'm guessing the ones with the calendar icon on the left side are WP themes... am I wrong? =)

29. Posted by Allan White on June 09, 2006

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

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

31. 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!

32. 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?

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

34. Posted by Christian Montoya on July 06, 2006

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

I have already bookmarked it for future reference

35. Posted by web design on August 04, 2006

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

36. Posted by J David on August 25, 2006

really cool! I love these headlines!

37. Posted by zhaiduo on August 28, 2006

Thank you for this collection of headlines!