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.
Tip: GIF Your Type Right
It would be great if we could use any font we wanted in designs for the web. But since we’re limited to what’s installed on everyone else’s machines, creating an image is the only way to make non-standard fonts viewable online. Here are a few tips for creating a web graphic in which type is the main subject:
- When setting antialiased type in PhotoShop, experiment with the antialiasing settings. The best technique is dependent on the font, size, and colors involved, but I find “Crisp” or “Sharp” usually work best. “Strong” is bad news — it usually fattens the character shapes and you lose definition.
- Save as GIF or PNG. For images with flat colors, the JPEG format can create unsightly halos and noise, all at the cost of a larger file size.
- Use Flash only when necessary. Yeah, you can do some crazy wack animation in Flash, but save it for those jobs that really require intense motion and scripting. Type almost always looks better as a GIF. (Though I hear the latest version of Flash (8) has improved antialiasing.)
Ok, what about sIFR? Now that I’ve finished railing on Flash, I better mention that there’s a new technology that allows you to replace text elements with custom-styled Flash elements on the fly. It’s a pretty exciting concept with just a couple of caveats: the user must have JavaScript enabled and the Flash plugin installed. Also, I feel like sites that use sIFR take just a tad longer to load — but I’ll let you be the judge of that.
Update: Rudy of FontShop Benelux reminds me that Flash can be an excellent medium for displaying type — if it’s done right. His proof: the incredible OurType.com by Flash masters group94.
By Stephen Coles | link | | 
September 27th, 2005 at 3:34 pm
I have always fond that fireworks does a better job renderring GIFs than any other program. The baseline stays crisper because of placement but the technique used also seems good. Comments?
October 17th, 2005 at 10:33 pm
I would like to add that duplicating your text layer (with setting Crisp or Sharp, or a mix of these) may give even better results. Don’t forget to experiment with the transparancy setting of the top layer.
The options are endless, this way, and your control over the end result also.
May 15th, 2006 at 8:45 pm
Interesting, because I almost always use Smooth instead of Sharp or Crisp. But you’re right, Strong is bad news.
May 17th, 2006 at 10:44 am
I agree that Fireworks does a better job at rendering type. If only it didn’t have huge memory leaks.
June 29th, 2006 at 11:09 am
hmmm… interesting…I will definitely be looking into this sIFR option, as this is the first I’ve ever heard of it. Sounds super COOOL! I hate not being able to use the fonts I want to use for web design..arrrrgh!
August 16th, 2006 at 9:54 pm
I completely agree with Bert - I’ve done many a nav bar using duplicated text layers in PS. Just don’t merge the layers or the effect will be lost.