The Logos of Web 2.0

  • Fonts in Use
Fonts in Use | Stephen Coles | March 7, 2006

There is no official standard for what makes something “Web 2.0”, but there certainly are a few tell-tale signs. These new sites usually feature modern web technologies like Ajax and often have something to do with building online communities. But even more characteristic among these brands is their appearance. Web 2.0 sites nearly always feel open and friendly and often use small chunks of large type. The colors are bright and cheery — lots of blue, orange, and what we jokingly call the Official Color of Web 2.0: lime green.

You can see some of these striking commonalities in Ludwig Gatzke’s compilation of nearly 400 Web 2.0 logos. Read on for a breakdown of the fonts used in a few of our favorite brands.

The Softies

A clear trend in new identities is the use of soft, rounded sans serifs dominated by VAG Rounded (AKA Rundschrift), but also including Helvetica Rounded, Arial Rounded, Bryant, and FF Cocon. All of these lend a modern friendliness to what might otherwise be a cold trademark.

Oct. 2008 Update — New and underused fonts in this category: Foco, Tondo, FF Netto, Estilo Text, and FF Unit Rounded.

ClipShack Logo ClipShack — video sharing
Font: VAG Rounded and Light obliqued
Zimbra Logo Zimbra — collaborative calendar
Font: VAG Rounded Light
Wayfaring Logo Wayfaring — custom Google Maps
Font: VAG Rounded (fattened with added stroke)
Kajeet Logo Kajeet — mobile phone service
Font: VAG Rounded (custom ‘j’)
Zopa Logo Zopa — lending exchange
Font: similar to Frankfurter Medium or Bryant Bold Alt
Pando Logo Pando — file sharing
Font: similar to Bryant Medium Alt
MySpace Logo MySpace — social networking
Font: Arial Rounded Bold and Bell Gothic Black
TracksLife Logo TracksLife — personal database
Font: Arial Rounded Bold
Eventful Logo Eventful — collaborative calendar
Font: Arial Rounded Bold (slightly smooshed)
Spongecell Logo Spongecell — collaborative calendar
Font: Arial Rounded Extra Bold
Skype Logo Skype — internet telephony
Font: Helvetica Rounded Bold
ShoZu Logo ShoZu — photo sharing
Font: FF Cocon Bold
Tabblog Tabblo and Tabblog — photo sharing
Font: FF Cocon Bold

The Futurists

Some sites are reflecting the technological breakthroughs of Web 2.0 with a look that says “tomorrow’s techno”. Pixel faces, hard edges, and ultra simplified forms are not as common as the cozy shapes from the group above, but they represent a good portion of the latest internet startups.

Oct. 2008 Update — New and underused fonts in this category: FS Sinclair, FS Alvar, FF Cube, FF Netto, Sys, Notes Style, Purista, Stratum, Neutraliser, ITC Tetra, Stainless, Atrament

Last.fm Logo Last.fm — musical social network
Font: ITC Ronda (customized)
Alternate: Avernus
Photobucket Logo Photobucket — photo hosting
Font: Digital Sans Medium
Plazes Logo Plazes — geographical networking
Font: Base 9 Regular SC
NewsGator Logo NewsGator — RSS aggregator
Font: ITC Bauhaus Medium
ReminderFeed Logo ReminderFeed — reminders via RSS
Font: FF Dot Matrix Two Regular
Technorati Logo Technorati — weblog search tool
Font: Neo Sans Medium
TagWorld Logo TagWorld — social networking
Font: Handel Gothic Bold
Shoutwire Logo Shoutwire — news sharing
Font: Agency Bold

The Classics

Safe standbys like Trade and News Gothic, Frutiger, Avenir, Interstate, FF Meta, FF DIN, and the always ubiquitous Helvetica continue to see use in new web logos.

Oct. 2008 Update — Using uncommon alternatives to classic typefaces can ensure a logo is unique. Here are a few new or underused alts to the standards:

