15 Great Examples of Web Typography

Quarter 2, 2008

Welcome to iLT’s second-quarter roundup of sites that use type well. It may be that not all the sites listed here are to your taste, but it’s hoped that something—even a detail somewhere—will inspire you. Invariably, these lists are subjective, so if you disagree, then feel free to do so in the comments below. If this list provokes discussion of what constitutes good web typography, then all the better. The designs are listed in no particular order. Click on the screen-shot to visit the site. Enjoy!

Designing the News

High contrast between header and main content area, lots of white space and well organised.

Designing the News

OmniTI

Nice logotype, clear text and a very nice colour palette. You can read more about the design process here.

OminTi

Designr.it

Gorgeous logo (who can name the typeface?), and lots of subtle details.

designr.it

Seed Conference

No Flash, no images, no fuss; just well-styled text and well-written copy; and proof that type alone can make one hell of a statement. I’d love to see more on-screen type treatments like this one.

Seed Conference

Design View

Andy Rutledge is a designer who practices what he preaches. I particularly like how the text size is related to the article’s age, with the most recent excerpt set in the largest size.

Design View. Andy Rutledge

WordPress.org & WP 2.5.x Admin

Although the WordPress blogging platform is not a web site, it is something that thousands, if not millions, of us see on our screens every day. If only more applications—on- and off-line—were built and designed like this.

WordPress

OurType

I’ve been reluctant to include this site before owing to its use of Flash. However, it does showcase beautifully some great typefaces (and some of my favourites, I might add).

Ourtype type foundry

The Deck

Another site that simply relies on text for everything. A great example of hierarchy and layout. Who said a picture paints a thousand words? Type paints more.

The Deck

Hell Yeah Dude

Busy without feeling cramped, and a site that clings to a good grid.

hellyeahdude.com

Information Architects

Not afraid of white space and a limited colour palette.

Information Architects

Naz Hamid

Beautifully done. A design that really lets in the light.

Naz Hamid

Jon Tan

Typographically rich, elegant and uncluttered; and the logo…it’s not an image!

jontangerine

Under Consideration

Lots of information without feeling cluttered, and complimented by a carefully chosen colour palette.

Under Consideration

Elliot Jay Stocks

This web site has been featured just about everywhere. It’s here because it uses type well too.

The Things we Make

Colourful, organised and big type.

The Things we Make


In a future article, Typographic Detail for the Web, we’ll look a little more closely at some of these sites.
Previous lists: 1, 2.


