««« | »»»

Fonts e il web: a che punto siamo?

Introduzione

Una dei temi ricor­renti dell’anno appena tra­scorso nell’ambito dello svi­luppo web è stato sicu­ra­mente quello delle font. Ho pen­sato per­ciò di rac­co­gliere alcuni arti­coli com­parsi recen­te­mente per dare una pano­ra­mica della questione.

In par­ti­co­lare, vedremo in cosa con­si­ste a grandi linee l’uso di @font-face, i punti a cui fare atten­zione, le impli­ca­zioni posi­tive e nega­tive. Ho cer­cato di estrarre gli aspetti più pra­tici, riman­dando agli arti­coli ori­gi­nali (lin­kati nei titoli delle sezioni) per i det­ta­gli teo­rici e le moti­va­zioni che stanno die­tro le varie soluzioni.

Per gli impa­zienti, comun­que, ecco il rias­sunto. Anche se i passi in avanti sono stati signi­fi­ca­tivi, credo sia pru­dente limi­tare @font-face a titoli e cose del genere, con­ti­nuando ad usare le font clas­si­che per tutto il resto, magari rive­dendo con più atten­zione gli stack delle font dichia­rate nei fogli di stile.

How to use CSS @font-face #

Cominciamo con la domanda pra­tica: cosa biso­gna 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, dob­biamo defi­nire ori­gine e for­mato per la font Kymberley in modo da poterla poi usare nelle stesse moda­lità delle font già installate.

Fin qui la teo­ria, in pra­tica dob­biamo risol­vere la que­stione dei diversi for­mati delle font ¹. La cosa più veloce per risol­verle è gene­rare tutti quelli che ser­vono con Font Squirrel.

Una volta gene­rati i for­mati biso­gna irro­bu­stire la dichia­ra­zione che abbiamo visto prima per farla fun­zio­nare 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 com­bi­na­zione dei due src si prende cura di Explorer ²; i due local con­sen­tono al bro­w­ser di cer­care prima la font in locale, e sono due per­ché alcuni bro­w­ser usano il nome Postscript e altri il nome del file; il resto sono elen­cati i for­mati in ordine di desiderabilità.

Anche se qui mostriamo una sola dichia­ra­zione, biso­gna tenere pre­sente che biso­gna crearne: una per il roman e una per l’italico ³.

Real Web Type in Real Web Context #

Una volta che abbiamo impo­stato i nostri fogli di stile, per testare una font serve un qual­che tipo di testo stan­dard che ne metta in luce pregi e difetti.

Web Font Specimen fa esat­ta­mente que­sto. Possiamo sca­ri­care la pagina cam­pione in locale, impo­starla con le nostre font e vedere come si com­porta dal vivo, con i vari bro­w­ser ⁴.

Designing For The Switch #

Rendering a parte, uno dei pro­blemi prin­ci­pali nell’uso di @font-face è il peso, dovuto prin­ci­pal­mente alle tabelle di hin­ting molto estese.

Il Georgia, ad esem­pio, è quasi 300 KB, suf­fi­cienti rovi­nare il primo impatto per­ché alcuni bro­w­ser, come Opera e FireFox, pre­sen­te­ranno per un attimo la pagina senza la font cor­retta, il fami­ge­rato Flash of Unstyled Text (FOUT), men­tre altri, come il WebKit, aspet­te­ranno di aver sca­ri­cato tutta la font, non mostrando nes­sun testo durante l’operazione.

Da un punto di vista stret­ta­mente pro­ce­du­rale, non c’è nes­suna alter­na­tiva: la font dev’essere sca­ri­cata e fino a quando l’operazione non è ter­mi­nata le scelte pos­si­bili sono quelle viste prima ⁵.

Fighting the @font-face FOUT — Quicken the load time #

Tuttavia ci sono alcuni truc­chi uti­liz­za­bili. Il primo con­si­ste nel ridurre all’osso il file della font, eli­mi­nando tutto quello che non è stret­ta­mente indi­spen­sa­bile ⁶; il secondo con­si­ste nel cali­brare atten­ta­mente l’elenco delle font nel foglio di stile per mini­miz­zare il FOUT; poi lo pos­siamo zip­pare, gua­da­gnando fino al 40%; infine dovremo fare in modo che la font sca­ri­cata rimanga in cache.

