Web 2.0 Logo Fonts - What font is that?

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 commu­nities. But even more charac­ter­istic 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 common­al­ities in Ludwig Gatzke’s compi­lation 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 friend­liness 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 — collab­o­rative 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 Frank­furter 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
	Track­sLife — personal database Font: Arial Rounded Bold
	Eventful — collab­o­rative calendar Font: Arial Rounded Bold (slightly smooshed)
	Spongecell — collab­o­rative 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 techno­logical break­throughs 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
	Photo­bucket — photo hosting Font: Digital Sans Medium
	Plazes — geographical networking Font: Base 9 Regular SC
	NewsGator — RSS aggre­gator 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

Want these fonts in a complete zip download? Click here for all web 2.0 fonts in this article.

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

Oct. 2008 Update —  Using uncommon alter­na­tives 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 Gothic
• Frutiger → Locator, FF Transit, Vialog
• Futura → FF Super Grotesk, Neuzeit Grotesk, Nobel
• FF DIN → Malmö Sans, Magion, Sophisto, Antago­metrica, FF Good
• Helvetica → see Alter­na­tives 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
	Stand­Point — belief sharing Font: FF DIN Medium
	DropSend — file sharing Font: Frutiger Bold
	Flickr — photo sharing Font: Frutiger Black
	PureV­olume — 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: Inter­state Black
	Campfire — group chat Font: Inter­state Regular
	YouTube — video sharing Font: Alternate Gothic No. Two
	Bloglines — news aggre­gator Font: ITC Officina Bold
	Weblogs, Inc. — blog network Font: Syntax Bold
	Wikipedia — collab­o­rative reference Font: Hoefler Text

The 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 — enter­prise 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.

Visit Dealzbydesign.com for Professional Web & Graphic Designs

50 plus web 2.0 fonts from popular logos. Use these for your new or existing web logos. Please share. http://ping.fm/F6s8j

Try these cool brushes for photoshop. Stars, car lights & street lamps oh my! Please share. http://ping.fm/Kl1Id

Blurry Light Brushes For Photoshop

Try these cool brushes for photoshop. Stars, car lights & street lamps oh my! Please share. http://ping.fm/Kl1Id

Wordpress for your BlackBerry? See the details on the beta build. http://ping.fm/5vQWk

Looking for some cool social network bookmark icons. Here are some of the best on the internet. http://ping.fm/Mu8Jv

Top 5 New Social Bookmarks Icon Sets

Looking for some cool social network bookmark icons. Here are some of the best on the internet. http://ping.fm/Mu8Jv

Top 5 New Social Bookmarks Icon Sets. Please share. http://ping.fm/BIVZF

So, you think you know your SEO inside and out, try the ultimate SEO Quiz! http://ping.fm/aXl8y

Design Tip of the Week: Making Sure Hotmail and Firefox Get Along. http://ping.fm/JFBzB

How To Create A Successful Email Newsletter

The Success Formula

1. Always Use Tables
2. If you have to use CSS, use Inline CSS, padding, borders, fonts, colors, but NOT background-images or margins
3. If you need background images, they only work in TD table cells, coded traditionally, not CSS.
4. 'Body' background images... won't work. Better to have a big Table width 100%, height 100% with a background in the TD.
5. Need a specific height? It'll only work as a traditional height='x' & width='x' not CSS.
6. Use images for text as little as possible and if you do, make sure that you use good alt tag descriptions of the images.
   

Gmail Tips

User Selected Gmail Themes

Problem: The introduction of Gmail Themes—which allows users to change default background, text and link colors in their inbox—has made it even more difficult to code HTML emails so that they render consistently in Gmail. The problem arises when subscribers use certain Themes and marketers don’t define the color of every background, text and link. Under certain circumstances you can end up with light text or links on a light background, or dark text and links on a dark background, making the email difficult or impossible to read.
Solution: Define all background, text and link colors. More themes and layouts.

Alt Text Traps

Problem: Gmail displays more than just the sender and subject in the user's inbox. You also get a snippet of text from the email's body appended to the subject line.
Solution #1: Place the text you want Google to pick up at the top of your email.
Solution #2: Gmail doesn't just pick up free-standing text, it also reads the text in the alt attribute listed in your image code: alt = '' You can exploit that by putting a transparent 1x1 pixel image at the very top of your email and giving it the alt text you want Gmail to display.