Xanga Logo Xanga — weblog community
Font: Trade Gothic No. 2 Bold and Light
FeedBurner Logo FeedBurner — RSS optimization and tracking
Font: Trade Gothic Bold
Newsvine Logo Newsvine — news sharing
Font: FF Meta Bold and Book
StandPoint Logo StandPoint — belief sharing
Font: FF DIN Medium
DropSend — file sharing
Font: Frutiger Bold
Flickr Logo Flickr — photo sharing
Font: Frutiger Black
PureVolume Logo PureVolume — music promotion
Font: Avenir Book and Medium
Sutterfly Logo Shutterfly — photo service
Font: Avenir Heavy (customized)
9rules Logo 9rules — web design network
Font: Helvetica Bold
PODZINGER Logo PODZINGER — podcast search
Font: Interstate Black
Campfire Logo Campfire — group chat
Font: Interstate Regular
YouTube Logo YouTube — video sharing
Font: Alternate Gothic No. Two
Bloglines Logo Bloglines — news aggregator
Font: ITC Officina Bold
Weblogs, Inc Logo Weblogs, Inc. — blog network
Font: Syntax Bold
Wikipedia Logo Wikipedia — collaborative reference
Font: Hoefler Text

New Classics

Just as there will always be trends, there will also be those designers who break from them. The following logotypes eschew the popular styles mentioned above and use new typefaces that have the potential to become timeless classics. The typeface is then used throughout the site in headers and graphics. It’s a great way to reinforce a brand and set it apart:

Socialtext Logo Socialtext — enterprise wiki
Font: Lisboa Sans
Facebook Logo Facebook — social networking
Font: Klavika (customized)
Also: cards with Vista Sans
Joyent Proxima Joyent — small business server
Font: Proxima Nova (alt ‘a’)
Not a logo, but we love Joyent’s use of Proxima — a new face that feels familiar but has its own character.

Update – March 22, 2006: Today’s email newsletter suggests some alternatives to the typefaces used in these trends. If you’re not subscribed to FontShop News, you’re missing out on that good stuff, plus the monthly calendar and free font. Register for a FontShop.com account or check your subscription settings to get on board.

See also:

