SIFR: a brand new approach to web typography
di Giovanni Bellocchio
Pubblicato il 3 Marzo 2006
Verdana, Arial or Sifr ?
Typography is the craft of endowing human language with a durable visual form, and thus with an independent existence.
The majority of old school graphic designers have been trained to approach web design as a mostly problematic language, according to its most evident imperfections: unknown page size, narrowband, untamable browsers. On the contrary, what is superficially perceived as a limit represents as a matter of fact the power of the medium; in our post-Netscape and post-Zeldman era, the debate has switched from the alignment of texts with images to more relevant themes, such as user experience and usability.
Still, one of the most essential problems of web design stays unsolved: browsers can only display fonts that are installed on the user’s operating system. And, even more significantly, most times these fonts belong to the same old and inadequate four typographical families: Times and Georgia for serifs, Verdana and Arial for sans serifs, Comic Sans and Courier for monospaced fonts.
Of course, if you’re lucky enough to work for an intranet and to consequently have quite a precise idea of all the fonts at your users’ disposal, then you can work much more freely; but if that is not your case, the only possibility you are left with is to use a pre-rasterized text, i.e. a text turned into a Bitmap image, with all the complications that follow. A pre-rasterized text has in fact quite a lot of inefficiencies: it is difficult to mantain, unscalable, non-selectable and, for most users, very slow at loading.
<img src="farewell-01.gif" alt="we can't go on like that!" />
If you can use the style sheets correctly, you will be able to avoid some of these problems, by hiding the text and by replacing it with a background image (a technique known as Fahrner Image Replacement).
<p id="#fir-farewell01"> We can't go on like that!</p>
Doing so, you will mantain accessibility for text browsers and screen reader users. The images can be dinamically generated through just a bit of server-side voodoo. Nevertheless, the initial problem stays unsolved: the designer will have to deal with a tricky series of “patches”, relieving but – still – not removing the suffering.
Flash strikes back
The SIFR technique (Scalable Inman Flash Replacement) has been developed by Mike Davidson and Shaun Inman and – as Kottke might well say – it consists of building web browsers in Flash movies embedded in HTML displayed by web browsers.
Pardon?
Basically, SIFR can dinamically replace an HTML text with a Flash movie. This substitution is controlled by a style sheet, so your markup does not get unnecessarily altered and thus mantains the semantic and portability features we all know and love. As for implementation, the procedures are not that easy (according to the authors, they will be simplified in the next versions) but all you have to do in order to succeed is read the attached README.TXTs carefully.
Once everything is finally configured, you will acknowledge how smart the SIFR approach is: in pure separate-the-content-from-the-presentation-because-it’s-a-Good-Thing style, the objects selected by the CSS are automagically converted into Flash movies. In the backstage, a javascript identifies the size of the text to be replaced, inserts a movie of just the right measure and passes on the text to be displayed. Flash does nothing but contain a dynamic text field set up with your favourite font.
Flash is good
For a designer like myself, being finally able to use real fonts without feeling guilty is an authentic liberation; still, considering this newly gained freedom merely as an aesthetic conquest would be a bad mistake. Actually, caring for the typographical features of design is strictly necessary if you wish to attribute compactness and rythm to your graphic project without being too intrusive.
A page can surely “stand alone” relying on the harmonies and contrasts generated by the use of typopgraphic couplings. The control you can have on SIFR formatting will always be less significant than the one you could have on a Photoshop pre-generated image: for example, you will not be able to control the style of every single letter.
From a strictly technical point of view, the implementation of SIFR has been accurately studied in order to consider the real problems concerning web design. SIFR is in fact a progressive enhancement technique, that is to say it does not interfere with the content and structure of your documents; besides, in case the browser does not have the minimum SIFR requirements, the ordinary CSS formatting will be recovered. The javascript code is clever enough to adjust itself to the default size of the font: the resulting Flash will thus be proportioned according to the size the user has chosen. Finally, as all the work is done by the client, you can start using this technique already now , with no need to turn to PHP, ASP or even to more exotic languages.
Flash is evil
If, on the one hand, a SIFR-ized text is selectable, on the other hand the visual feedback of the selection will behave unpredictably enough to confuse the user. The links do work, of course, but the menu does not appear to do so, and this certainly is a bit of a problem.
Furthermore, the browser’s status bar does not view the link’s destination. Personally, I believe that the main problem – apart from a few particularly tricky bugs affecting Safari and some versions of Mozilla – is the execution speed. SIFR actually requires quite limited resources – 30 kbs, more or less – but the time it takes to have javascript properly working is undoubtedly remarkable: if a page contains a lot of text lines to be replaced, the slowdown becomes unacceptable. And this definitely is a crucial deficiency: as SIFR is mainly used for headings, it will consequently end up slowing down the viewing of the most important elements of the page (namely, the ones that make that page easily readable).
An open ending
The Law states that every sensitive article about web design must end with four precise reccomendations:
- it depends
- know your users
- one fine day browsers will work
- see point 1
SIFR can solve a specific problem, but it brings about some remarkable contraindications. Is it better than the simple text+CSS? No, or probably not yet. Is it better than the images with ALTernative text? Yes, definitely. My suggestion is to put it to the test: download the latest version and give it a try, you will not be disappointed.
Typography is the craft of endowing human language with a durable visual form, and thus with an independent existence. Its heartwood is calligraphy - the dance, on a tiny stage, of the living, speaking hand - and its roots reach into living soil, though its branches may be hung each year with new machines. So long as the root lives, typography remains a source of true delight, true knowledge, true surprise.
(Robert Bringhurst, The Elements of Typographic Style)