Usare i web fonts nei CSS

Questa è la traduzione dell'articolo CSS @ Ten: The Next Big Thing di Hakon Wium Lie, pubblicato originariamente su A List Apart il 28 agosto 2007. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

I CSS hanno ormai 10 anni. Questo anniversario è un'opportunità per rivisitare il passato e dare uno sguardo al futuro. I CSS hanno sostanzialmente cambiato il web design dando ai designer un set di proprietà con cui dare il giusto look&feel a pagine scritte con markup HTML. E i CSS3 forniscono ulteriori proprietà richieste da chi progetta pagine web.

Molte proprietà CSS, nuove e vecchie, si occupano del testo: descrivono il colore, la posizione, lo stile e la direzione. Già tutto questo è una cosa buona, dopo tutto il testo occupa buona parte dei nostri schermi sul web. Ma perché tutte queste proprietà raggiungano al massimo le loro potenzialità, abbiamo bisogno di una buona selezione di font. E i font purtroppo sono quasi assenti sul web.

Considerate gli splendidi esempi di design presenti su CSS Zen Garden. Cosa li rende così accattivanti? In parte la varietà di font. I font comunicano messaggi e crano effetti, e mentre nella tipografia per la stampa c'è una pletora di font disponibili, sul web, come si accennava, la situazione è del tutto diversa. I web designer dipendono nel loro lavoro da una decina di font universalmente disponibili sui computer degli utenti, per lo più sono costretti ad usare quasi sempre Arial e Verdana. Un tipico design di CSS Zen Garden, d'altra parte, usa font particolari per rendere il testo, ma lo definisce come un'immagine di sfondo!

Un'immagine di sfondo!

Ci sono molte ragioni per cui non si dovrebbero usare immagini di sfondo per veicolare il testo. Le immagini pesano e sono difficili da realizzare. Immaginate di provare a tradurre una pagina web in 15 lingue e di dover produrre un set di immagini per ogni lingua. Inoltre, la qualità delle pagine stampate ne risente, dal momento che le immagini non scalano bene alle risoluzioni offerte dalle moderne stampanti. Eppure, l'uso di immagini di sfondo è al momento l'unico modo con cui un designer possa usare i suoi font preferiti sul web. Non dovrebbero allora avere l'opportunità di attingere ad una selezione più ampia di font senza ricorrere a questo metodo?

Un modo in effetti c'è: i web fonts. Invece di fare immagini di font, i file di uno specifico font possono essere incorporati nel contesto di una pagina web ed essere scaricati nel modo opportuno. In questo modo i designer possono usare font TrueType senza dover congelare il testo in immagini di sfondo.

Breve storia dei web fonts

Non è un'idea nuova. Nel 1998 i CSS2 proposero un modo per collegare font ai fogli di stile, e sia Microsoft sia Netscape aggiunsero il supporto ai web fonts nei loro rispettivi browser. Però, nessuno dei due supportò il formato di font più usato in assoluto, TrueType. Al contrario, scelsero entrambi un formato poco usato e diverso dall'altro (rispettivamente EOT e TrueDoc). Così i web fonts scomparvero dall'orizzonte dei web designer.

Buone notizie

Oggi ho il piacere di annunciare che i web fonts sono tornati. Ecco alcuni esempi che mostrano come un documento piuttosto comune può essere reso quando font TrueType distribuiti via web sono disponibili:

I PDF (e le immagini) mostrati in questo articolo sono state prodotti con Prince 6, uno tool per trasformare pagine web in PDF attraverso i CSS. Prince è al momento l'unico programma che supporta i web fonts TrueType, ma fornisce un ottimo esempio del perché abbiamo bisogno di pensare seriamente ai web fonts iniziando a promuovere la loro implementazione nei comuni web browser. Ma prima di arrivare a questo punto, diamo un'occhiata al codice che è alla base di questi esempi.

Sono stati scritti usando solo codice HTML e CSS; nessuna immagine è stata impiegata. Sono stati aggiunti un paio di elementi dei CSS3, il layout multi-colonna e gli angoli arrotondati, anche se non sono cose essenziali. Ogni esempio usa differenti web fonts. I fogli di stile puntano ai file dei web fonts che sono scaricati nel momento in cui il documento viene reso nel browser.

Web fonts: il codice che useremo

Ecco un semplice esempio di come useremo i web fonts:

Quelli che conoscono la sintassi dei CSS sapranno intepretare l'ultima riga. Il costrutto @font-face invece potrebbe esservi non proprio familiare, ma è facile da spiegare: quando viene richiesto, il font 'Kimberley' sarà scaricato dall'URL specifcato. La sintassi è definita nella specifica CSS2.

Per evitare lunghe liste di dichiarazioni @font-face nel foglio di stile, esse possono essere nascoste usando @import:

