Usare i web fonts nei CSS

di: Hakon Wium Lie     15 Gennaio 2008

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.

Guide CSS

Responsive Desing, la guida

Progettare siti da fruire su dispositivi diversi è imprescindibile...

Guida CSS3

Scoprire e usare al meglio tutte le novità dell'ultima versione dei...

Guida CSS Tecniche essenziali

Testo, immagini, layout, form, liste, tabelle: soluzioni pronte per...

Altre guide

Newsletter @CSS

Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti