Introduzione
Una dei temi ricorrenti dell’anno appena trascorso nell’ambito dello sviluppo web è stato sicuramente quello delle font. Ho pensato perciò di raccogliere alcuni articoli comparsi recentemente per dare una panoramica della questione.
In particolare, vedremo in cosa consiste a grandi linee l’uso di @font-face, i punti a cui fare attenzione, le implicazioni positive e negative. Ho cercato di estrarre gli aspetti più pratici, rimandando agli articoli originali (linkati nei titoli delle sezioni) per i dettagli teorici e le motivazioni che stanno dietro le varie soluzioni.
Per gli impazienti, comunque, ecco il riassunto. Anche se i passi in avanti sono stati significativi, credo sia prudente limitare @font-face a titoli e cose del genere, continuando ad usare le font classiche per tutto il resto, magari rivedendo con più attenzione gli stack delle font dichiarate nei fogli di stile.
How to use CSS @font-face #
Cominciamo con la domanda pratica: cosa bisogna fare per usare @font-face? Questo:
@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
In altre parole, dobbiamo definire origine e formato per la font Kymberley in modo da poterla poi usare nelle stesse modalità delle font già installate.
Fin qui la teoria, in pratica dobbiamo risolvere la questione dei diversi formati delle font . La cosa più veloce per risolverle è generare tutti quelli che servono con Font Squirrel.
Una volta generati i formati bisogna irrobustire la dichiarazione che abbiamo visto prima per farla funzionare con i vari browser:
@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("Alternate name"), local("Alternatename"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}
La combinazione dei due src si prende cura di Explorer ; i due local consentono al browser di cercare prima la font in locale, e sono due perché alcuni browser usano il nome Postscript e altri il nome del file; il resto sono elencati i formati in ordine di desiderabilità.
Anche se qui mostriamo una sola dichiarazione, bisogna tenere presente che bisogna crearne: una per il roman e una per l’italico .
Real Web Type in Real Web Context #
Una volta che abbiamo impostato i nostri fogli di stile, per testare una font serve un qualche tipo di testo standard che ne metta in luce pregi e difetti.
Web Font Specimen fa esattamente questo. Possiamo scaricare la pagina campione in locale, impostarla con le nostre font e vedere come si comporta dal vivo, con i vari browser .
Designing For The Switch #
Rendering a parte, uno dei problemi principali nell’uso di @font-face è il peso, dovuto principalmente alle tabelle di hinting molto estese.
Il Georgia, ad esempio, è quasi 300 KB, sufficienti rovinare il primo impatto perché alcuni browser, come Opera e FireFox, presenteranno per un attimo la pagina senza la font corretta, il famigerato Flash of Unstyled Text (FOUT), mentre altri, come il WebKit, aspetteranno di aver scaricato tutta la font, non mostrando nessun testo durante l’operazione.
Da un punto di vista strettamente procedurale, non c’è nessuna alternativa: la font dev’essere scaricata e fino a quando l’operazione non è terminata le scelte possibili sono quelle viste prima .
Fighting the @font-face FOUT — Quicken the load time #
Tuttavia ci sono alcuni trucchi utilizzabili. Il primo consiste nel ridurre all’osso il file della font, eliminando tutto quello che non è strettamente indispensabile ; il secondo consiste nel calibrare attentamente l’elenco delle font nel foglio di stile per minimizzare il FOUT; poi lo possiamo zippare, guadagnando fino al 40%; infine dovremo fare in modo che la font scaricata rimanga in cache.
L’arma nucleare tattica è però quella di forzare il caricamento della font prima che la pagina venga mostrata, in modo da averla pronta quando serve.
Better font stacks #
Come accennavo all’inizio, l’estensione dello stack delle font dichiarate può essere usato per questo scopo (combattere il FOUT) ma anche semplicemente per usare combinazione meno scontate.
La premessa fondamentale è che, in realtà, il browser ha a disposizione molte più font di quelle di solito considerate. Inoltre, è possibile individuare delle combinazioni accettabili per coprire i casi in cui la font ideale non è presente.
Questo lavoraccio è già stato fatto e il campionario in pdf allegato all’articolo citato è utilissimo per prendere una decisione .
Real Fonts and Rendering: The New Elephant in the Room #
E ora veniamo al vero problema emerso nei primi usi sul campo: il rendering delle font, dovuto ai comportamenti molto eterogenei dei motori di rendering in combinazione con i diversi sistemi operativi. .
Browser Choice vs Font Rendering #
L’analisi di Zeldman difetta forse di precisione, visto che si limita a constatare il problema, anche se posso capirlo: i dettagli sono un po’ da mal di testa. Comunque, guardando le cose con più attenzione il panorama sembra meno preoccupante.
L’attuale sistema di rendering sotto Windows, il GDI, che fornisce la base per l’anti-aliasing in ClearType, funziona in modo adeguato solo le font TrueType.
Le nuove versioni dei browser useranno però un’altro motore, il DirectWrite, più sofisticato, in grado di fornire un rendering adeguato anche per i PostScript e gli OpenType. Ci saranno ancora delle differenze rispetto a Mac OS X ma saranno “solo” diversi.
In conclusione
Dopo tante attese e false partenze l’uso di @font-face non è più solo una possibilità teorica. Tuttavia, anche se la voglia di usarlo sembra contagiare tutti, allo stato attuale va usato con attenzione: mi limiterei alle titolazioni; per i testi estesi ci vuole più prudenza.
Questi sono problemi che verranno comunque risolti. Più importanti, invece, i messaggi per chi si occupa di design web.
In primo luogo bisogna superare la fissa di fare in modo che una pagina si veda esattamente allo stesso modo ovunque . Il fatto di avere più font a disposizione ha fatto emergere differenze enormi fra le varie piattaforme e, a complicare ulteriormente le cose, le piattaforme stesse sono in continua diversificazione. Inseguire l’assoluta omogeneità è futile, però bisognerà essere più rigorosi nei test: le sorprese del rendering sono saltate fuori in modo clamoroso anche perché, a dispetto delle dichiarazioni ufficiali, alcuni siti sono “usciti” con versioni testate solo su Mac.
Inoltre e cosa più importante, l’espansione dell’offerta di font utilizzabili significa che è necessaria una maggiore competenza (tipo)grafica. Ci vorranno più gusto e più competenza per la scelta e la combinazione giuste.
Può darsi che quella dell’anno scorso sia stata solo una fiammata destinata a spegnersi e rimanere dormiente per altri anni ma non ci scommetterei: meglio prepararsi.