I file TrueType usati negli esempi sono stati creati da Ruy Larabie. È un rinomato designer di font che ha reso disponibili per un uso libero sul web centinaia di font interessanti. Sono font eleganti, decorativi e divertenti.

Dieter Steffman è un altro grande font designer. Anche lui ha reso liberamente disponibili diversi bei font. Qui sotto degli esempi che li usano:

Complicare un po' le cose

Quando i browser inizieranno a supportare i web fonts (nota del traduttore: al momento questa proprietà è supportata solo dal rendering engine WebKit), i web designer saranno tentati di usare altre proprietà oltre alla semplice font-family. Negli esempi visti sono state utilizzate line-height, letter-spacing, word-spacing e il posizionamento assoluto. La definizione di queste proprietà funziona bene quando i font specificati vengono scaricati dal web. Ma si possono avere risultati imprevisti nei browser che non supportano i web fonts: i web designer dovrebbero sempre lavorare affinché avvenga una graceful degradation delle pagine che progettano.

Il modo più ovvio per assicurare una graceful degradation è di specificare una lista di famiglie di font simili. Per esempio, il font "Primer Apples" di Ruy Larabie è molto grazioso. Lo potete vedere nell'esempio qui sotto:

Non ha però una perfetta corrispondenza nelle tradizionali famiglie di font usate sul web. Ma le metriche del font sono molto simili a quelle di "Trebuchet", font che può essere dunque specificato come alternativa:

In un browser senza supporto per i web fonts (e che non supporta i layout multi-colonna o gli angoli arrotondati) l'esempio di sopra apparirà così:

Una proposta al W3C: una media query per i web fonts

Per migliorare ulteriormente la garceful degradation, sarebbe utile avere una media query per i web fonts. Consideriamo questo esempio:

Il risultato della media query vista qui sopra sarà che il letter-spacing effettivo dipenderà dal supporto o dal mancato supporto dei web fonts. È necessario anche specificare, nella media query, che il supporto per TrueType è richiesto. La media query per i web fonts non è prevista nell'attuale specifica per le media queries e non è stata al momento implementata da nessuno. Ma è una grande idea e può essere realizzata facilmente.

Cosa significa nel mondo reale?

Mentre Prince ci mostra un ottimo esempio funzionante, i comuni web browser devono anch'essi supportare i web fonts per renderli la prossima grande e buona novità nel web design. Ma perché non lo hanno fatto finora?

Gli argomenti contro i web fonts sono per lo più di natura legale. I font sono proprietà intellettuale e dunque, si sostiene, non possono essere resi pubblici sul web. Sebbene lo status legale delle forme dei font sia incerto, i nomi sono probabilmente coperti dalle leggi sul copyright. In quanto tali, i font sono simili alle immagini e ai testi protetti da copyright. Per pubblicare materiale protetto da copyright sul web bisogna ottenere un permesso dal detentore dei diritti. Sul web però ci sono molti testi e molte immagini perchè chi detiene i diritti lo consente, spesso incoraggiando a renderli pubblici. Allo stesso modo, molti font designer (come Rui Larabie e Dieter Steffman, i cui font ho usato come esempio in questo articolo) consentono il libero uso dei loro font sul web.

Il migliore argomento contro i web fonts, comunque, non risiede in questioni legali, ma estetiche. Vorremmo davvero navigare tra pagine web infarcite di font di terza categoria da designer che un tempo usavano il tag blink e le gif animate? Forse no. Una volta che i web fonts siano disponibili, assicuratevi di usare un browser con cui è possibile disabilitare gli stili definiti dall'autore.

L'estetica fornisce anche un argomento a favore dei web fonts. Ci sono molti font belli e interessanti che possono migliorare l'aspetto estetico e la varietà visuale sul web. Proprio come rimango talvolta stupito di fronte a splendidi libri di design vorrei rimanere incantato davanti a bellissime pagine web. E non voglio che queste pagine siano fatte con immagini di sfondo.

Tutti possono contribuire!

Due cose devono accadere prima che i web fonts possano portare il web design ad un altro livello. Prima: dobbiamo essere sicuri della validità dell'approccio. Le proprietà CSS2 che sono state implementate sono sufficienti? Ci piace il codice CSS? Il modo migliore per contribuire è di provare l'implementazione esistente e riportare la propria esperienza.

Seconda: dobbiamo convincere i produttori di browser ad aggiungere il supporto ai web fonts. Può essere difficile. I produttori di browser hanno mote proposte e specifiche da cui scegliere. Alcuni di essi sono anche tutti impegnati nella correzione di bug. Perché una nuova funzionalità entri nella roadmap di sviluppo è necessario che la cosa sia attraente e che una massa critica di svilupaptori la supporti. Noi possiamo fare in modo che ciò accada.

I CSS esistono da 10 anni e probabilemente saranno qui per altri 10. Diamo loro, finalmente, un po' di font con cui possano lavorare!