Do you have a “formula” for the webfont vs graphic type threshold?

Disclaimer:
I realize there is not a perfect “formula” for this question. I’m looking for your experiential working practices. If you don’t have any, I won’t hold it against you.


Over the last couple of years, webfonts have finally gone mainstream! Browser support is good enough and the market has broadened to the extent that designers have an excellent range of possibilities.

For my performance-focused clients using webfonts has some nice benefits beyond visual/branding: Getting type out of images makes greater image compression possible and content and style updates much faster.

The question today is:
At what point do you make the break from live html text to graphics? Especially in the context of a site with high performance requirements (loads of traffic, logic, and third party assets loading). I’m walking the line in a few projects now and having a hard time deciding in some cases. I’m wondering what formula others have come up with. If any.

We need to balance several factors (I know there are more):

  • Typographic integrity
  • Asset requests made to the server
  • SEO and accessibility
  • Responsive design (where applicable)

Complicating matters, rendering still varies widely by browser and OS. Compare IE 8 to 9, for instance or, more dramatically, OS X to Windows. Obviously, your market may negate concern for some of those issues (I unfortunately still support back to IE7 in a big way on some projects). And while webfont OpenType feature support is pretty good in Firefox, it’s still lagging in virtually all others.

Answer

My solution: SVG sprite sheets with PNG fallback

Personally, I think icon fonts are a poor stop gap technology that won’t be around in 5 years. SVG images are a far better way to go if you need vectors. SVG has most of the benefits of icon fonts, plus:

  • SVGs can contain colours, gradients and other effects.
  • Works with img tags.
  • Works as CSS background-images.
  • SVGs are pixel perfect.
  • Like icon fonts, SVG can scale to any size, so you get Retina support for free.
  • SVGs are typically smaller files than icon fonts.
  • If you want everything in one file, you can use SVG sprite sheets.
  • SVGs are easier to create and can be edited in Illustrator.
  • Rendering is far more consistent across browsers (certainly for simple things anyway).

The big caveat for using SVGs? No support for Internet Explorer prior to version 9. That may or may not be a deal breaker for you. WebKit (Safari and Chrome) and Firefox have great SVG support. For older versions of Internet Explorer, you can swap your SVG sprite sheet for a PNG (super easy, typically only a few lines of CSS).

That should cover everything, and give you only a few HTTP requests, small file size, the ability to use colours, gradients and other design effects. Oh, and it means you don’t have to resort to horrible HTML hackery. Things can be nice and semantic.

There aren’t many situations where I would recommend icon fonts. I think they’re a terrible idea. A really hacky stop-gap that will be dead and buried at some point in the near future.

Attribution
Source : Link , Question Author : plainclothes , Answer Author : Marc Edwards

Leave a Comment