The Logos of Web 2.0

新闻|The FontFeed|Stephen Coles 2006-03-07 15:18:39

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— video sharing

Font: VAG Rounded and Light obliqued

Zimbra— collaborative calendar

Font: VAG Rounded Light

Wayfaring— custom Google Maps

Font: VAG Rounded (fattened with added stroke)

Kajeet— mobile phone service

Font: VAG Rounded (custom 'j')

Zopa— lending exchange

Font: similar to Frankfurter Medium or Bryant Bold Alt

Pando— file sharing

Font: similar to Bryant Medium Alt

MySpace— social networking

Font: Arial Rounded Bold and Bell Gothic Black

TracksLife— personal database

Font: Arial Rounded Bold

Eventful— collaborative calendar

Font: Arial Rounded Bold (slightly smooshed)

Spongecell— collaborative calendar

Font: Arial Rounded Extra Bold

Skype— internet telephony

Font: Helvetica Rounded Bold

ShoZu— photo sharing

Font: FF Cocon Bold

Tabbloand 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— musical social network

Font: ITC Ronda (customized)

Alternate: Avernus

Photobucket— photo hosting

Font: Digital Sans Medium

Plazes— geographical networking

Font: Base 9 Regular SC

NewsGator— RSS aggregator

Font: ITC Bauhaus Medium

ReminderFeed— reminders via RSS

Font: FF Dot Matrix Two Regular

Technorati— weblog search tool

Font: Neo Sans Medium

TagWorld— social networking

Font: Handel Gothic Bold

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:Trade Gothic → Spiegel, Benton Sans, Brown GothicFrutiger → Locator, FF Transit, VialogFutura → FF Super Grotesk, Neuzeit Grotesk, NobelFF DIN → Malmö Sans, Magion, Sophisto, Antagometrica, FF GoodHelvetica → see Alternatives to Helvetica

Xanga— weblog community

Font: Trade Gothic No. 2 Bold and Light

FeedBurner— RSS optimization and tracking

Font: Trade Gothic Bold

Newsvine— news sharing

Font: FF Meta Bold and Book

StandPoint— belief sharing

Font: FF DIN Medium

DropSend— file sharing

Font: Frutiger Bold

Flickr— photo sharing

Font: Frutiger Black

PureVolume— music promotion

Font: Avenir Book and Medium

Shutterfly— photo service

Font: Avenir Heavy (customized)

9rules— web design network

Font: Helvetica Bold

PODZINGER— podcast search

Font: Interstate Black

Campfire— group chat

Font: Interstate Regular

YouTube— video sharing

Font: Alternate Gothic No. Two

Bloglines— news aggregator

Font: ITC Officina Bold

Weblogs, Inc.— blog network

Font: Syntax Bold

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— enterprise wiki

Font: Lisboa Sans

Facebook— social networking

Font: Klavika (customized)

Also: cards with Vista Sans

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:

Test the fonts in this list at FontShop.comAn annotated list of all the companies represented in Gatzke's compilation.Ben Hunt sums up "current web style".Christopher Fahey rounds up a list of other sites that categorize design style.Web2Logo catalogs the sites and hosts forum discussions for each.

Tomo

Tomo