Web Font alla Frontiera

WOFF#section1

WOFF è stato formalmente sottoposto al W3C Fonts Working Group l’8 aprile 2010. Inaspettatamente, Microsoft ha co-sponsorizzato la presentazione insieme ad Opera e Mozilla ed il supporto per WOFF appare nelle build di IE9 in anteprima per gli sviluppatori. WOFF sarà il “formato di trasporto” standard per i font. È già presente in Firefox 3.6+ e i creatori di Chrome hanno annunciato che anche Chrome, presto, supporterà WOFF.

Ora, WOFF, sfortunatamente, è stato talmente pubblicizzato in una maniera così grandiosa da risultare fuorviante. Quindi, fermiamoci un momento perché è importante capire che cos’è WOFF e, altrettanto importante, che cosa non è.

Così come per il suo cugino più anziano, EOT (Embedded Open Type), un file WOFF è essenzialmente un font file zippato. Di per sé non è un formato di font: è un font file che è stato impacchettato per poter viaggiare. Come PNG e JPEG sono formati di immagini che stanno a BMP e TIFF, WOFF sta a TTF e OFT. (A parte questo, a differenza di un’immagine compressa, il font originale può e deve essere estraibile dal file compresso). In pratica, WOFF e EOT sono molto simili ed il rapporto di compressione è più o meno lo stesso.

WOFF non è un formato di font magico che una volta per tutte abbatterà tutte le barriere che ci sono con le licenze per i font commerciali. No, le paure dei produttori di font riguardo al web sono molto più complesse di questo e le esamineremo a breve, in relazione a FHOS.

IE9 e DirectWrite#section2

IE9 usa le rendering API DirectWrite di Windows. Se non avete scaricato l’anteprima di IE9, vi consiglio di farlo, vi potrebbe rallegrare. Se ci avete passato un pochino di tempo, non vorrete tornare a IE8 e/o XP (utenti Mac, non sghignazzate, per favore). Il rendering dei font in IE9 è un mondo a parte rispetto a quello delle aspettative a cui ci ha abituato IE. È sicuramente alla pari con Mac e per certi versi è probabilmente migliore. Ma, qualunque sia la vostra personale opinione, almeno la differenza si riduce in gran parte ad un problema di gusti. Uno dei più grandi effetti collaterali dell’attenzione sui web font è stato puntare il riflettore solo su come volere il font rendering nei browser su Windows fosse diventato in confronto ai browser su OS X. Notate inoltre che DirectWrite è una API di Windows, non specifica per IE e altri browser come Firefox la implementano.

IE9 e @Font-Face secondo CSS3#section3

Ad oggi, ciò che rende @font-face una proposta cross-browser fattibile è che—sorprendentemente— IE ha supportato @font-face per più di dieci anni ormai. Tuttavia, IE9 sarà la prima implementazione di @font-face così come descritto in CSS3.

I cambiamenti principali sono i seguenti.

Formati dei font#section4

Oltre ai font TrueType, IE9 supporterà i font “insaporiti” di PostScript OTF CFF, così come fanno i restanti “grandi cinque” browsers. Ora, rimuovere questa barriera all’interoperabilità è una buona cosa, ma devo spendere una parola in favore della cautela: anche solo per l’interesse per la compatibilità all’indietro con IE 6–8, ci vorranno anni prima che i font web non saranno più predominantemente i TrueType. IE 6”8 accetteranno solo i font TrueType impacchettati come un EOT. E ci sono anche questioni di rendering da considerare in altri browser Windows.

Come è auspicabile, i designer di font saranno d’aiuto rendendo i loro font disponibili in TrueType con un adeguato TrueType hinting. A meno che, come un designer di caratteri tipografici mi ha suggerito abbastanza seriamente, ciascuno debba solo stare alla larga dai font web per tutto il tempo che ci vorrà perché IE8 esca di scena. Hah! Troppo tardi!

Sintassi#section5

All’interno della “dichiarazione” @font-face in CSS3, voi, come autori web, potete fare quello che il sistema operativo fa per voi con i font web-safe. Voi potete raggruppare i font in font-family “dichiarandoli” con lo stesso nome della font-family. Voi potete differenziare i membri di quella famiglia “dichiarandone” ciascuna perché sia una differente combinazione di font-style (normal, italic) e font-weight (normal, bold).

Badate che i termini font-weight e font-style hanno significati differenti all’interno della dichiarazione @font-face rispetto a quando si trovano fuori dalla dichiarazione nei principali set di regole del CSS. All’interno della dichiarazione, “font-weight:bold” sta a significare: “Questo è il membro bold di questa font-family” all’esterno la dichiarazione “font-weight:bold” indica: “Applica il bold a questo testo usando il membro di questa font-family che era stato dichiarato come bold.”

