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 typefaces 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:

ShareThis

10 Comments:

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

Posted by Ferienwohnung Barcelona on Oct. 6, 2008

How about Coghead.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 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

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

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

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

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

 — great compilation. thanks.

Posted by gp on Nov. 26, 2008

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

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

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

Close