website design - 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

Okay, I'll weigh in with where I'm at, since there don't seem to be any fixed approaches popping up.

For starters, the days of sketchy webfont rendering will be completely behind us soon, at least with well-made fonts. The main offenders (IE versions prior to 9) are fast becoming a thing of the past. IE 8 is still a player but I'm convinced that audience is not an aesthetically motivated one anyway ;)

System/HTML text can easily handle changes to
color,
opacity,
scale,
horizontal and vertical positioning,

and text shadows.

When my effects start getting complicated, I consider it an obvious graphic type moment. Beyond simple style controls (anyone care to add to my list?), you'll need to rely on
javascript libraries,
OpenType features with spotty support,
excessively large webfont downloads on the user's end,
and possibly HTML5/CSS3 features with limited support.

If I want to skew my type,
fine-tune the kerning,
apply textures,
precisely position and line break it over an image,

or anything else that requires precise control, I resort to a graphic.
Like I said, there are ways, I just don't think they're worth it at this point.

With that said, I also have to ask myself in those cases if I really need the effects. Could nicely set system type without all the fancy stuff do the job. Maybe. There's always a fuzzy line somewhere.

Where I find myself hesitating to trust webfonts is very large type. Just to throw out a number, let's say 60px and up. Why is that? I'm not entirely sure but I can think of a couple things than concern me.

For one, big type often requires that extra bit of kerning that simple tracking can't solve. The type is dominant on the page and every little flaw becomes painfully evident to me.

Secondly, type that large tends to require very careful fitment within the design. I think it's less critical on content sites where the type can flow and there's some much needed white space but on a commerce site or in a dense content environment a misplaced line break or extending character can wreak havoc.

I think these may just be insecurities left over from the days when browsers did a really bad job with type. Unfortunately, enough of those problems still linger that it makes me cautious. Things like Giantnerd's add to cart button make me want to embrace it :)

Well, maybe not final. Final-ish.

Despite my insecurities, I'm getting past the big type thing. And I find myself using less effects and more clean system text elsewhere. One of the big gains is more responsive layouts: System text is easy to change on the fly!

I am rapidly streamlining my clients sites and moving to less image dependency. Bring on the webfonts! Maybe it'll be another International Style revival period in design ;)

I would be remiss to not mention awesome excercises such as Lost Worlds' Fairs. It's wonderful proof that just about anything is possible given time and the right user base.