La tipografia web

La questione della tipografia sul web è una delle prime cose con cui bisogna confrontarsi appena si approccia il web design.

La scelta del font è un passaggio fondamentale per la creazione di un progetto grafico e per veicolare il messaggio. Così fondamentale, che pensando alla tipografia online un web designer non può che deprimersi.

Nel web l’uso dei font (i caratteri tipografici) è limitato a quelli predefiniti installati sul sistema operativo.

Se nella maggior parte dei siti il carattere è Verdana, Arial, Helvetica, Lucida, Georgia o Times New Roman la colpa non è certo dei web designer, ma dei saggi di internet, tra i quali probabilmente non c’erano designer, quando hanno realizzato browser e standard web.

La questione e la limitazione, quindi, non è filosofica, nessuno dei saggi credo sia un devoto della regola dei 12 font di Massimo Vignelli (Massimo ma non erano 5?), ma solo tecnica.

Font-Face

Col tempo le cose sono migliorate (probabilmente i saggi hanno fatto amicizia con qualche designer) e i browser moderni hanno cominciato a riconoscere ad esempio la proprietà @font-face, già prevista dalle reference dei CSS 2, che permette di caricare, con due righe di codice, sul computer dell’utente qualsiasi font il designer abbia scelto per il suo sito web.

Un’innovazione davvero notevole ma che presenta un paio di inconvenienti.

Se dal punto di visto tecnico e teorico è possibile usare tutti i font che si hanno sul computer, dal punto di vista legale e pratico no.

I font predefiniti installati sul nostro computer hanno una licenza che ne limita l’utilizzo al solo sistema operativo e anche quando ne acquisto di nuovi bisogna sempre far attenzione alle licenze che rilasciano gli studi che realizzano e vendono font (cosidette Type Foundries, d’ora in poi per noi “Fonterie”).
Segnalo su fontfeed.com un interessante articolo che spiega come leggere la User Licensing Agreement (EULA).)

In alternativa è possibile installare e usare gli openfonts, font che hanno una licenza commerciale free. Una fornitissima lista la troviamo su webfonts.info e su fontsquirrell.com.

Di recente Google ha rilasciato la sua lista di openfonts da usare liberamente.

Anche usando gli openfonts bisogna affrontare un’altro inconveniente: Internet Expolorer.
Explorer non supporta la proprietà @font-face per i font TrueType (TTF) e OpenType (OPF), i formati più diffusi, ma solo per i font EOT (Embedded Open Type), formato proprietario proprio dalla Microsoft.

Sempre su fontsquirrel.com è possibile scaricare il @font-face font kit che in un solo file zip ha le versioni EOT e TTF del font scelto e un CSS di esempio.

Typekit

In un primo momento la reazione delle Fonterie al @font-face è stata fredda, in parte forse per la preoccupazione di vedere napsterizzato il loro business in poco tempo. Con l’uso del @font-face la diffusione, incontrollata e non monitorata sarebbe ancora più rapida di quanto non succede già con i torrent e i vari programmi di file sharing.

Sensibilizzati anche da quest’argomento nel 2009 è nato l’iTunes dei font, Typekit. Un progetto di due gran maestri del web design, Jeffrey Venn e Jason Santa Maria, lanciato dalla Small Batch.

Pagando un abbonamento annuale si può accedere ai cataloghi di Fonterie come TypeTogheter, FontFont, Exljbirs, Buro Destruct, dello Studio Simonson, T-26, Veer e da poco è possibile accedere anche ad una parte del catalogo dell’Adobe.

Con due righe di codice javascript si possono usare font come Garamond, News Gothic, Myriad, Adelle, Dax, Museo, Meta, Tisa, Bodoni, insomma font che permettono ai web designer di farsi prendere sul serio anche dai grafici più tradizionali.

Typekit non è l’unica a fornire un servizio del genere, da segnalare ci sono anche siti come Fontdeck e Kernest.

I javascript di Typekit e soci, però, funzionano solo online, perché legati al dominio, e anche le licenze sono limitate al solo uso online.

In questo modo per un designer è difficile realizzare delle bozze grafiche o delle presentazioni per i clienti.

Le questione fu posta a suo tempo da Andy Clarke sul suo blog, dove è riportata anche la risposta di Typekit che consiglia alcuni metodi per aggirare il problema.

Typekit, Fontdeck, Kernest in ogni caso rappresentano il futuro della tipografia web, mettono d’accordo, legalità, type foundries, utenti e designer aprendo nuove strade anche a diversi metodi di progettazione del web design come dice Andy Clarke stesso alla fine del post.

Altre soluzioni

La regola e l’implementazione del @font-face e la nascita di servizi come Typekit sono solo gli ultimi ritrovati nell’ambito della web-tipografia. Il problema della limitazione dei font e la necessità di trovare soluzioni alternative è diventato sempre più imprescindibile quando i designer hanno cominciato ad realizzare le interfacce dei siti web.

Era il 2003 quando influenti web designer come Douglas Bowman ci spiegava la tecnica dell’image-replacement, che permette di sostituire al normale testo un’immagine senza che la pagina perdesse di efficacia dal punto di vista degli standard e dell’indicizzazione nei motori di ricerca.

Era il 2004 quando il progettista/programmatore Shaun Inman escogitò l’Inman Flash Replacement, poi perfezionata e resa sacalabile e accessibile nel 2005 da Mike Davidson e rinominato sIFR, che permetteva di usare tutti i font che volevamo usando flash e javascript.

Il 2008 ha invece visto la nascita di altri due tool/tecniche: Cufon e Typeface.

Simili tra loro (su kilianvalkhof.com un tabella comparativa), Cufon e Typeface sfruttano javascript e il tag canvas, non richiedono flash o altri plug-in e sono supportate da tutti i browser più diffusi.

Andando sui loro sito si converte il font (avendone sempre la licenza) in un file javascript che si deve poi associare alla pagina html.
Al momento però il testo impostato con una di queste due tecniche non puà essere selezionato. Questo limita notevolmente la fruibilità e l’accessibilità delle pagine web.

Conclusioni

L’evoluzione della tipografia web negli utlimi anni è stata notevole, da qui a qualche anno cominceremo a sentire cose tipo “ti-ricordi-quando-potevi-usare-solo-3-font-per-fare-i-siti?”.

Servizi come TypeKit e tecniche come quelle del @font-face miglioreranno notevolmente l’esperienza di navigazione degli utenti, darà nuove possibilità e aprirà nuove strade ai web designer, incentiverà i progettisti di caratteri tipografici a realizzare font che funzionano e si visualizzano sempre meglio su uno schermo.

Un passo ancora successivo potrebbe essere anche l’implementazione di nuovi servizi che permettano anche ai non designer di poter scegliere la giusta combinazione di font, basata magari sull’esperienza dei designer.
Staremo a vedere.

this entry on Friendfeed cirox, ArMyZ e S.elene and 1 more liked it.