In IE6–8 @font-face funziona allo stesso modo. Tuttavia, per far funzionare nel modo corretto i files EOT, alcuni dati descrittivi e riguardanti i nomi all’interno del file TTF dal quale è creato l’EOT devono corrispondere alla dichiarazione CSS. La maggior parte delle volte non ci sono problemi. Ma di tanto in tanto certi campi all’interno delle tabelle dati del font hanno bisogno di modifiche. Se dovesse accadere, i problemi sono ben noti e semplici da sistemare. (I dettagli si trovano nei documenti per EOTFAST).

Tool per i Web Font#section6

Sono comparsi i tools essenziali per gli autori web.

Il Font Squirrel Generator#section7

Il Generator è una suite di tools online che offrono la conversione, il subsetting, la generazione del CSS ed altro ancora. Al momento, è semplicemente di gran lunga il migliore tra ciò che c’è disponibile sul web e continua ad evolversi nelle mani del designer di font e sviluppatore web Ethan Dunham.

Inoltre, dovreste prendere confidenza con alcuni dei seguenti tools gratis che vengono usati dietro le quinte in posti come Font Squirrel, Kernest e Google:

• FontForge è un editor di font completo, dotato di ogni sorta di prelibatezza di scripting server-side. È anche open source.
• sfnt2woff è una suite di tools open source per impacchettare i font TTF e OTF CFF in files WOFF.
• ttf2eot è un precursore di EOTFAST. Crea file EOT “lite” non compressi.
• TTX è un tool che serve per convertire i font OpenType e TrueType da e verso XML.
• Fontue è un motore open source per presentare i font ed inoltre ha degli script di font-processing. I contribuiti sono ben accetti su Github.
• WebFont Loader è una libreria JavaScript che vi dà maggior controllo sul caricamento rispetto a quanto fornisce la Google Font API. È stata sviluppata congiuntamente da Google e TypeKit.

EOTFAST#section8

Sviluppata da me e da Philip Taylor di Cambridge, UK, EOTFAST è un’alternativa gratuita e semplice da usare al tool di conversione da incubo di Microsoft TTF-to-EOT, WEFT. Potete usare EOTFAST per creare files EOT compressi nativamente per la compabilità ed un più rapito page load in IE 6–8. Inoltre, notate che il formato EOT non è stato deprecato e continuerà a funzionare in tutti i modi di rendering di IE9, facendone così un modo comodo per raggiungere tutte le versioni di IE senza ricorrere ai commenti condizionali.

Licenze trusting#section9

Le licenze trusting—font a prezzi di stock che forniscono sia i file TTF o OTF installabili per facilitare lo sviluppo sia files che andranno messi sui web servers— sono disponibili da Font Spring. Inoltre il sito fornisce—così come ogni sito che vende font per il web dovrebbe fare—una pagina di prova del font all’interno del browser così che possiate voi stessi vedere che cosa avrete veramente prima di acquistare. Speriamo che in futuro altri negozi adottino questo semplice modello di licenza.

Font Hosting e Obfuscation Services (FHOS)#section10

Prima di @font-face, i browser si erano basati sul sottostante sistema operativo per i font, quindi l’uso senza licenza nelle pagine web non è mai stato un problema. Il Sistema Operativo agiva non solo come canale tecnologico, ma anche legale. I diritti per usare i font web safe erano insieme al sistema operativo. Ma @font-face bypassa il sistema operativo e, al contrario, i font arrivano dai web server. Questo pone di fronte i produttori di font commerciali alla prospettiva di una grande perdita di controllo e di un nuovo insieme di realtà legali. Porta anche la prospettiva di un nuovo vasto mercato, ma all’interno dell’industria dei font è giusto dire che c’è stato meno eccitamento riguardo a questo piuttosto che alla diffidenza riguardo una possibile perdita di controllo. Il mercato del web è uno sconosciuto, il mercato della stampa è noto. Il conflitto nuovi media vs. vecchi media si sta giocando fino in fondo, questa volta con i font.

Le preoccupazioni dei produttori di font commerciali vanno molto più in là dello scenario di alcuni visitatori di un sito web che vedono un font che gli piace, cercano nel CSS e lo scaricano. Lasciate che vi dia la seguente spiegazione, così che possiate capire meglio perché esistono i servizi di font che usano l’oscuramento e, in alcuni casi, accordi di licenza piuttosto lunghi, ottusi e lagnosi.

I produttori di font hanno assistito a quel che è successo all’industrie musicale, ai libri, ai giornali, alle riviste e agli stock di foto e temono che la stessa cosa stia per accadere anche a loro. È stato chiamato Effetto iTunes e riguarda il prezzo.