L’arma nucleare tat­tica ⁷è però quella di for­zare il cari­ca­mento della font prima che la pagina venga mostrata, in modo da averla pronta quando serve.

Better font stacks #

Come accen­navo all’inizio, l’estensione dello stack delle font dichia­rate può essere usato per que­sto scopo (com­bat­tere il FOUT) ma anche sem­pli­ce­mente per usare com­bi­na­zione meno scontate.

La pre­messa fon­da­men­tale è che, in realtà, il bro­w­ser ha a dispo­si­zione molte più font di quelle di solito con­si­de­rate. Inoltre, è pos­si­bile indi­vi­duare delle com­bi­na­zioni accet­ta­bili per coprire i casi in cui la font ideale non è presente.

Questo lavo­rac­cio è già stato fatto e il cam­pio­na­rio in pdf alle­gato all’articolo citato è uti­lis­simo per pren­dere una deci­sione ⁸.

Real Fonts and Rendering: The New Elephant in the Room #

E ora veniamo al vero pro­blema emerso nei primi usi sul campo: il ren­de­ring delle font, dovuto ai com­por­ta­menti molto ete­ro­ge­nei dei motori di ren­de­ring in com­bi­na­zione con i diversi sistemi ope­ra­tivi. ⁹.

Browser Choice vs Font Rendering #

L’analisi di Zeldman difetta forse di pre­ci­sione, visto che si limita a con­sta­tare il pro­blema, anche se posso capirlo: i det­ta­gli sono un po’ da mal di testa. Comunque, guar­dando le cose con più atten­zione il pano­rama sem­bra meno preoccupante.

L’attuale sistema di ren­de­ring sotto Windows, il GDI, che for­ni­sce la base per l’anti-aliasing in ClearType, fun­ziona in modo ade­guato solo le font TrueType.

Le nuove ver­sioni dei bro­w­ser use­ranno però un’altro motore, il DirectWrite, più sofi­sti­cato, in grado di for­nire un ren­de­ring ade­guato anche per i PostScript e gli OpenType. Ci saranno ancora delle dif­fe­renze rispetto a Mac OS X ma saranno “solo” diversi.

In con­clu­sione

Dopo tante attese e false par­tenze l’uso di @font-face non è più solo una pos­si­bi­lità teo­rica. Tuttavia, anche se la voglia di usarlo sem­bra con­ta­giare tutti, allo stato attuale va usato con atten­zione: mi limi­te­rei alle tito­la­zioni; per i testi estesi ci vuole più prudenza.

Questi sono pro­blemi che ver­ranno comun­que risolti. Più impor­tanti, invece, i mes­saggi per chi si occupa di design web.

In primo luogo biso­gna supe­rare la fissa di fare in modo che una pagina si veda esat­ta­mente allo stesso modo ovun­que ¹⁰. Il fatto di avere più font a dispo­si­zione ha fatto emer­gere dif­fe­renze enormi fra le varie piat­ta­forme e, a com­pli­care ulte­rior­mente le cose, le piat­ta­forme stesse sono in con­ti­nua diver­si­fi­ca­zione¹¹. Inseguire l’assoluta omo­ge­neità è futile, però biso­gnerà essere più rigo­rosi nei test: le sor­prese del ren­de­ring sono sal­tate fuori in modo cla­mo­roso anche per­ché, a dispetto delle dichia­ra­zioni uffi­ciali, alcuni siti sono “usciti” con ver­sioni testate solo su Mac.

Inoltre e cosa più impor­tante, l’espansione dell’offerta di font uti­liz­za­bili signi­fica che è neces­sa­ria una mag­giore com­pe­tenza (tipo)grafica. Ci vor­ranno più gusto e più com­pe­tenza per la scelta e la com­bi­na­zione giuste.

Può darsi che quella dell’anno scorso sia stata solo una fiam­mata desti­nata a spe­gnersi e rima­nere dor­miente per altri anni ma non ci scom­met­te­rei: meglio prepararsi.

Per proseguire

Commenti e trackback sono disabilitati.

• Tweets, 2012-05-20
• Tweets, 2012-05-13
• Tweets, 2012-05-06
• Tweets, 2012-04-29
• Tweets, 2012-04-22