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.

8 Comments:

  1. 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?

    Posted by Eben Sorkin on Sep. 27, 2005
  2. 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.

    Posted by Bert Vanderveen on Oct. 17, 2005
  3. Interesting, 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
  4. I agree that Fireworks does a better job at rendering type. If only it didn’t have huge memory leaks.

    Posted by Roshambo on May. 17, 2006
  5. 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!

    Posted by Darcy Paterson on Jun. 29, 2006
  6. 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.

    Posted by Tangiers on Aug. 16, 2006
  7. I’m in the process of updating a site that is completely gif type. This time around, the best results I’ve come up with seem to come from laying everything out in Indesign, exporting the type as a high res (print setting 300 dpi) pdf, and opening that file in Photoshop.

    Posted by Ely on Nov. 12, 2008
  8. I work as an SEO specialist but graduated as a graphic designer, before sIFR it was a trade off between keyword rich text for search engine optimisation or good visual typography with your preferred typeface 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

Subscribe

The FontFeed RSS The FontFeed Comments RSS