Questa è la traduzione dell'articolo Spruce It Up di Jonathan Snook pubblicato originariamente su 24 Ways il 19 Dicembre 2009.
Il panorama della tipografia per il web sta cambiando rapidamente in questi tempi. Siamo passati da sIFR e Cufon alla possibilità di incorporare finalmente i nostri font preferiti tramite @font-face, assistendo tra l'altro ad una sempre maggiore adozione di questa tecnica da parte dei produttori di browser. Per quelli che in passato si sono sentiti limitati nelle potenzialità offerte dalla tipografia, questo è stato un anno positivo.
Come Mark Boulton ha ben spiegato, però, l'uso di @font-face ha i suoi svantaggi. I file di font possono essere molto pesanti da scaricare e il problema del testo senza stili che compare e scompare può essere una distrazione per l'utente.
Data URI
Possiamo affrontare questo problema usando i cosiddetti Data URI. Un Data URI consente di codificare il font direttamente nel file CSS. Quando il font arriva incorporato direttamente nel CSS, il problema del testo cui accennavamo sopra può essere mitigato. Non sono necessarie ulteriori richieste HTTP.
Tuttavia, mandare centinaia di kilobyte non è comunque una grande idea. A volte, per esempio, tutto ciò che vogliamo è abbellire il nostro sito con qualche piccolo effetto tipografico.
Essere selettivi
Il sito SimpleBits di Dan Cederholm è molto bello.
Osserrvate la lettera & presente nella testata. È realizzata con un bel font gratuito chiamato Goudy Bookletter 1911 disponibile dal sito The League of Movable Type. Il font in formato OpenType pesa 28kb. Nulla di eccessivo, ma fermiamoci un attimo. Dan Cederholm sta usando un solo carattere del set, la lettera &! 28kb è davvero troppo per un solo carattere!
Possiamo ottimizzare un font proprio come facciamo con un'immagine? Sì. L'ottimizzazione delle immagini funziona essenzialmente andando a rimuovere certi dati dell'immagine stessa che non sono necessari oppure grazie a degli algoritmi di compressione. Come possiamo rimuovere dati non necessari da un font? Attraverso un'operazione che si chiama subsetting.
Se siete tipi avventurosi, scaricate una copia di FontForge, un tool per l'editing di font open source. Potete aprire il font che vi interessa, visualizare e modificare tutti i glifi e quindi ricreare il file. L'interfaccia è un po' confusa ma sarete facilmente in grado di selezionare tutti i caratteri che non volete ed eliminarli. Una volta ricreato il file, il peso sarà ridotto.
Altre ottimizzazioni possibili consistono nell'eliminare le informazioni sul kerning, ma sono operazioni da svolgere con cautela perché vanno ad influenzare il modo in cui il font rende a schermo.
Per risparmiare tempo, tuttavia, il mio consiglio è di fare una visita sul Font Generator di Font Squirrel.
È uno strumento molto comodo e consente di svolgere rapidamente un buon numero di ottimizzazioni e altre operazioni. Selezionate il font dal vostro PC e caricatelo, assicurandovi che non ci siano problemi con le licenze e i permessi d'uso!
In questo caso particolare, vogliamo estrapolare solo la lettera &. Cliccate su Subset Fonts, si aprirà un nuovo menu. Deselezionate tutti i set eventualmente selezionati e inserite la & nel campo Single Characters.
Generate il font e cosa otterrete? Un file di soli 3kb.
Il Font Generator genera anche un foglio di stile con Data URI per essere facilmente incorporato nei vostri progetti. Date un'occhiata all'esempio (la demo non funziona su IE perché stiamo solo testando il supporto dei Data URI e non l'uso del formato EOT richiesto dal browser di Microsoft).
Nessuna aggiunta non necessaria
Se avete osservato bene la demo, avete notato una cosa interessante? Non c'è nessun span intorno alla lettera &. La cosa eccezionale di tutta questa tecnica è che possiamo trarre vantaggio dalla possibilità offerta dalle famiglie di font di ripiegare su un'alternativa quando un carattere non è disponibile.
Ecco tutto, abbiamo facilmente abbellito il nostro sito con un po' di tipografia accattivante senza aumentare il peso della pagina.
