The Logos of Web 2.0

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

There is no offi­cial stan­dard for what makes some­thing “Web 2.0”, but there cer­tainly are a few tell-​tale signs. These new sites usu­ally fea­ture modern web tech­nolo­gies like Ajax and often have some­thing to do with build­ing online com­mu­ni­ties. But even more char­ac­ter­is­tic among these brands is their appear­ance. 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 jok­ingly call the Offi­cial Color of Web 2.0: lime green.

You can see some of these strik­ing com­mon­al­i­ties in Ludwig Gatzke’s com­pi­la­tion of nearly 400 Web 2.0 logos. Read on for a break­down of the fonts used in a few of our favorite brands.

The Softies

A clear trend in new iden­ti­ties is the use of soft, rounded type­faces dom­i­nated by VAG Rounded (AKA Rund­schrift), but also includ­ing Hel­vetica Rounded, Arial Rounded, Bryant, and FF Cocon. All of these lend a modern friend­li­ness to what might oth­er­wise be a cold trademark.

Oct. 2008 Update —  New and under­used fonts in this cat­e­gory: Foco, Tondo, FF Netto, Estilo Text, and FF Unit Rounded.

ClipShack Logo Clip­Shack — video shar­ing
Font: VAG Rounded and Light obliqued
Zimbra Logo Zimbra — col­lab­o­ra­tive cal­en­dar
Font: VAG Rounded Light
Wayfaring Logo Way­far­ing — custom Google Maps
Font: VAG Rounded (fat­tened with added stroke)
Kajeet Logo Kajeet — mobile phone ser­vice
Font: VAG Rounded (custom ‘j’)
Zopa Logo Zopa — lend­ing exchange
Font: sim­i­lar to Frank­furter Medium or Bryant Bold Alt
Pando Logo Pando — file shar­ing
Font: sim­i­lar to Bryant Medium Alt
MySpace Logo MySpace — social net­work­ing
Font: Arial Rounded Bold and Bell Gothic Black
TracksLife Logo Track­sLife — per­sonal data­base
Font: Arial Rounded Bold
Eventful Logo Event­ful — col­lab­o­ra­tive cal­en­dar
Font: Arial Rounded Bold (slightly smooshed)
Spongecell Logo Sponge­cell — col­lab­o­ra­tive cal­en­dar
Font: Arial Rounded Extra Bold
Skype Logo Skype — inter­net tele­phony
Font: Hel­vetica Rounded Bold
ShoZu Logo ShoZu — photo shar­ing
Font: FF Cocon Bold
Tabblog Tabblo and Tab­blog — photo shar­ing
Font: FF Cocon Bold

The Futurists

Some sites are reflect­ing the tech­no­log­i­cal break­throughs of Web 2.0 with a look that says “tomorrow’s techno”. Pixel faces, hard edges, and ultra sim­pli­fied forms are not as common as the cozy shapes from the group above, but they rep­re­sent a good por­tion of the latest inter­net startups.

Oct. 2008 Update —  New and under­used fonts in this cat­e­gory: FS Sin­clair, FS Alvar, FF Cube, FF Netto, Sys, Notes Style, Purista, Stra­tum, Neu­traliser, ITC Tetra, Stain­less, Atrament

Last.fm Logo Last.fm — musi­cal social net­work
Font: ITC Ronda (cus­tomized)
Alter­nate: Aver­nus
Photobucket Logo Pho­to­bucket — photo host­ing
Font: Dig­i­tal Sans Medium
Plazes Logo Plazes — geo­graph­i­cal net­work­ing
Font: Base 9 Reg­u­lar SC
NewsGator Logo News­Ga­tor — RSS aggre­ga­tor
Font: ITC Bauhaus Medium
ReminderFeed Logo Reminder­Feed — reminders via RSS
Font: FF Dot Matrix Two Reg­u­lar
Technorati Logo Tech­no­rati — weblog search tool
Font: Neo Sans Medium
TagWorld Logo Tag­World — social net­work­ing
Font: Handel Gothic Bold
Shoutwire Logo Shoutwire — news shar­ing
Font: Agency Bold

The Classics

