Thursday, September 27, 2007

Typefaces On The Web

I am sure we all have our favourite typefaces and others that make us cringe in horror. Me, I like Futura; it's useful in (nearly) all its variants and stays out of the way when you want it to. I'm also rather mad for Fette Engschrift (aka DIN 1451).

In fact I'm the type of idiot who buys typefaces, though I don't think I have bought more than one set in the last few years. Problem is, eventually I have to design a web page, and then all my love for typefaces goes to waste.

That's because only fonts installed on the client computer will be viewable in their browser. Some time ago I decided to look into this sad state of affairs. Just now I tidied up the document and posted it for your edification. Browser Font Samples is over on one of my other websites since I didn't want to adapt the formatting for this blog.

What we need is a technology like that provided by PDF documents, namely, embedded fonts. I remember the days before PDFs, when fonts had to be specified by number and sending a document from one platform to another was a nightmare. If you don't know what I'm talking about you missed a great deal of hell. If you do know what I mean I need only mention one sordid word to make you shiver with horror: Palatino.

But anyway, wouldn't it be nice to embed fonts on web pages? Well, you can, in a manner of speaking.

The simplest way is simply to render the letter shapes you want as images and insert those on the web page. Though a time-tested technique, this has the disadvantage of requiring extra work, plus it constrains the design process -- what to do if the letters are being generated from a dynamic publishing system? If you're not careful with alt attributes you might also reduce the accessibility of the page or its friendliness to search engines. Over-use of images will also decrease the page load time, again, unless you are careful with image optimisation techniques.

And of course every time you decide to change the point size, colour or other attribute it's back to your graphics app.

Sometime in late 2003 a bunch of clever folk came up with sIFR, which just happens to stand for the Scalable Inman Flash Replacement (clever they were but not very good with branding). The technology is based on the fact that most modern browsers are compatible with Javascript and Flash. Simply, a script scans your page for text you've asked it to render. For each area of text it creates a Flash movie of the same size, containing the self-same text but in the font you've asked for.

This can look very nice, as the demo illustrates. The rendering is fast, overhead is small and it degrades properly. Clients without Javascript turned on or without Flash installed will see the original text.

But it does require that you use Flash and post SWF files to your website. Over-used it can appreciably slow down the browsing experience. And it does sacrifice some usability... don't put links in sIFR block please! If all this still sounds good to you and you don't need backwards compatibility with older browsers you can always try the version 3 beta. Just be sure you have $700 on hand for a copy of Flash CS3 Professional.

Prefer a cheaper solution? If you have server-side access you can use Python etc. to render text using whatever imaging library you can get your hands on. That's the sort of solution I'll be looking at for my own requirements.

Anything to save me from a life of Georgia and Tahoma.



andy said...

I don't think you need to own Flash to use sIFR, do you?

Mike Pirnat said...

There are some interesting gotchas with sifr in practice... If your DOM tree is really large, the default method of finding elements to be replaced with fancy sifr blocks is dog-slow, so you'll want to optimize it to only look at certain blocks. You can also run into interesting and amusing results if a user has adblock or some similar extension installed...

Dualtrack said...

I've been a Type Geek for 20 years now and worked at Adobe for years. I pushed for an Adobe version of the Fell Type but got shot down every time. It sort of irks me that people are happy with Times New Roman. Best new face in my opinion is Brioso. Favorite old standby, Garamond. Futura is a wonderful sans-serif though. For a sans-serif, I think my favorite has to be Franklin Gothic.

Post a Comment