89 Comments:

  1. Excellent selection. What about digg http://www.digg.com?

    Posted by Ferienwohnung Barcelona on Oct. 6, 2008
  2. How about Coghead.com? I think that would fit in the 2.0 family.

    Posted by Phil Davis on Oct. 17, 2008
  3. Digg’s logo is most likely custom lettering, but there are a few similar typefaces, including ITC Tetra, Shimano Square, Neeskens, and Poca.

    I’d put Coghead in the Classics category since it is set in Myriad, a modern version of the classic Frutiger.

    Posted by Stephen Coles on Oct. 27, 2008
  4. This article is still one of our most popular despite its age, so I just updated each category with some new and underused fonts that offer an alternative to the stuff that may have seen too much play on the web.

    Posted by Stephen Coles on Oct. 28, 2008
  5. It is nice to see the web 2.0 look spread to Television… not really logo work, but I’ve seen some nice font work with NBC promos. I think they use Reykjavik.

    Posted by Bryan Kearney on Oct. 28, 2008
  6. I haven’t seen the newer promos you may be referencing, but Klavika has been NBC’s house typeface for the last couple of years.

    Posted by Stephen Coles on Oct. 28, 2008
  7. great collection of logos. also great resources to browse useful online resources for sharing and communicating online. thanks for pointing out what fonts were used.

    Posted by Shiko on Oct. 30, 2008

  8. great compilation. thanks.

    Posted by gp on Nov. 26, 2008
  9. Hey mate can you add to this list, the font of twitter.com?
    I really need it!
    Thanks :)

    Posted by Alb3rt1 on Nov. 29, 2008
  10. I doubt the Twitter logo is a font; I’m pretty sure it is custom designed. You might like Softmachine though.

    Posted by Yves Peters on Nov. 29, 2008
  11. Hello

    As a fresh fontfeed.com user i just wanted to say hi to everyone else who uses this bbs :-)

    Posted by InwaniaHash on Dec. 19, 2008
  12. great post! thanks for the awesome information….
    May be you should consider updating this post with the new “Pepsi” identity. i guess Pepsi will fit in The Futurists category

    Posted by anishvshah on Jan. 4, 2009
  13. Great article thanks !

    Posted by Lazerdance on Jan. 12, 2009
  14. nice!! very useful info, thanks
    avn.rocky

    Posted by avn.rocky on Jan. 28, 2009
  15. What is the font used for ‘The Medicine Shoppe’?

    Posted by Jennifer on Jan. 28, 2009
  16. great fonts here. Cool creatives at work

    Posted by butter on Feb. 2, 2009
  17. Excellent post! very useful. Thanx!

    Posted by Ariel on Feb. 2, 2009
  18. also check out: http://www.go2web20.net/

    Posted by Simon Robertson on Feb. 19, 2009
  19. Brilliant! thanks for doing this font research, it will save me a lot of time. Well done Stephen

    Posted by ROXBOURNE Marketing Designers on Feb. 22, 2009
  20. great collection

    Posted by ppat on Feb. 26, 2009
  21. SAHweet!! The “Softies” are still my favorite.

    Posted by Michelle on Feb. 28, 2009
  22. Interesting. BUT, why do most logos look like they are made for an application of apple’s i-phone? To me there are clear similarities to the increasing wash of today’s modern webpages. Most look like an internet blogg, but not like a unique representations of the personality that it is supposed to be for.
    Common designers, say your message clear and simple, but GET CREATIVE!

    Posted by ardh77 on Mar. 1, 2009
  23. nice fonts thank you..

    Posted by sohbet on Mar. 3, 2009
  24. @ardh77: Well, it is quite reassuring that very little of that bevelled, highlighted, shadowed nonsense was seen amongst the Wolda winners.

    Posted by Yves Peters on Mar. 4, 2009
  25. @ Jennifer: The logo for The Medicine Shoppe is set in Bookman Swash (the original). There’s also ITC Bookman Swash, the updated design.

    Posted by Yves Peters on Mar. 4, 2009
  26. And don’t forget the OpenType version of ITC Bookman with the swashes built-in.

    Posted by Stephen Coles on Mar. 4, 2009
  27. What a nice information you have here.
    Stephen, I always wonder what font used for “POMERLEAU” – http://www.pomerleau.ca

    Thanks.

    Posted by Franky on Mar. 5, 2009
  28. Hmm, I’m not certain. It’s possible they could have modified the wonderful Armchair Modern.

    Posted by Stephen Coles on Mar. 5, 2009
  29. Thanks for taking the time to gather these samples and identify the fonts.

    Posted by Erik on Mar. 18, 2009
  30. great collection……nice logos

    Posted by subodh on Apr. 15, 2009
  31. Great info! What about the font for Polyvore.com?

    Posted by Lisa on Apr. 15, 2009
  32. Great collection of logos. I still like Skype’s.

    Posted by Michael Harris on May. 12, 2009
  33. Great … some more …. Web 2.0 … “things” …

    When do we get to see Art 2.0 ?

    Bad things will stay bad and not get better with some shiny polish @ stupid head-offs (plate shining for the win!).

    People believing in such nonsense live in < 1000 bc.

    Posted by x16colored on Jun. 20, 2009
  34. Cool collection of fonts. We used some similar concepts in developing the logo for Answerly.com

    Posted by Joe on Jun. 30, 2009
  35. Great difinitive list of web 2.0 logo designs. I’m looking for some inspiration for a new logo I need to design. This compilation should help, so thanks for a great post!

    Posted by graphic design sussex on Jul. 20, 2009
  36. I think it’s time I rounded my text off, and found this article looking for some css codes.

    Does anyone know which font styles are compatible with the current browsers out there?

    Posted by Torches UK on Aug. 16, 2009
  37. loved ff cocon, the one for ShoZu, just bought it for my website too, great post!

    Posted by mohsin on Aug. 27, 2009
  38. i really loved the collection..but still there are more best logos which i saw in some other threads…

    these creatives are really masterpieces.

    Posted by SEO Freelancer - Parul on Sep. 4, 2009
  39. i really loved the collection..but still there are more best logos which i saw in some other threads…

    Well, you have to realise – although it was updated last year – this collection was assembled three years ago. It’s inevitable that newer “masterpieces” as you call them are not included in this list.

    Posted by Yves Peters on Sep. 4, 2009
  40. thanxs for share,really appreciate !!!!

    Posted by dorarpol on Sep. 10, 2009
  41. Great list – really got me thinking harshly about logos.
    Then I got to the bottom here and noticed that there are two FontShop logos… which are completely different! Then compare them with the logo on http://fontshop.com/

    Come on FONT Shop!

    Posted by Jim Hare on Sep. 16, 2009
  42. its really great to have such kind of information…
    it is just awesome…

    Posted by saurabh on Sep. 16, 2009
  43. (…) noticed that there are two FontShop logos… which are completely different!

    That’s the whole point of the FontShop graphic identity – the typefaces in the logo change continuously. The only constant is the yellow and black (and white).

    Posted by Yves Peters on Sep. 16, 2009
  44. best collection of web 2.0 logos!

    Posted by niki on Sep. 17, 2009
  45. Great collection! I love technoraty simplicity.

    Posted by Leon Guanajuato Mexico on Sep. 17, 2009
  46. Thank you… great job !!

    Posted by Mazagan web design on Sep. 18, 2009
  47. nice logos, love it.

    Posted by Vats Thakur on Sep. 19, 2009
  48. I found these logos and typeface information very interesting.. I am a new lover to Typography, and the more I learn about it the more interested I become.. I find it very funny that these new modern fonts have been given names such as ‘softies’, ‘futurists’ and so on.. this is a great compilation..

    KUDOS!

    Posted by Erica on Sep. 23, 2009
  49. Hi,
    These designs are inspirator for me.

    Thanks.

    Posted by mehregan on Sep. 27, 2009
  50. beautiful work, beautiful concepts of creating logos

    Posted by Douglas Souza on Sep. 29, 2009
  51. Amazing trip, it reminds me of the Typography Lectures by one of my favorite teacher back in school.

    the compilation and the feedback ….
    is there any visual time line available on web that depicts the transition of branding marks into the complex shapes of todays modern logo designs?

    Posted by Shakeb on Oct. 12, 2009
  52. Digg’s logo is most likely custom lettering, but there are a few similar typefaces, including ITC Tetra, Shimano Square, Neeskens, and Poca.

    I’d put Coghead in the Classics category since it is set in Myriad, a modern version of the classic Frutiger.

    Posted by Amit Thakar on Oct. 25, 2009
  53. great post! thanks for the awesome infor­mation….
    May be you should consider updating this post with the new “Pepsi” identity. i guess Pepsi will fit in The Futurists category

    Posted by Amit Thakar on Oct. 25, 2009
  54. “Does anyone know which font styles are compatible with the current browsers out there?”
    @TorchesUK as a web designer I use this handy page to see what I can get away with, cross browser/OS: http://www.apaddedcell.com/web-fonts
    though there will need to be an update for Macs and Windows7. But it’s helped me find *nix fonts that compliment Verdana’s large x-height.
    Since most of the wonderful fonts listed above are waaaay more than I can ever afford, I must make mine by hand in Gimp (images of company names I mean).

    Posted by Stomme poes on Oct. 30, 2009
  55. Thanks For Such A Inspiring Collection

    Posted by Yogesh on Nov. 17, 2009
  56. Thanks, I need to update a logo this will really help me.

    Posted by Dave on Nov. 18, 2009
  57. Great Logos

    Posted by Ahmed on Dec. 3, 2009
  58. every time when i read about web2.0 design tends i make me mad. Web 2.0 is a concept not a design aesthetic. It doesn’t matter what trends these web2.0 sites are taking because design has nothing to do with web2.0. It will only increase the confusion.

    see this
    http://oreilly.com/pub/a/web2/archive/what-is-web-20.html?page=1

    also check this presentation by Elliot
    http://elliotjaystocks.com/blog/destroy-the-web-20-look-future-of-web-design-new-york/

    Posted by Taha on Dec. 19, 2009
  59. I hear you, Taha. I’m not a big fan of design trend pieces either, but can’t deny that a certain aesthetic, whatever you want to call it, dominates the Web 2.0 concept. Those who are confused will be confused whether we acknowledge the aesthetic or not.

    Posted by Stephen Coles on Dec. 20, 2009
  60. Hi Stephen thanks for the reply. Well actually I don’t care what people think about web 2.0 but some times I wonder what will be web 3.0. May be we can call grunge style web 3.0. Any way this post can satisfy many’s curiosity.I appreciate for the research that you did for this.

    Posted by Taha on Dec. 21, 2009
  61. great article, I like it
    thanks alot

    Posted by egyptwebdesign on Dec. 22, 2009
  62. i dont like this style (web 2.0), all logos is the similar…

    Posted by projekty logo on Dec. 23, 2009
  63. Nice compilation! It is always nice to see other’s work.

    Posted by Lechlk on Jan. 7, 2010
  64. last fm is my fav :)

    Posted by projektant logo on Feb. 1, 2010
  65. What is the font used for the ferrovial agroman logo on thier website. Can any one suggest please.

    Posted by Nikhil on Feb. 18, 2010
  66. The logos Pando, DropSend and 9rules are my favorites. I think web 2.0 get a lot of negativity but I think that many of them for their online focused purpose do work really well. Thank you for sharing these.

    Posted by Logo Design Monster on Feb. 24, 2010
  67. Do you think you can do the font for COOGI ??

    Thanks

    Posted by Coron on Mar. 29, 2010
  68. That’s ITC Avant Garde Gothic.
     
    If you want typefaces identified, contact the Font Identification and Type Research Team. Works faster, more reliable.

    Posted by Yves Peters on Mar. 29, 2010
  69. Very inspirational, thanks!!!

    Posted by Victor Lopez on Apr. 8, 2010
  70. Needless to say – Superb collection. Web 2.0 design means focused, clean and simple. I liked “Dropsend” and “Campfire” logos ver much. Many thanks for sharing this resource.

    Posted by Web 2.0 Design on May. 16, 2010
  71. Hiya, I know people go on and on about web 2.0 but don’t you think it may be a sales ploy? If somebody says a professional template design the price may be average but if somebody says professional web 2.0 template design seems to bump up the price! I think simple is everything check out this post I wrote a few days ago.
     
    Does anyone else think the same as me?

    Posted by George Lucas on May. 18, 2010
  72. I guess I still don’t understand what makes a logo “Web 2.0.”

    I read thru the list at this link, as well, and still cannot make heads nor tails of it:

    http://www.designzzz.com/spectacular-examples-of-web-2-0-logo-designs/

    My understanding of Web 2.0 is that other people perform the work:

    - Forward the logo with a link attached as a form of viral advertising.

    - A wiki logo that changes on an hourly / daily basis as the world updates it.

    Stuff like that …

    Posted by Sean Kinn on Jul. 5, 2010
  73. Cool Logos and very useful informations about the used fonts!
    Thx for this from germany!

    Posted by Thoor on Jul. 11, 2010
  74. Yep! Nice sharing. Good to get inspired! :)

    Posted by Joe Web Design on Jul. 18, 2010
  75. Great and excellent logos and I think Web 2.0 is a great tool to web designers and bloggers. Great stats! Thanks so much for the time you took to gather all these stats in one, easy to view place.

    innovative

    Posted by glendajackson on Jul. 25, 2010
  76. Nice list! Thanks! Also thanks to Glenda for sharing brandcaster.tv

    Posted by Sarah on Aug. 4, 2010
  77. very inspiring logo designs.. i love Zopa logo..

    Posted by Oyunlar on Aug. 20, 2010
  78. Really great collection. I have seen a pile of FONT posts showing really beautiful fonts. The reason I like this post more is because you mention the font name and linked to the font (making the font available/attainable ) making this post an oldie but a goody. Thank you.

    Posted by Fort Collins Web Designer on Nov. 17, 2010
  79. Nice useful post.
    We are researching for creation of a logo for a new project. Looks like we are going to be a softie!

    Posted by SEO spammer [URL removed] on Nov. 30, 2010
  80. Thanks for taking the time to put this together. I’m getting my design chops back up after a very long hiatus. This is getting the official stumble, like, tweet combo.

    It’s interesting to see relationship of the fonts and what the brand represents. I know I’ll be back here soon for an upcoming project web 2.0 project.

    I’m curios, has anyone seen any new trends coming out of the recession and the flurry of businesses being created in the midst of the 9-5 thing not providing opportunities?

    What industries are you seeing and what’s the main branding trend your seeing?

    Posted by think.point.click. on Feb. 18, 2011
  81. thanks for doing this socialmedia portrait !

    Posted by graphiste grenoble on Apr. 25, 2011
  82. This is a great place for all those logos for web 2.0. I’ve never knew there were so many. This place is getting bookmarked.

    Posted by SEO spammer [URL removed] on May. 4, 2011
  83. What is the font used in the logo on http://www.contour.com
    Contour Cameras

    Posted by Elna on May. 25, 2011
  84. Funny thing is that I used the Foco font recently for a client of mine. Very cool to see this article is still popular after all these years.

    Posted by SEO spammer [URL removed] on Jun. 2, 2012
  85. what is the font for the new yahoo logo? Thx

    Posted by attagency on Nov. 14, 2012
  86. I really like the new Microsoft logo, it proves that classic never gets old.

    Posted by Postcard Direct Mail on Dec. 19, 2012
  87. I have to admit that my favorite logo is Skype. The combination of blue & white is easy on the eyes, but it’s the lack of being in a square or box that leave me enjoying this logo so much.

    Posted by Spammer [URL removed] on Dec. 19, 2012
  88. Designers have to be creative and put many efforts in designing beautiful, unique and catchy logos. And the results they come out with are sometimes stunning and spectacular. Both in graphic design and web design.

    Posted by Don Norris on Jan. 17, 2014
  89. Hi there to every one, it’s genuinely a nice for me to
    visit this site, it contains important Information.

    Posted by jual kaos wanita on Oct. 21, 2014

Post a comment:

  •  

The FontFeed

The FontFeed is a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world. Eat up.

Archives

Subscribe

The FontFeed RSS The FontFeed Comments RSS