sIFR: un nuovo approccio alla tipografia sul web

di Giovanni Bellocchio
Pubblicato il 30 Marzo 2005

Verdana, Arial, Times o sIFR?

La tipografia è l’arte di infondere una forma visiva duratura nel linguaggio umano, e dunque assicurargli una vita indipendente.

Spesso il web design viene spiegato ai grafici della vecchia scuola partendo dalle sue limitazioni più eclatanti: dimensione della pagina ignota, banda ristretta, browser capricciosi. In realtà, quelle che superficialmente vengono percepite come limitazioni costituiscono i punti di forza del medium; in quest’epoca post-Netscape e post-Zeldman la discussione si è allontanata dal come allineare l’immagine x al testo y per abbracciare tematiche più complesse di user experience e usability.

Una delle limitazioni intrinseche del web design rimane però irrisolta: i browser possono visualizzare solo font installati nel sistema operativo dell’utente. Questo significa che normalmente i font a disposizione sono i soliti noti¹, inadeguati rappresentanti delle quattro famiglie tipografiche: Times e Georgia per i graziati, Verdana e Arial per i bastoni, Comic Sans e Courier per i monospaziati. Ovviamente chi progetta per una intranet e ha la fortuna di conoscere il parco font dei propri utenti può sbizzarrirsi in libertà, ma solitamente l’unica alternativa possibile è utilizzare del testo pre-rasterizzato, ossia trasformato in immagine bitmap, con tutte le limitazioni del caso. Un testo pre-rasterizzato presenta infatti caratteristiche di sostanziale inefficienza: difficile mantenibilità (aggiornabilità), non è scalabile, non è selezionabile e per molti utenti risulta lento a caricarsi.

<img src="addio-01.gif" alt="non possiamo più vederci così!" />

Utilizzando opportunamente i fogli di stile è possibile correggere alcuni di questi problemi nascondendo il testo e rimpiazzandolo (Fahrner Image Replacement) con un’immagine di sfondo:

<p id="#fir-addio01">Non possiamo più vederci così!</p>

In questo modo viene mantenuta l’accessibilità per gli utenti di browser testuali o screen readers. Le immagini possono venire generate dinamicamente ricorrendo ad un pizzico di server-side voodoo. Il problema iniziale non è comunque stato risolto: il designer rimane con una tortuosa serie di toppe che alleviano ma non guariscono la sua proverbiale sofferenza.

Flash alla riscossa

La tecnica del sIFR (Scalable Inman Flash Replacement) è stata sviluppata da Mike Davidson e Shaun Inman e, per dirla alla Kottke , consiste nel creare web browser all’interno di filmati Flash inseriti nell’HTML visualizzato dai web browser.

Prego?

In sostanza, sIFR è una tecnica per rimpiazzare dinamicamente il testo HTML con un filmato Flash. La sostituzione viene controllata tramite un foglio di stile: il markup non subisce alterazioni superflue e mantiene le sue caratteristiche di semanticità e portabilità. A livello di implementazione la procedura per abilitare sIFR nelle pagine non è proprio semplicissima (gli autori hanno promesso una maggiore facilità d’installazione nelle prossime versioni) ma è sufficiente leggere con attenzione la documentazione allegata per venirne a capo.

Ma una volta configurato il tutto si comprende l’eleganza dell’approccio sIFR: in puro stile separa-il-contenuto-dalla-presentazione-perché-ciò-è-bene gli elementi selezionati dal CSS vengono automagicamente convertiti in filmati flash. Dietro le quinte un javascript misura l’ingombro del testo da rimpiazzare, inserisce un filmato della misura appropriata a cui passa il testo da visualizzare. Il flash non è altro che un contenitore per un campo di testo dinamico impostato con il nostro font preferito.

Flash è il bene

Per un designer come il sottoscritto poter finalmente usare font veri senza sensi di colpa è un’autentica liberazione; non bisogna però commettere l’errore di liquidare questa ritrovata libertà come un puro vezzo estetico. La cura degli elementi tipografici del design è infatti assolutamente determinante per dare compattezza e ritmo ad un progetto grafico in modo non intrusivo. Una pagina può tranquillamente "reggersi" soltanto sulle armonie e i contrasti creati dagli accostamenti tipografici. Il controllo che abbiamo sulla formattazione sIFR sarà comunque sempre inferiore ad un’immagine pre-generata in Photoshop: ad esempio, non è possibile controllare lo stile delle singole lettere.

Dal punto di vista strettamente tecnico l’implementazione di sIFR è stata accuratamente progettata tenendo presente le problematiche reali del webdesign. sIFR è infatti una tecnica di progressive enhancement, ossia non interferisce con il contenuto e la struttura dei nostri documenti e nel caso il browser non incontri i requisiti minimi di sIFR viene recuperata la normale formattazione CSS. Il codice javascript è abbastanza furbo da adattarsi alla grandezza del carattere impostata di default: il flash risultante verrà quindi scalato secondo la grandezza specificata dall’utente. Il lavoro viene svolto tutto dal client, il che significa che è possibile cominciare a usare questa tecnica adesso senza scomodare PHP, ASP o altri linguaggi più esotici.

Flash è il male

Il testo sIFR-izzato è sì selezionabile, ma il feedback visivo della selezione si comporta in modo abbastanza da inusuale da confondere i nostri utenti. I link funzionano, ma il menu contestuale no: questo è un problema non da poco. La status bar del browser, inotre, non visualizza la destinazione del link. Personalmente ritengo che il problema più grave, oltre ad alcuni bachi particolarmente fastidiosi rilevabili su Safari e alcune versioni di Mozilla, è la velocità di esecuzione. Le risorse necessarie per sIFR sono tutto sommato contenute, circa 30 kb in tutto, ma il tempo impiegato affinché javascript faccia il suo dovere non è affatto trascurabile. Nel caso la pagina contenga numerose istanze di testo rimpiazzato il rallentamento può diventare inaccettabile. Questo difetto è particolarmente cruciale poiché, essendo sIFR tipicamente utilizzato sui titoli, ritarda la visualizzazione proprio degli elementi più importanti per una facile scansione della pagina.

Un finale aperto

La Regola impone che ogni articolo sensibile che parla di web design si concluda con quattro precise raccomandazioni:

1. dipende
2. conosci i tuoi utenti
3. un giorno i browser funzioneranno
4. vedi punto 1

sIFR è una tecnica che risolve uno specifico problema, ma porta con sé tangibili controindicazioni. È meglio del semplice testo+CSS? No, o forse non ancora. È meglio delle immagini con testo ALTernativo? Sì, decisamente. Il mio consiglio è di provarlo: scaricate l’ultima versione, e dategli una possibilità, non rimarrete delusi.

"La tipografia è l’arte di infondere una forma visiva duratura nel linguaggio umano, e dunque assicurargli una vita indipendente. La sua linfa è la calligrafia - la danza, su un minuscolo palcoscenico, di una mano viva, eloquente - e le sue radici affondano in fertile terreno, nonostante i suoi rami vengano ogni anno potati con macchine nuove. Finché la radice è viva, la tipografia rimane fonte di vera delizia, vera conoscenza, vera sorpresa"
(Robert Bringhurst, prefazione a The Elements of Typographic Style)

1. Nella prossima versione di Windows (nome in codice: Longhorn) Microsoft ci delizierà con sei font nuovi di zecca.