We live for type. The FontFeed is an inspirational journal of typography tips, recommended fonts, and bits of design from around the web that caught our typographic eye.
The Logos of Web 2.0
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.
Technorati Tags: design, fonts, logos, typography, web 2.0
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. Here are a few examples:
| 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 |
|
|
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:
| 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:
| 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:
- An 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.
By Stephen Coles | link | |
March 7th, 2006 at 5:16 pm
Great post! Your guess for the 9rules logo was pretty close, however the typeface is actually Helvetica Neue. The differences between the two are subtle: the Neue ‘9′ is more vertically compact causing a slightly wider letterform, and the ‘r’ character has a longer and more elaborate arm. I’ve been searching for the Technorati typeface forever, thanks for pointing it out!
March 7th, 2006 at 7:02 pm
BEST. POST. EVER.
Let the parody logos flow forth! Rock.
March 7th, 2006 at 8:56 pm
Nice summary. Great post.
March 8th, 2006 at 1:10 am
Awesome insight. Clear thinking & Great reflection… More! More! More!
March 8th, 2006 at 3:46 am
Excellent, I spent half an afternoon last week looking for this information. With no joy what so ever. Great post! Lovin’ it!
March 8th, 2006 at 3:50 pm
Oh sh*t that means we’re a softy….. ;)
March 9th, 2006 at 8:13 am
very. very. cool. post. font loveliness.
March 9th, 2006 at 11:32 am
Great post.
I never know what font to use on logos or images. This post helped alot.
Thank You!
March 9th, 2006 at 12:36 pm
Gold. Well done.
March 9th, 2006 at 12:44 pm
Love this post, thanks for the fonts too.
March 10th, 2006 at 5:43 am
very very helpful!!! thanks indeed!!!
March 16th, 2006 at 2:06 am
hi. well done - I think Helvetica was close enough eh? ;)
March 17th, 2006 at 7:58 am
Absolutely great post. This is a very useful reference for all designers. Thanks.
March 18th, 2006 at 3:08 am
This goes well with the web 2.0 color palette I posted recently.
March 19th, 2006 at 4:22 pm
Terrific post! I never noticed that about VAG and I use about half of those websites!
March 21st, 2006 at 9:38 pm
Love it when someone sifts through the mess and comes up with a bit of clarity. Very useful info and just fun to look at!
March 24th, 2006 at 2:42 am
Thanks for posting all the logos together. This is very helpful for designer to get ideas.
April 10th, 2006 at 12:51 am
Brilliant find and excellent analysis. Very useful! Thanks!
May 15th, 2006 at 12:25 pm
This helps a big deal. It was always difficult for me to know what font to use. Great info.
May 18th, 2006 at 2:17 am
The company I work for uses Trade Gothic to contrast Bodoni Book. How would you describe this font?
May 18th, 2006 at 8:23 am
I’d put Trade Gothic and Bodoni in The Classics. They never go out of style. Some might complain that Bodoni is difficult to read at small sizes, but this combo seems to do just fine for hundreds of companies. And that might be the bigger problem. Using fonts that so many others use makes it difficult to set your organization apart. It may be time to renew your brand sometime soon.
May 26th, 2006 at 1:48 am
Wow! Great post, I’ve been trying to figure out these fonts for yonks. Cheers!
June 4th, 2006 at 6:49 am
I saw this post last month, and i think I’ve come back about 12 times!
Love it. I’ve tried working out a few - but you’ve hit the nail on the head on all of them.
June 13th, 2006 at 3:20 am
Just to be precise, AJAX isn’t a modern technology.
June 16th, 2006 at 6:42 am
Very cool. You should pull that together and officially package it as a reference guide for designers in Silicon Valley. Here’s another for you: SiteKreator.
June 16th, 2006 at 8:33 am
Looks like SiteKreator is using a very tightly spaced FF Meta Black.
July 20th, 2006 at 3:51 am
It’s pretty amazing. Like seeing the thousand swooshes of the companies that used to populate SoMa lofts during the dotcom boom.
July 25th, 2006 at 10:39 am
Well done Stephen! So what do think we’ll see 4 years from now? What will be the “next movement”? Comic Sans (he…joke!)
July 31st, 2006 at 12:31 pm
Great article - hits the nerve.
We have recently launched a Web 2.0 software for small associations
Wild Apricot and spent a LOT of time on our logo. I guess it would go under “Softies” in the article. I think we use Suburban by VanderLans.
I posted the story of our logo on our blog:
The Birth of Wild Apricot logo.
August 6th, 2006 at 7:32 pm
Superb. This is one useful page. Slightly embarrassed that I am jumping on the Web 2.0 bandwagon as well!
August 20th, 2006 at 1:22 am
A wicked enlighting summary. Big Kudos.
September 16th, 2006 at 4:44 am
Great post. I’m looking to get a logo designed for my new website, and these logos are the sort of thing that i am looking to achieve.
October 13th, 2006 at 11:00 am
The “pando” font looks more like Bauhaus to me, just with the body connected to the stem. I don’t think Bryant is right because in Bryant the stems appear on the other side of the body in the ‘p’ and ‘d’. Also in Bryant the hole in the ‘p’ and ‘d’ look offset, instead of centered.
October 17th, 2006 at 3:15 am
Hi,
Anyone know what font they have used on the http://www.videoegg.com site?
Cheers,
Ash
October 17th, 2006 at 8:34 pm
Sure, Ash.
The logo uses Arial Rounded Bold.
URW Typewriter is used throughout the site. Nice catch. It’s a perfect addition to the Softies category.
October 18th, 2006 at 8:21 am
Thanks Stephen, great combination of fonts, one of the nicest of recent I think.
November 16th, 2006 at 3:41 pm
Compelling post. Hopefully it will spur innovation instead of more copycats. The entire landscape is one giant sea of “me too”. How many of these companies will we remember two to five years from now? If you’re curious, check this out:
http://dontgosouth.com/?p=58#more-58
November 24th, 2006 at 8:32 pm
thanks for the list! great inspiration!
January 2nd, 2007 at 8:31 am
Hi, first of all, great job on this site, very cool!
Does anyone know the font of http://www.noodlebox.be?
January 2nd, 2007 at 11:05 am
Hi Holger. Noodlebox uses a tightly spaced Mercurius for their logo. And that’s FF Olsen starring as their slab serif.
You might be interested in the other soft scripts shown in our Sept. 2006 newsletter.
January 10th, 2007 at 2:00 pm
hey Holger..
Noodlebox himself here. :)
The font that spells Noodlebox is Mercurius. The other font on the other hand is not FF Olsen (which i can’t use embedded in the sIFR heading due to copyrights), but it is a similar font called Union.
:))
January 13th, 2007 at 9:53 pm
Thanks Noodleman! I obviously jumped too quickly on that font ID. At least I got the designer (Morten Olsen) correct. But that’s worth zero points.
February 21st, 2007 at 8:48 am
As someone who has a Web 2.0 startup I find this article hilarious but extremely useful. So many sites are successful or generate buzz, even though they are crap, because they have a great logo.
May 18th, 2007 at 1:09 pm
Inspired by this post, I did a version of Music 2.0 logos.
July 30th, 2007 at 9:00 pm
Great post !!
Thats what i call Web 2.0 directory..
A very useful post and info.
Thanks
August 16th, 2007 at 7:40 am
I love the fact that this post has been read consistently for over a year! Surely that is a mark of great web2.0 content, since so much of the landscape is changing. Thanks for the analysis, I look forward to perusing the rest of this site also!
August 21st, 2007 at 12:47 pm
I love this post and come back to it again and again.
I have noticed another thing when trying to design a 2.0 logo…shorter names are best! I have a bit of a job sometimes when someone wants a really funky modern web 2.0 style logo, but have extremely long domain/company names.
August 28th, 2007 at 7:54 am
I often get this page from my clients as reference: usually they point to 2-3 logo design examples.
September 2nd, 2007 at 5:02 pm
the best web 2.0 logo belongs to facebook.
September 27th, 2007 at 5:18 pm
whate’s the font used by ?
October 16th, 2007 at 4:45 am
Great article. All of this ‘web 2.0′ design stuff makes me want to puke though and do all I possibly can to take the attitude and convey it as much as possible in my own style. There will be untold clones salivating over soft, reflective drop shadows and nice, colourful, founded typefaces for many moons to come. I respect Facebook for adapting a font: it takes effort, looks distinctive and is (most crucially) unique. At least this article presents the broader design approaches which is to be commended.
October 16th, 2007 at 4:49 am
Must confirm that I meant ‘clique’ web 2.0 approaches (based on comment above). There is much that isn’t, and is bright, bold and vibey (or clean and subtle)! If it’s distinctive (which all showcased within this article is), then it’s all as intended. I suppose I just have problems with defined terms, which only help to enforce limitations for those whom feel the need to pigeon-hole themselves. But it’s a personal choice I suppose :)
November 4th, 2007 at 5:17 pm
Twitter would be a nice one to point out, I suppose :)
December 8th, 2007 at 5:30 am
I may be going off coarse a bit here, but I was wondering what a re-design (in web 2.0 style) of the Fedex logo would look like? Still keeping the hidden arrow but updated for the internet age…It would be a dream to design a web 2.0 logo for Fedex!
January 2nd, 2008 at 6:35 pm
Great list, definitly the best resource I’ve seen in a while.
January 28th, 2008 at 10:04 pm
Nice collection. I bookmarked this so I can share with my designers. I’m trying to have someone develop a web 2.0 logo for my new blog but since i’m doing my blog as a labor of love, i don’t have enough money to hire a good designer. Great source for inspiration.
February 1st, 2008 at 12:26 pm
Wonderful breakdown. Clean, simple and effective - gives us budding designers a fresh look at logo design concepts. Would be interested to see other categories and examples of standard designs as well. Very insightful and well organized.
February 5th, 2008 at 12:55 pm
Anyone know the Jobster.com font? I’ve been a big fan of that one for a while.
February 6th, 2008 at 12:25 pm
Hi Matt. The Jobster logo is most likely custom drawn and not made with any existing typeface. If you like the squarish structure and rounded finish, you might like FF Max.
February 6th, 2008 at 3:02 pm
Thought provoking analysis. Nice work — but wasn’t lime green the official color of web 1.0?
at least the swooshes are gone…
March 29th, 2008 at 12:40 pm
A great article. Thanks! I love the Pando and Dropsend logos for some reason… They just look cool to me.
April 2nd, 2008 at 12:23 pm
Hi,
This is a great post, I am also amused that the Systrix logo that we designed back in 1999 has a lot of the web 2.0 features.