Tags:   

  1. Nice list, beautiful typography. Some sites are a bit old, but still great. Hope you’ll make more lists like this, I love them :)

  2. Fantastic list. I’m am more inspired than ever now!

  3. Thanks for the mention John, and special thanks on behalf of OmniTI, too! Seed Conference is a favourite of mine. Beautiful choice.

  4. WFL

    I’ve been waiting for another list like this from iLT ever since I discovered the site. I’m a self-taught typophile, graphic and web designer, and appreciate any and every resource given to me to help further my studies (especially since I’m poor and can’t afford to buy any commercial fonts :P).

    Good list, but on the aesthetic end, I would have left off thethingswemake. It is well laid out, but the darkened background highlights for some text start and end so abruptly that it feels difficult to quickly scan, in my opinion. If they only had a little padding on the left and right.. looking at how it was implemented, however, it would have created more of a typographical hassle and a lot more code to fix.

    Eh, I nitpick a lot. I should probably get back to work on my own site, since it is still under construction, itself. :/

    -WFL

  5. Mark Otto

    Now when you went through posting this list, what made you pick The Deck and SEED?

    Was it the typeface or the use of simply words in place of usually much more visual content? I do admire the versatility of the text, but the execution on both leave me wondering if they could touch it up just a bit.

    Line-height and kerning killed those sites for me.

  6. Excellent post. I am a fan of most of the websites on your list. Designing the News is such a beautiful site. Its attention to detail is amazing. I hadn’t heard of Hell Yeah Dude, though. It looks like an interesting design.

    A random thought: I always felt that The Things We Make would benefit from either increasing the padding on links or removing the background color, as it seems a little tight and out of place at the moment. More of a personal opinion, though.

    One of the most thorough lists I’ve seen in a long time. I submitted the story to Digg. Hope you don’t mind!

  7. Drake

    Awesome list! Though I’m not too fond of The Deck website, Coudal seem to have not quite hit their bar of excellence on that one. But the rest are phenomenal. Some others worthy of note are http://www.astheria.com and http://www.monocle.com

  8. This is a hot looking roundup! Nice picks, Love this style of typography. Makes me want to redesign my blog. Type makes me inspired. :)

  9. len

    Designr.it = Balmoral.

    nice site… keep up the great work!

  10. Kim Andre Fosslien Ottesen
    Thanks. Yes, some of them have been around for a while. I guess good design stays fresher longer.

    Brian
    Great to hear. That was the primary objective.

    Jon
    My pleasure. You set a very high standard.

    WFL
    You make some good points. It’s details like that, that I’d like to focus on in a follow-up article. Thanks for your contribution.

    Mark Otto
    My main reason for choosing those sites is that they demonstrate what can be achieved with text alone. I guess you mean letter spacing, rather than kerning. However, I’ll take another look. Thanks.

    Kevin Zak
    Thanks for the Digg and for your opinion. Greatly appreciated.

    Drake
    I like Astheria very much. Monocle I hadn’t seen. Perhaps that’s one for quarter 3. Thanks.

    adelle
    Be sure to let me know when you do redesign. Pleased that you found some inspiration in the list.

    len
    It certainly is. Balmoral designed by Martin Wait who, incidentally, also designed some great logos.

  11. Great list buddy! Beautiful looking site as well.

  12. Speaking of WordPress, I think you might like the WP work done by BraveNewCode (Link on their WP theme and WPTouch theme for iPhones & iTouches.

  13. Great list! ourtype is not new but still rocks! Like HellYeahDude very much, clean design with nice touch of color usage. Thanks for compiling this great list!

  14. Excellent compilation as always.

    I got a huge kick out of seeing my site at the top of the list.

    Cheers John.

  15. Matthew Guard

    If I see another gray and orange color scheme I’m gonna scream. Great typography but generally unimaginative use of color.

    MG.

  16. Wow. Thank you very much for featuring my folio! I’m honored.

    @len: Yes, it is Balmoral :-)

  17. Great examples, thanks a lot for the list!

  18. Great list, thanks!

    Designer.it font: Balmoral

    Edit: didn’t read the comments, you guys are fast in identifying type ;)

  19. Thanks for the great links :)

  20. otus

    Absolutely amazing and beautiful collection! An excellent source of inspiration for any future works… Thank you!

  21. Fantastic roundup John. Thanks for putting this together. Lot’s of inspiring sites in here.

    Also congrats to Jon Tan on having two sites he designed featured!

  22. Impressive work by the Information Architects team.

  23. DazzleCat

    hell yeah dude - great stuff!

  24. Such a timely article— I begin my first typography class *today* at the Art Institute of Pittsburgh. I’m RSS-ing this time :D

  25. This was a -godsend- today, all those beautiful sites with such lovely typography. THANK YOU. I had to design a leaflet today, and because I’m -anal-, I decided to do it all in type rather than add pictures. Aside of our work logo, everything wound up in different fonts and sizes. Fontin! My lord, I love that, and Delicious as well…

    I did run into a single, glaring kerning issue but since I didn’t know how to fix it in Photoshop I said screw it and let it pass. (But it still bugs me anyway.) I’ll drop it by, in embarrassment, if anyone’d like to give me some tips on how to improve it next time around. I daren’t put it up on my blogsite for fear of dying of shame.

    —Shuku

  26. Phil Barrett

    “owing to it’s use of Flash”?

    Go sit in the corner for ten minutes and think about your use of the apostrophe.

  27. Phil, it’s great you want to help iLT with grammar, but the tone of your comment is rude and patronising. If you genuinely wish to be helpful, might I suggest you moderate your tone. Perhaps even take the positive step of emailing corrections to John in future rather than being rude in public.

  28. Phil Barrett

    I would disagree, of course - I was aiming for light-hearted English sarcasm.

    Regardless, on a site focussed on typography, with an article on the apostrophe I would say think a comment is pretty justifiable.

  29. Shuku, just like in any other Adobe app, you can refine kerning by holding Alt and tipping right or left arrow :)

  30. Phil, if you were aiming for “light-hearted English sarcasm”, that was a huge miss. Rudeness is never justifiable; funny perhaps, between good friends, but never helpful otherwise.

  31. Great inspiration - always a pleasure to receive your newsletter.

  32. Johno, you are an amazing man! Thanks for showcasing my work, honestly the highest amount of appreciation! The best feeling in the world is having others appreciate the time and effort put into the things you love.

  33. Avix

    Please view tipography at comcastic.com good tipography and colours. and please comment it.

  34. Wow really good stuff, makes me want to update my wordpress blog, I have been lagging trying to get that up. Amazing stuff though.

  35. Nicetype, thanks tons! Will go give it a try -after- this weekend when my brain hasn’t exploded from working on organizing a choral festival.

  36. Chris T

    I’ve always thought the typography on South Creative was really nice. I think it’s Georgia?

  37. “I’ve been reluctant to include this site before owing to its use of Flash. However, it does showcase beautifully some great typefaces (and some of my favourites, I might add).”

    If this list is about showcasing sites that have great typography, why you would be reluctant to post a site built in Flash? How does Flash have anything to do with the quality of the typography?

  38. umd

    awesome! great post indeed.

  39. Whoa JT, I thought Phil was a bit cheeky with his smarmy school teacher bit, but not outright rude. Having said that, really am liking your site.

    Great post, keep the good stuff coming iLT…

  40. @Tink: I was wondering the same thing. I understand there are people out there who dislike Flash—and in many cases this is completely justifiable—but I don’t think that preference is relevant to the purpose of this article. In fact, there are Flash-based tools out there used specifically to improve web typography!

    Johno, I hope you’ll explain for us…

  41. Tink & brandy

    I don’t think that preference is relevant to this article.

    Where to begin? First, thanks for raising this. Second, you’re right, in that there are some wonderful Flash tools, like sIFR, designed to improve how type performs on screen (I sometimes use sIFR myself). However, let’s for a moment take this to an extreme: we open PhotoShop or Illustrator, and we craft a beautiful web site, using beautiful type; we then save that file as a jpg or png and upload it to the web as a web page. Well, it is a web page of sorts, but really it’s more of an image masquerading as a web page. I guess what I’m getting at is that we have to think about usability/accessibility too.

    Back to sIFR: the great thing about this method is that it degrades well. If no Flash plugin is detected, then HTML text is displayed. With the OurType site, as an experiment, I disabled Flash, and was faced with nothing but a blank screen.

    I’d be interested to know what others think about this topic. I don’t wish for it to turn into a discussion of ‘to Flash or not to Flash’, but I’d like to know what people think of this topic in its relation to good web typography.

    So, to summarise my ramblings: on the one hand, it’s a personal preference; second, it’s about usability/accessibility.

    Finally, Tink & Brandy sounds like a rather nice cocktail :)

  42. Elliot’s stands out for me. And frankly, I’m getting real tired of web safe fonts…Georgia particularly…sites all have that common element - bring on CSS3!

  43. If the site is planned well, the use of Flash can’t do any harm. I hate it when I click the back button, and it takes me elsewhere, but a site like OurType or Moretype don’t have a complex structure, and Flash makes them look fantastic and expand the usability (the typetester).

    SIFR still feels heavy and slow, it may look good in capable hands, but most of the time it’s just some font used for overlong headers. Also sIFR doesn’t work in Opera, and if your Firefox has AdBlock, you see those ugly labels above every header. Still, it’s great that sIFR can downgrade, if you use ImageMagick to turn your headers to pictures of type, the usability isn’t there at all.

    Web-safe fonts will still stick around for a while I guess.

  44. Great round-up, John! Especially like thethingswemake.com and Jon Tans detail rich site.

    Anyways, i gotta second Phil: Johno really should take a snapshot while sitting in his corner of choice for a few minutes. That indeed was a hillarious mistake :D

  45. If you want a coloured site, you can also take Heptagrama as an example, don’t you think?

  46. Firstly, The Deck is, I think, one of the best sites I’ve ever seen (didn’t like The Seed Conference, though: Times doesn’t work as body copy).. For those of us who aren’t primarily visual thinkers or readers it is great to see sites that craft and organise text so well. HTML documents are, after all, fundamentally textual. The only problem is that makes my own design seem so paltry!

    As for the Flash thing - and this is related to what I just said - plain old text is just fine. It’s fast, copyable and flexible. Flash isn’t. Why complicate things when there’s a perfectly good, simple and democratic medium readily available? I know SIFR ‘degrades’, but it strikes me as too much hassle. Good design accepts the strictures of the medium.

    Just thank Microsoft for Georgia.

  47. I was wondering just last weekend when you were going to post this for the quarter. I always love this resource, John! Stumbled and bookmarked. I hope with my redesign I’ll make it into next quarter’s list. I’m gonna work real hard on it!! :D

  48. This is great list, very nice to see! My personal favorite might be Information Architects.

    I’d be very interested to see, in your next installment, some sites that are either very large and content-heavy or not for design-related companies/subjects. It seems like this kind of beautiful work is much easier to pull off for individual blogs or design studios, but harder for larger corporate sites that have a lot of varying types of content.

    I just finished up a redesign in-house for a site with a wide array of content and found keeping things clean and simple to be a challenge.

  49. M.J.

    Ugh. But Elliot Jay Stocks uses that awful Evanescence-era, “amateur font foundry” style “quill” font for its header… The rest isn’t enough to make up for that atrocity.

  50. Thanks for this inspirational list, John. There were a few sites here that I haven’t seen before, but sure glad to discover them thanks to you.

    What happened with Digg on Wednesday? I was ready to digg this post, but was faced with Digg’s page saying that it’s unavailable, they’re trying to get back, and meanwhile why don’t I visit some other sites.

  51. Thanks for the list.
    I ♥ the number one.

  52. Just discovered this article through designflavr and i like it a lot. It’s got me so much inspired and I hope I can use some of the mininal typographic style in my layout some time.

  53. Hello…I really love all the sites chosen…except can anyone explain to me why Elliot Jay Stocks website made this other wise impressive list?

    Why has it been ” featured just about everywhere.” ?

    Does not anyone notice that it borrows heavily from Vaughan Oliver and more so Chris Bigg’s spectacular and innovative calligraphy from their 4AD album covers late of the late 80’s-90’s?

    Perhaps its his work on websites in his portfolio ? That seems to stand out a bit more.

    pastiche anyone?

  54. Kara

    well done! Love the Jon Tan.

  55. A List Apart is one of the best. http://alistapart.com/

  56. I always learn new thing everytime i visit your website. congratulation

  57. thnx for selection. these are great.

  58. briga

    Здорово!!! Аффтар, пости ещё!!!

  59. X.

    Another website that features great typography:

    http://www.kevinwoo.com/

  60. Designr.it is great! I like everything: simple and stylish design, user-friendy layout, color palette, etc… Very nice site!!!

  1. sumanpark's me2DAY—May 8, 2008
  2. meneame.net—May 8, 2008
  3. links for 2008-05-10—May 10, 2008
  4. miriya's me2DAY—May 18, 2008

previous post: Sunday Type: mirror type

next post: Sunday type: crossword type

April Fonts January Fonts January Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts december Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts May Fonts April Fonts March 2011 Fonts February 2011 Fonts January 2011 Fonts December 2010 Fonts November 2010 Fonts October 2010 Fonts September 2010 Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February 2010 featured fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts