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.

ShareThis

8 Comments:

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?

Posted by Eben Sorkin on Sep. 27, 2005

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.

Posted by Bert Vanderveen on Oct. 17, 2005

Inter­est­ing, because I almost always use Smooth instead of Sharp or Crisp. But you’re right, Strong is bad news.

Posted by Dan Boland on May. 15, 2006

I agree that Fire­works does a better job at ren­der­ing type. If only it didn’t have huge memory leaks.

Posted by Roshambo on May. 17, 2006

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!

Posted by Darcy Paterson on Jun. 29, 2006

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.

Posted by Tangiers on Aug. 16, 2006

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.

Posted by Ely on Nov. 12, 2008

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.

Posted by James on Mar. 25, 2009

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.

Archives

The FontFeed RSS
The FontFeed Comments RSS

Close