I designer di font sono ancora molto focalizzati sulla stampa. Nell’insieme, i soldi sono nell’approvvigionamento di acquirenti professionali nell’industria della stampa: libri, riviste, display, etc. I prezzi di solito si muovono su una scala mobile basata sul numero di utilizzatori. La paura è che una volta che i font sono sul web, diventeranno un bene economico, il modello corrente si romperà e ci sarà, in generale, una svalutazione dei font. La paura sta nel fatto che i designer di font non saranno più in grado di far pagare un cliente per la stampa ad esempio 420$ per una famiglia di font di quattro stili con una licenza di 6���10 utenti in un mondo in cui i font viaggiano sui siti web verso un numero virtualmente illimitato di “utenti” che non devono pagare alcunché. Cosa succederebbe se il web abbassasse così tanto i prezzi del settore della stampa e non generasse abbastanza reddito di per sé?

Attenzione acquirente!#section11

In risposta a questa “Minaccia di Internet” alcune case di produzione di font commerciali hanno optato per i font hosting and obfuscation services (FHOS). Questi servizi sostanzialmente usano il modello di Amazon Kindle ma invece dei libri ottenete quello con cui sono prodotti i libri: caratteri tipografici. I font sono distribuiti in modo misurato e controllato così che i creatori di font sanno dove ciascun font è diretto e come lo si sta usando. L’oscuramento si concentra sulla prevenzione del download fortuito e rende il font non-installabile nel sistema operativo, pertanto non disponibile per i programmi di layout di stampa come InDesign. Per questi servizi, avere saldamente in mano il file del font è la prima direttiva.

Sviluppandosi dalle discussioni tra i rappresentanti dei produttori di font come Microsoft, Adobe, Monotype Imaging e altri in seguito all’apparizione di Typekit l’anno scorso, gli ultimi mesi hanno portato le offerte di FHOS dal proxy di distribuzione dei font di Microsoft, Ascender Corp, Extensis (specialista in software di font-management e licensing management), Monotype Imaging, e un collettivo che include Font Bureau di David Berlow.

Posso dirvi che le persone che lavorano in Extensis, Ascender e Monotype sono veramente felici ed entusiaste riguardo la fornitura di font per il web. Ma sicuramente non saranno veloci nel far notare che il sistema di consegna per questi font è creato all’interno dei vincoli di una struttura intelligente ma hacky simile ai DRM. Tutto ciò è comprensibile. Ma i tentativi di identificare e prevenire le istanze di distribuzione senza licenza attraverso il codice hanno dimostrato di essere controproducenti quasi per tutti ed è difficile non vedere l’offuscamento come futile ed irrilevante sul lungo termine.

Il progettista di font Ray Larabie l’ha detto meglio:

Proteggere i font dall’installazione nel sistema operativo sembrerà bizzarro e da pazzi in una decade in cui l’utilizzo di font per qualcosa che non sia il web sarà una rarità. Installare i font sul vostro sistema operativo? Che diamine, nonno! Nel prossimo futuro, nessuno vorrà nemmeno installare un font su un sistema operativo.

Acquirente devi essere grato!#section12

Tuttavia, c’è il rovescio della medaglia. Potete vedere FHOS come una fase. I servizi sono innovativi. Ad esempio, il servizio WebINK di Extensis fornisce una “procedura guidata per l’anteprima” dell’assortimento completo di caratteri installabile gratuitamente, chiamata Type Drawer, che, fra le altre cose, permette di scambiare istantaneamente i font selezionati sulla vostra pagina con la semplicità del drag and drop. Questo può far risparmiare moltissimo tempo e certamente è il tipo di authoring tool di cui hanno bisogno i designers. Al momento, è un servizio proprietario di WebINK, ma comunque aiuta a dare forma alle cose che verranno.

Una checklist per i servizi di font#section13

Personalmente, il mio obiettivo è quello di dare informazioni alle persone che fanno da sé. E come autore per il web, ora che non devo più fare affidamento al sistema operativo per i font, fatta eccezione che per il meccanismo di fallback, non mi trovo a mio agio con l’idea di avere un’entità esterna che controlla qualcosa così di base e fondamentale per il design del mio sito come lo sono i caratteri tipografici. Inoltre, qualunque web designer indipendente con cui abbia parlato mi ha detto che semplicemente non accollerà al cliente, per nessun motivo, la spesa crescente per i font. Ci sono disponibili migliaia di font gratis e molti di questi sono di gran qualità o addirittura migliori di quelli offerti dai servizi.

Sicuramente, dovreste sapere, almeno, quali sono le differenze tecniche tra quello che fa il servizio e cosa potreste fare voi se faceste voi stessi da hosting ad alcuni files. Influenzato dalla checklist recentemente proposta da EFF in concomitanza con l’esplosione dei libri digitali, ecco una specie di checklist del consumatore per quelli che stanno considerando FHOS:

1. Esattamente, quali inefficienze si stanno introducendo nello sforzo di evitare che i visitatori del vostro sito scarichino ed installino il font nel loro sistema operativo? Come conseguenza, quante http request si stanno facendo in più?
2. È stato disabilitato il caching? Gli utenti saranno soggetti ad un Flash Of Unstyled Text (FOUT) ad ogni sessione?
3. Se si sta utilizzando il file splitting come tecnica di offuscamento, come influenza lo spacing ed il kerning? E, inoltre, il file splitting aumenta la probabilità di fallimento in alcuni browsers?
4. Il servizio è veramente “standards compliant” perché vi permette di usare lo standard CSS3 nella sua completezza come è correntemente implementato da quei browser che supportano @font-face?
5. L’End User License Agreement o i Terms of Service sono comprensibili? Come per un contratto d’affari, siete a vostro agio impegnandovi o facendo impegnare il cliente alle sue norme? Se decidete di non usare più il servizio e di cominciare a fare voi stessi l’hosting per i vostri font, l’accordo vi può presumibilmente compromettere in qualche modo?
6. Qual è la privacy policy? L’attività sul vostro sito verrà monitorata e registrata, e se sì, come? E cosa si fa con quelle informazioni?
7. I termini del contratto definiscono i diritti dei visitatori del vostro sito? In quanto “utenti” i visitatori hanno licenza d’uso del font non solo nel display a video ma anche per la stampa e per la creazione di PDF? I visitatori che cercano di scaricare i files del font sono individualmente esposti ad un qualsiasi rischio sotto il DMCA? [Digital Millenium Copyright Act, ndr] (Siamo sinceri, tutti smontiamo ed esaminiamo parti dei siti delle altre persone. Questo è il web.)
8. Una volta che il support per WOFF (ed EOT) sarà onnipresente, ci sarà una strada per il self-hosting o saremo per sempre legati al servizio?

Commenti, per favore.

Caratteristiche avanzate di OpenType#section14

Con la leadership di John Dagget di Mozilla come autore del CSS3 Fonts Module, uno sbalorditivo team di esperti di type design “invitati” sta facendo un duro lavoro al W3C ragionando sui problemi della tipografica avanzata al W3C. Nel breve termine, questo potrebbe avere un grosso impatto sulla visualizzazione dei simboli matematici e delle lingue non latine.

Il futuro del Flash Text Replacement#section15

Sono passati anni ormai e Flash non va ancora su iPhone. È proibito su iPad. Il recente pronunciamento di Steve Jobs ha ottenuto molta attenzione ed è molto difficile immaginare che Apple torni sui suoi passi riguardo a questa decisione. In aggiunta, l’iPhone e l’iPad supportano entrambe un’alternativa @font-face molto più semplice ed elegante del font rendering usando il formato SVG. Per qualunque developer che stia pensando ad un nuovo progetto, è difficile vedere come sIFR possa avere un senso. @font-face presenta una curva d’apprendimento più bassa e non deve per forza avere un futuro, è il futuro.

Google fa font-hosting#section16

In uno sviluppo a sorpresa che si è evoluto dalle chiacchierate informali con il personale di Typekit, Google è diventato un provider di font a licenza aperta attraverso le Google Ajax API. È stato creato come progetto open source e potete trovare la documentazione, gli esempi e le informazioni per contribuire sul suo repository GitHub. A differenza di molti progetti open source, questo sforzo ha un curatore a tempo pieno in Raph Levien. Strano a dirsi, nonostante il fatto che i font siano spesso il prodotto di più team, alcuni osservatori molto informati asseriscono che i font sfidano la collaborazione open source. Bene, staremo a vedere.

Farlo funzionare oggi#section17

Tutti insieme adesso, confondiamoci fino in fondo: per IE 6–8 potete usare solo i font TTF impacchettati come EOT o EOT “Lite” (non compressi). Per Firefox, Opera, Chrome e Safari potete mandare files TTF o OTF o “così come sono”, o in alcuni casi, impacchettati come files WOFF o come URI ai dati all’interno di un foglio di stile. SVG andrà avanti sicuramente ad essere uno dei formati di font maggiori ma la sua virtù principale al momento è il supporto in Mobile Safari per iPhone e iPad. Capito?

Sì, confonde. All’inizio. Ci sono sempre grandi cambiamenti. Ma mi aspetto che gli autori web faranno quello che gli autori web hanno sempre fatto: trovare un modo per far funzionare la cosa. I materiali nudi e crudi ci sono. I tool ci sono. I workarounds ci sono. Quindi, mettete insieme alcune pagine d’esempio e dei templates, e preparatevi per varcare il confine. È il momento.

Illustrazioni: {carlok}