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 limÂited to what’s installed on everyÂone else’s machines, creÂatÂing an image is the only way to make non-​standard fonts viewÂable online. Here are a few tips for creÂatÂing a web graphic in which type is the main subject:
- When setÂting antialiased type in PhoÂtoÂShop, experÂiÂment with the antialiasÂing setÂtings. The best techÂnique is depenÂdent on the font, size, and colors involved, but I find “Crisp” or “Sharp” usuÂally work best. “Strong” is bad news — it usuÂally fatÂtens the charÂacÂter 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 necÂesÂsary. Yeah, you can do some crazy wack aniÂmaÂtion in Flash, but save it for those jobs that really require intense motion and scriptÂing. Type almost always looks better as a GIF. (Though I hear the latest verÂsion of Flash (8) has improved antialiasing.)
Ok, what about sIFR? Now that I’ve finÂished railÂing on Flash, I better menÂtion that there’s a new techÂnolÂogy that allows you to replace text eleÂments with custom-​styled Flash eleÂments on the fly. It’s a pretty excitÂing conÂcept 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 excelÂlent medium for disÂplayÂing type — if it’s done right. His proof: the incredÂiÂble Our​Type.com by Flash masÂters group94.
ShareThis8 Comments:
I would like to add that dupliÂcatÂing your text layer (with setÂting Crisp or Sharp, or a mix of these) may give even better results. Don’t forget to experÂiÂment with the transparancy setÂting of the top layer.
The options are endÂless, this way, and your conÂtrol over the end result also.
InterÂestÂing, because I almost always use Smooth instead of Sharp or Crisp. But you’re right, Strong is bad news.
I agree that FireÂworks does a better job at renÂderÂing type. If only it didn’t have huge memory leaks.
hmmm… interesting…I will defÂiÂnitely be lookÂing 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!
I comÂpletely agree with Bert - I’ve done many a nav bar using dupliÂcated text layers in PS. Just don’t merge the layers or the effect will be lost.
I’m in the process of updatÂing a site that is comÂpletely gif type. This time around, the best results I’ve come up with seem to come from laying everyÂthing out in IndeÂsign, exportÂing the type as a high res (print setÂting 300 dpi) pdf, and openÂing that file in PhoÂtoÂshop.
I work as an SEO speÂcialÂist but gradÂuÂated as a graphic designer, before sIFR it was a trade off between keyÂword rich text for search engine optiÂmiÂsaÂtion or good visual typogÂraÂphy with your preÂferred typeÂface using imagery.
Post a comment:
The FontFeed
The FontFeed is a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world. Eat up.
Related Posts
- Embrace The OpenType Hype
- We love OpenÂType. It’s not just the latest font techÂnolÂogy, but also the most advanced, poised to replace the old…Read more
- Animated (Typo)graphics With Post-It Notes
- Deadlne is a superb lookÂing stop motion video with Post-​It Notes by SavanÂnah ColÂlege of Art and Design stuÂdent Bang-​yao…Read more
- FontBooklets Put the Tactile Joy Back into Typeface Selection
- Like smaller, more focused verÂsions of their mother pubÂliÂcaÂtion, FontÂBook, FontÂBookÂlets are printed specÂiÂmens that give ample space and tribÂute…Read more
- NYU Researchers Discover Defining Factor for Legibility
- Character size, meaÂsure, typeÂface … these are all genÂerÂally accepted as being facÂtors that influÂence legÂiÂbilÂity. Yet the study “The…Read more
- Graff Artists Mix Styles in The Exchange
- Over three decades in develÂopÂment, aerosol art has grown into a comÂplex and sysÂtemÂatic hand letÂterÂing artÂform. WorldÂwide, pracÂtiÂtionÂers have…Read more


I have always fond that fireÂworks does a better job renÂderÂring GIFs than any other proÂgram. The baseÂline stays crisper because of placeÂment but the techÂnique used also seems good. ComÂments?