Safe stand­bys like Trade and News Gothic, Frutiger, Avenir, Inter­state, FF Meta, FF DIN, and the always ubiq­ui­tous Hel­vetica con­tinue to see use in new web logos.

Oct. 2008 Update —  Using uncom­mon alter­na­tives to clas­sic type­faces can ensure a logo is unique. Here are a few new or under­used alts to the stan­dards:

Xanga Logo Xanga — weblog com­mu­nity
Font: Trade Gothic No. 2 Bold and Light
FeedBurner Logo Feed­Burner — RSS opti­miza­tion and track­ing
Font: Trade Gothic Bold
Newsvine Logo Newsvine — news shar­ing
Font: FF Meta Bold and Book
StandPoint Logo Stand­Point — belief shar­ing
Font: FF DIN Medium
DropSend — file shar­ing
Font: Frutiger Bold
Flickr Logo Flickr — photo shar­ing
Font: Frutiger Black
PureVolume Logo PureV­ol­ume — music pro­mo­tion
Font: Avenir Book and Medium
Sutterfly Logo Shut­ter­fly — photo ser­vice
Font: Avenir Heavy (cus­tomized)
9rules Logo 9rules — web design net­work
Font: Hel­vetica Bold
PODZINGER Logo PODZINGER — pod­cast search
Font: Inter­state Black
Campfire Logo Camp­fire — group chat
Font: Inter­state Reg­u­lar
YouTube Logo YouTube — video shar­ing
Font: Alter­nate Gothic No. Two
Bloglines Logo Blog­lines — news aggre­ga­tor
Font: ITC Offic­ina Bold
Weblogs, Inc Logo Weblogs, Inc. — blog net­work
Font: Syntax Bold
Wikipedia Logo Wikipedia — col­lab­o­ra­tive ref­er­ence
Font: Hoe­fler Text

New Classics

Just as there will always be trends, there will also be those design­ers who break from them. The fol­low­ing logo­types eschew the pop­u­lar styles men­tioned above and use new type­faces that have the poten­tial to become time­less clas­sics. The type­face is then used through­out the site in head­ers and graph­ics. It’s a great way to rein­force a brand and set it apart:

Socialtext Logo Social­text — enter­prise wiki
Font: Lisboa Sans
Facebook Logo Face­book — social net­work­ing
Font: Klavika (cus­tomized)
Also: cards with Vista Sans
Joyent Proxima Joyent — small busi­ness server
Font: Prox­ima Nova (alt ‘a’)
Not a logo, but we love Joyent’s use of Prox­ima — a new face that feels famil­iar but has its own char­ac­ter.

Update - March 22, 2006: Today’s email newslet­ter sug­gests some alter­na­tives to the type­faces used in these trends. If you’re not sub­scribed to FontShop News, you’re miss­ing out on that good stuff, plus the monthly cal­en­dar and free font. Reg­is­ter for a FontShop.com account or check your sub­scrip­tion set­tings to get on board.

See also:

ShareThis

35 Comments:

Excel­lent selec­tion. What about digg http://​www.​digg.com?

Posted by Ferienwohnung Barcelona on Oct. 6, 2008

How about Cog​head.com? I think that would fit in the 2.0 family.

Posted by Phil Davis on Oct. 17, 2008

Digg’s logo is most likely custom let­ter­ing, but there are a few sim­i­lar type­faces, includ­ing ITC Tetra, Shi­mano Square, Neeskens, and Poca.

I’d put Cog­head in the Clas­sics cat­e­gory since it is set in Myriad, a modern ver­sion of the clas­sic Frutiger.

Posted by Stephen Coles on Oct. 27, 2008

This arti­cle is still one of our most pop­u­lar despite its age, so I just updated each cat­e­gory with some new and under­used fonts that offer an alter­na­tive to the stuff that may have seen too much play on the web.

Posted by Stephen Coles on Oct. 28, 2008

It is nice to see the web 2.0 look spread to Tele­vi­sion… not really logo work, but I’ve seen some nice font work with NBC promos. I think they use Reyk­javik.

Posted by Bryan Kearney on Oct. 28, 2008

I haven’t seen the newer promos you may be ref­er­enc­ing, but Klavika has been NBC’s house type­face for the last couple of years.

Posted by Stephen Coles on Oct. 28, 2008

