Web 2.0 and everything that came along with it has reshaped every industry it’s touched, including typography and logo design. I was compiling a list of alternative fonts for Web 2.0 when I started to wonder, “Where do all these fonts come from?”
The result is a list of 7 or so of my favorite 2.0 logos and a brief history of the fonts used to make them. I’ve also included the estimated price for legal use of each font and a free alternative from DaFont for designers on a budget. If you’d like to read more about these fonts, click the [ref] tags I’ve included and you’ll be taken to my various sources of information. Come back tomorrow for part 2.
Note: In some cases prices are for the entire family and not just individual fonts.
Font - VAG Rounded
Used By - Wayfaring.com
Price - Anywhere from $20 to $104.00
History - Part of the Bitstream family, this original design was first used by Volkswagen A.G. as a corporate face for their advertising and marketing use. [ref]
Free Alternative - Arista by Studio Kmzero
My Opinion - “While it isn’t a perfect substitute if you add a few stokes to make it bold, I think you’ll find it’s closer than it initially appears!”
Font - FF Cocon Bold
Used By - Shozu.com
Price - $40 to $146
History - Evert Bloemsma was attempting ‘to eliminate all traces of handwriting’ when he created this font in 1998. Apparently he failed miserably as there are indeed traces towards calligraphy. [ref]
Free Alternative - Danube by No Images Fonts
My Opinion - “Danube is clearly more whetted and acuate but it matches FF Cocon in its nod towards industry and mechanics.”
Font - ITC Ronda (Customized)
Used By - Last.Fm
Price - $34.50
History - Herb Lubalin designed this font in 1970 around the same time he founded the International Typeface Corporation. [ref]
Free Alternative - Rezland by Fraser Davidson
My Opinion - “Ronda is certainly a classic but Rezland has a contemporary modern edge that I feel works well.”
Font - Arial Rounded
Used By - TracksLife.com and MySpace.com
Price - $79.00
History - In 1982 Robin Nichols developed a sans serif typeface for bitmap font laser printers. It was later developed, with Patricia Saunders, into the Arial typeface family which was later chosen by Microsoft as a core font for Windows 3.1 (and subsequent versions). [ref]
Free Alternative - Folks by Manfred Klein
My Opinion - “It’s thin and rounded. You can’t really be too picky when you’re being cheap.”
Font - FF DIN OT
Used By - standpoint.com
Price - $269
History - The font’s designer Albert-Jan Pool was born in 1960 in Amsterdam and went on to study at the Royal Academy of Arts in The Hague. He was one of the co-founders of a group of young Dutch typographers called “Letters”. Many members of that gone on to become famous designers in their own right. Pool is currently working on several new series in order to extend the family of FF DIN. [ref]
Free Alternative - Old Sans Black by Manfred Klein
My Opinion - “The FF family looks so basic but it was pretty damn hard to find anything that came close!”
Font - Frutiger
Used By - Dropsend.com and Flickr.com
Price - $29
History - Adrian Frutiger is the designer of this font, hence it’s name. Adrian is widely regarded as of the twentieth century’s most prolific typeface designers. The font Frutiger was commissioned in 1968 by the newly built Charles De Gaulle International Airport at Roissy, France. Instead of using one of his previously designed typefaces like Univers, Frutiger chose to design a new one. The resulting typeface was Frutiger, originally called Roissy. It was released publicly in 1976 by the Stempel type foundry in conjunction with Linotype. [ref]
Free Alternative - Verdana by Matthew Carter and Tom Rickner.
My Opinion - “It’s come as a default font for computers for as long as I can remember so it wins for convenience.”
Font - Avenir
Used By - Purevolume.com and Shutterfly.com
Price - $29
History - The name ‘avenir’ is French for future, and takes inspiration from early geometric sans-serif typefaces Erbar (1926) designed by Jakob Erbar, and Futura (1927) designed by Paul Renner. Frutiger also designed this font and intended Avenir to be a more organic interpretation of these highly geometric types. While similarities can be seen with Futura, the two-story lowercase ‘a’ is more like Erbar. [ref]
Free Alternative - Siple by Tomoyuki “Tee-Wat” Watanabe or Am Sans by Volker Busse
My Opinion - “The alternative’s not too close in appearance but match many of Avenir’s basic characteristics: clean, modern and stylish.”
In this tutorial I’ll teach you how to make a web 2.0 logo so damn sugary sweet it’ll give your website a cavity. Then I’ll give you the PSD, the font, and all the patterns used in the image so that you can play with it yourself. If you want to skip the tutorial altogether, you can download the PSD here. The beauty of the correct way to design logos in Photoshop or Illustrator comes when we keep everything as editable text layers from start to finish. That way if we need to make changes or reuse the idea, we can just pop open a Photoshop file and quickly output a new version of an old idea. This will also make it easy for you to duplicate my steps.
1. Open up Photoshop and Create a new layer.
2. Use the Text Tool to write something in black using the “Creampuff” font.
3. Choose “Color Overlay” from the Layer Style options.
4. Select a pinkish color. Because it makes most people think of candy or something edible(….like babies). For your reference, I’m using these settings….. Color Overlay >> #9e5859. Let’s name this layer ‘Base’.
5. Duplicate this current layer twice by dragging it to the layer button two times.
6. Name one of the duplicates ‘Hard’ and the other ‘Sugar’. This is just for the sake of the tutorial, really you could name them whatever you want. Make sure you order the three layers so that ‘Base’ is underneath ‘Hard’ and ‘Sugar’ is topmost.
7. Hide the layer named ‘Sugar’ for now. Select ‘Hard’ so we can make it look like hard candy (now you see why I named it that?). Use the following settings in your layer style.
Drop Shadow Settings Opacity = 50%, Angle = 90%, Distance = 2px, Spread = 3px, Noise = 0%, Layer Knocks Out Drop Shadow = Yes
Bevel and Emboss Settings Style = Inner Bevel, Technique = Smooth, Depth = 471%, Direction = Up, Size = 8px, Soften = 0px, Use Global Light = Yes, Gloss Contour = Gaussian, Anti-Aliased = No, Highlight Mode = Screen at 42% with a White (#ffffff) Color Setting, Shadow Mode = Multiply at 17% with a Black (#000000) Color Setting.
These settings serve to make your candy text look three dimensional.
8. Next we want to select a Pattern Overlay. This step isn’t necessary but a little decoration will make your candy look more appetizing. Before you attempt this, make sure you’ve loaded ‘candy_stripes.pat’ into your version of Photoshop.
Make the following setting changes.
Pattern Overlay Settings Blend Mode = Exclusion, Pattern = Pattern 1 (my choice, you can choose differently), Scale = 61%, Link With Layer = Yes
We’re all done making the candy look hard. Now it’s time to lick it….no seriously.
9. In this step we’re going to make our candy look like someone has salivated all over it…either that or maybe someone dipped it in a sugary sweet candy coating! (note: This is the hardest part of tutorial to explain but you’ll figure it out.”)
Activate the layer named ‘Sugar’. Hold down the ‘command’ (’control’ on a PC) and click on the layer to select all the letters in your word. Add a layer mask to it.
Hit ‘L’ to select the Lasso Tool and select the ‘Intersect with Selection’ option. Make sure you CLICK ON THE LAYER MASK FIRST before you go to Step 10.
10. Now that you’ve selected the layer mask and not your actual text, draw around your selection loosely and fluidly. The idea is to make this look like liquid. It doesn’t matter if you go out side of the lines or get too crazy, you can fix it later by editing the mask. Once you’ve made a selection through the whole word, go back to your starting point and let go of the mouse. This will subtract everything from the selection except for what you’ve just drawn! (note: click the image below for a close-up view!)
11. Now Make the following settings to the Layer Style of the topmost layer ‘Sugar’.
Bevel and Emboss Settings (note: this makes it look like a candy coating) Style = Inner Bevel, Technique = Smooth, Depth = 100%, Direction = Up, Size = 5px, Soften = 0″
Color Overlay Settings (note: this gives the liquid a bit sugary glow and a bit of pop) Blend Mode = Overlay, Opacity = 23%
Gradient Overlay Settings Blendmode = Screen, Opacity = 35%, Style = Linear, Align with Layer = Yes, Angle = 90%, Scale = 100% Gradient Color = #6f1d1d as the darker hue with #FFFFFF as the lighter hue.
12. Lo and behold you’re done! You’ve got hard candy dipped in sugary sweetness!
13. We COULD stop there but I always like to ’sweaten’ (no pun intended) my designs with color backgrounds. Create blank layer. Add a Color Overlay in the Layer Styles and set the color to #0f0702.
14. Add a new layer. Add a Layer Mask. Select the Gradient Tool (Hit the ‘G’ Key) with the normal black/white colors. Set it to Radial and Reversed. Drag from the center of your image to the outside of the screen. Bam. Instant spotlight. Now add the Color Overlay of your choice.
Simple right? Don’t you just want to lick the screen? Of course we could get far more detailed with this but this tutorial is long enough! Make sure you download the files below to make sure you’ve done things correctly! Email me your derivative works or your improvements and I’ll profile them on this blog. jongos [at] gmail [dot] com
Download this Tutorial with all relevant PSD, Font and Pattern Files here! Download just the font here!
In amendment to my last round up of web based design tools, I need to make sure I mention Roundpic which allows you to upload any image from your desktop or any website, and round the corners with a nifty and easy to use UI. It’s definitely at it than Photoshop. Check it out.
I haven’t done much in Proce55ing lately but I plan on getting back to it soon enough. One of my new tools in helping me learn is Casey Reas’ Processing: A Programming Handbook for Visual Designers and Artists from MIT PRess. I highly recommend it as it’s full of great examples and instructions that are already deepening my understanding of the platform.
I decided to take a step back from art for a while and to work on my writing. Working with a great artist I found through Conceptart.com, I found Kyle Morton, a great artist who contributed to the project. The graphic novel RIFT VALLEY focuses on the current struggles in Kenya. The proceeds are being donated to a great charitable clinic there. Read more about it all and download the six page preview from here.
to write something in black using the 