great col­lec­tion of logos. also great resources to browse useful online resources for shar­ing and com­mu­ni­cat­ing online. thanks for point­ing out what fonts were used.

Posted by Shiko on Oct. 30, 2008

 — great com­pi­la­tion. thanks.

Posted by gp on Nov. 26, 2008

Hey mate can you add to this list, the font of twit​ter.com?
I really need it!
Thanks :)

Posted by Alb3rt1 on Nov. 29, 2008

I doubt the Twit­ter logo is a font; I’m pretty sure it is custom designed. You might like Soft­ma­chine though.

Posted by Yves Peters on Nov. 29, 2008

Hello

As a fresh font​feed.com user i just wanted to say hi to every­one else who uses this bbs :-)

Posted by InwaniaHash on Dec. 19, 2008

great post! thanks for the awe­some infor­ma­tion….
May be you should con­sider updat­ing this post with the new “Pepsi” iden­tity. i guess Pepsi will fit in The Futur­ists cat­e­gory

Posted by anishvshah on Jan. 4, 2009

Great arti­cle thanks !

Posted by Lazerdance on Jan. 12, 2009

nice!! very useful info, thanks
avn.rocky

Posted by avn.rocky on Jan. 28, 2009

What is the font used for ‘The Med­i­cine Shoppe’?

Posted by Jennifer on Jan. 28, 2009

great fonts here. Cool cre­atives at work

Posted by butter on Feb. 2, 2009

Excel­lent post! very useful. Thanx!

Posted by Ariel on Feb. 2, 2009
Posted by Simon Robertson on Feb. 19, 2009

Bril­liant! 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

great col­lec­tion

Posted by ppat on Feb. 26, 2009

SAH­weet!! The “Soft­ies” are still my favorite.

Posted by Michelle on Feb. 28, 2009

Inter­est­ing. BUT, why do most logos look like they are made for an appli­ca­tion of apple’s i-phone? To me there are clear sim­i­lar­i­ties to the increas­ing wash of today’s modern web­pages. Most look like an inter­net blogg, but not like a unique rep­re­sen­ta­tions of the per­son­al­ity that it is sup­posed to be for.
Common design­ers, say your mes­sage clear and simple, but GET CRE­ATIVE!

Posted by ardh77 on Mar. 1, 2009

nice fonts thank you..

Posted by sohbet on Mar. 3, 2009

@ardh77: Well, it is quite reas­sur­ing that very little of that bev­elled, high­lighted, shad­owed non­sense was seen amongst the Wolda win­ners.

Posted by Yves Peters on Mar. 4, 2009

@ Jen­nifer: The logo for The Med­i­cine Shoppe is set in Book­man Swash (the orig­i­nal). There’s also ITC Book­man Swash, the updated design.

Posted by Yves Peters on Mar. 4, 2009

And don’t forget the Open­Type ver­sion of ITC Book­man with the swashes built-​in.

Posted by Stephen Coles on Mar. 4, 2009

What a nice infor­ma­tion you have here.
Stephen, I always wonder what font used for “POMER­LEAU” - http://​www.​pomer​leau.ca

Thanks.

Posted by Franky on Mar. 5, 2009

Hmm, I’m not cer­tain. It’s pos­si­ble they could have mod­i­fied the won­der­ful Arm­chair Modern.

Posted by Stephen Coles on Mar. 5, 2009

Thanks for taking the time to gather these sam­ples and iden­tify the fonts.

Posted by Erik on Mar. 18, 2009

Thank you for shar­ing this.

Posted by Gino on Apr. 7, 2009

great collection……nice logos

Posted by subodh on Apr. 15, 2009

Great info! What about the font for Polyvore.com?

Posted by Lisa on Apr. 15, 2009

Great col­lec­tion of logos. I still like Skype’s.

Posted by Michael Harris on May. 12, 2009

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 shin­ing for the win!).

People believ­ing in such non­sense live in < 1000 bc.

Posted by x16colored on Jun. 20, 2009

Cool col­lec­tion of fonts. We used some sim­i­lar con­cepts in devel­op­ing the logo for Answerly.com

Posted by Joe on Jun. 30, 2009

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

The FontFeed RSS
The FontFeed Comments RSS

Close