Questa è la traduzione dell'articolo Real Web Type in Real Web Context di Tim Brown, pubblicato originariamente su A List Apart il 17 Novembre 2009. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.
Ora che i browser supportano l'inserimento di font reali nelle pagine web e possiamo concedere in licenza per questo uso intere famiglie di font, proviamo a uscire dalla fase di entusiasmo e a pensare in termini più pragmatici a come usare questi font nei nostri progetti web. Diversi esperimenti con la proprietà CSS @font-face, compreso il lavoro svolto da un servizio Typekit, mi hanno portato ad una conclusione: voglio sapere come i miei font rendono sullo schermo, nei browser web. Alla fine di tutto questo ragionare ho creato Web Font Specimen, una risorsa gratuita che i web designer e i tipografi possono usare per testare, appunto, come sarà la resa dei caratteri tipografici sul web.
I modelli campione fatti di markup e regole di stile per i test non sono cosa nuova. Forse avrete già salvato nei vostri bookmark i link a qualcuna di queste risorse, che si tratti di questo tool del W3C o di altro. Web Font Specimen è molto simile ai file campione che troviamo o produciamo, con due importanti differenze: il suo unico scopo è quello di mettere alla prova un carattere tipografico, il nostro quello di condividere queste risorse.
Web Font Specimen è rilasciato sotto una licenza Creative Commons 3.0. Ogni suggerimento per miglioramenti è benvenuto. Torneremo su tale aspetto nel seguito dell'articolo.
Prima di tutto esamineremo il funzionamento e l'aspetto di Web Font Specimen. Successivamente discuteremo di come prestare maggiore attenzione alla resa dei font sul web, dal momento che questo aspetto influenzerà chi i font li vende, chi li disegna, ma anche i web designer.
Web Font Specimen
Andate sul sito Web Specimen Font, scaricate il file .zip, fate un'anteprima dei file HTML in un browser. Dovreste vedere qualcosa come questo esempio. La resa varierà in base alle vostre impostazioni, ma l'esempio dovrebbe rendere al meglio (si tratta di un puro e semplice Georgia, tutti dovreste averlo installato ed è un font creato per rendere bene sullo schermo).
Scorrete verso il basso e vedrete Georgia messo alla prova e applicato su titoli, liste e con enfasi differenti. C'è una comparazione per le dimensioni, per differenti altezze di riga (line-height), un campione dei vari simboli, differenti misure in minuscolo e maiuscolo, esempi di testo in scala di grigi, di testo chiaro su sfondo scuro, una combinazione di colori. Le ragioni per cui si è deciso di inserire tutto ciò nello specimen sono esposte su questa pagina del sito.
Sperimentare
Successivamente potrete sostituire Georgia con il font che volete testare. Leggete il file README allegato nel download per le istruzioni. Per ulteriori informazioni, potete leggere anche i miei post su Nice Web Type: Where to get web fonts e How to use CSS @font-face.
Noterete che il Web Font Specimen è basato sul framework 960.gs di Nathan Smith. È una grande risorsa per creare rapidamente dei layout. Il file text.css di 960.gs è stato comunque sostituito con un altro più adatto alle nostre esigenze.
Tutto quello che resta da fare è testare i risultati e decidere se il modo in cui un certo font rende su schermo sui vari sistemi operativi e sui vari browser è accettabile o meno.
Cosa significa per chi vende font
Il business di chi vende font sta rapidamente cambiando nel senso che ora hanno un nuovo mercato a cui rivolgersi per piazzare i propri prodotti. Certo, noi designer abbiamo sempre usato font sui nostri siti: tecniche di replacement, immagini con testo alternativo, i font serviti via CSS hanno consentito la realizzazione di straordinarie esperienze tipografiche. Tuttavia, abbiamo raramente usato i font nel modo in cui li usano quanti lavorano nel mondo della carta stampata. La nostra esperienza con la tipografia per il web ha sempre avuto a che fare più con i mezzi che con i fini.
Per anni i web designer hanno sentito la mancanza di un modo per usare la tipografia al massimo delle sue potenzialità estetiche. I discorsi ruotavano quasi sempre intorno a concetti come il buon markup e l'accessibilità. Ma la natura dei nostri mezzi tecnici per incorporare i font nelle pagine web ha svolto il ruolo di ostacolo.
Siamo stati poi così impegnati a cercare di ottenere una vera tipografia nei nostri siti, che alla fine non abbiamo avuto la possibilità di capire perché i font appaiono su schermo in un certo modo e non in un altro. Il risultato è che la resa dei font sul web è rimasta a lungo un mistero. Piuttosto che provare a mettere ordine nei concetti, abbiamo trattato la tipografia sul web come una disciplina minore (con meravigliose eccezioni).
Mentre i web designer superano mentalmente il complesso di inferiorità sofferto nei confronti della stampa, i produttori di font sanno che nuovi potenziali clienti richiederanno un trattamento corretto anche rispetto alla resa sul web. Web Font Specimen è allora un ottimo strumento quando i font che vogliamo usare sono in nostro possesso. Ma quando i caratteri sono bloccati nelle maglie di un servizio di distribuzione o dietro il carrello della spesa di un rivenditore di font, come potremo giudicare se sono adatti al nostro progetto web?
In pratica, chi vende font dovrebbe fornire un modo per mostrare a chi li acquista come un certo font rende sullo schermo quando viene incorporato nella pagina usando la proprietà CSS @font-face. Possono tutti usare (e sono invitati a farlo) Web Font Specimen come una sorta di trial da fornire a chi vuole acquistare un font. Spero che lo faranno, e non solo perché abbiamo la necssità di verificare come come i nostri font renderanno sul web, ma perché il contributo di chi i font li distribuisce potrà rendere migliore Web Font Specimen. Collaborando con i web designer potremmo così riuscire a fornire un servizio ottimale per tutti.
Cosa significa per i creatori di font
Se i distributori di font sono riluttanti a trovare modi per mostrare le loro creazioni in un contesto adatto al web, chi i font li disegna e crea non sarà in grado di mettere in evidenza tutte le sfumature e i dettagli che ha provato a ottenere nei suoi font. Andare incontro alle aspettative dei web designer in fatto di resa a schermo dei font sarà una sfida ardua.
Dai glifi alla tipografia per il web
Lavorando in diversi thread su Typophile con persone che sanno cos'è la tipografia, ho provato a immaginare il percorso periglioso che un font deve compiere nel viaggio dal mondo fatto di curve e punti matematici dei produttori di font alla griglia di Web Font Specimen. Ecco la mia personale lista di step da compiere, lista che è stata migliorata grazie a tanti suggerimenti:
- Un glifo inizia come una forma basata su una curva di Bezier.
- Questa forma viene passata ad un programma per la creazione di font come FontLab.
- Impostazioni come le UPM (unità per em), le dimensioni chiave (per la misurazione verticale come l'altezza della x, l'altezza delle maiuscole, le parti ascendenti e quelle discendenti), le metriche (per la misurazione orizzontale come il kerning) determinano come la forma delle lettere agirà come glifo in un font: per esempio, quanto spazio occuperà ad una determinata dimensione, come apparirà in prossimità delle altre lettere, etc.
- Vengono aggiunte istruzioni (automaticamente o manualmente) che possono fornire indicazioni su come conservare la personalità del font in ambienti dove sarà impiegato un output non ideale.
- Il glifo è esportato come come parte di un font, in formato OTF o TTF.
- Il glifo viene confrontato a livello di sistema operativo e browser rispetto a degli algoritmi di resa. Sto ancora provando per conto mio queste combinazioni. Vorrei fare un confronto incrociato su tecnologie come Quartz o ClearType e con varie combinazioni di motore di rendering a livello di sistema operativo o browser.
- Le impostazioni dell'utente (nelle preferenze del browser, per esempio, o in quelle del sistema operativo) possono modificare il modo in cui i motori di rendering interagiscono con i file di font. Gli utenti di Windows possono avere ClearType attivo o disattivo. Altri utenti potrebbero disabilitare del tutto l'antialiasing. Certe preferenze possono limitare la dimensione a cui l'antialiasing viene applicato. Fare un elenco di tutte queste variabili è un altro dei miei obiettivi.
- Infine, ci sono le qualità fisiche dell'hardware, come il tipo di monitor impiegato, la sua risoluzione, se si usa la risoluzione nativa oppure no, le impostazioni per il colore e la luminosità.
I passi dal 4 al 6 sono molto importanti e non devono essere sottovalutati. Questi fattori possono essere causa di molti fastidi per chi crea font. Agli occhi di un nuovo pubblico di potenziali clienti/utilizzatori che giudicheranno un font solo dalla resa sullo schermo, il modo in cui un carattere tipografico appare attraverso diverse combinazioni di sistema operativo e browser è cruciale.
Senza entrare nello specifico, le possibili combinazioni degli algoritmi di resa possono spesso concludersi in uno o due modi: 1) il motore di rendering ignora le istruzioni fornite dal designer e fa tutto per conto suo, rimanendo fedele quanto più possibile al disegno originale del font, quasi sempre con buoni risultati (è il caso di Apple); oppure 2) il motore di rendering si affida a complessi calcoli secondo le istruzioni fornite dal produttore, prova ad usare quelle informazioni in vista di una leggibilità ideale e fa sì che si ottenga un buon risultato solo se il font è progettato per raggiungere questo scopo (è il caso di Windows).
Cosa possono fare allora i creatori di font? Beh, almeno tre cose. Possono preparare i loro font perché vengano visualizzati al meglio su differenti configurazioni (anche se è molto dispendioso in termini di tempo e complicato), possono sollecitare una campagna per ottenere degli standard nella resa dei caratteri tipografici, oppure possono correre seri rischi nel contesto del loro business. Sono tutte opzioni poco gradevoli.
Cosa significa per i web designer
Abbiamo già letto tante cose sul ruolo che i web designer possono svolgere. Dobbiamo innanzitutto rimuovere i complessi di subordinazione andando ad auspicare aspettative realistiche rispetto alla resa della tipografia sul web. Se i produttori di font pensano che ne valga la pena, potremmo ancora una volta fare un passo verso il cambiamento di una situazione in cui la definizione di standard aiuterebbe.
Nel frattempo, dobbiamo fare in modo che i caratteri tipografici vengano visualizzati bene sui nostri siti oggi.
Se mettiamo alla prova il nostro font preferito con Web Font Specimen, se testiamo su vari browser e ci piace il risultato, è una cosa eccellente. Useremo quel font. Ma cosa succede se non ci piace il risultato? Quali sono le nostre opzioni?
Se un font non rende bene
Se noi (e i nostri visitatori) siamo fortunati, potremmo essere in grado di cercare un font alternativo che rende bene sullo schermo. A prescindere da certi aspetti rischiosi della produzione di font in questo mercato emergente, esistono già font che rendono bene in svariate situazioni, e molti altri arriveranno.
Se, poi, andare alla ricerca di un font alternativo può essere fastidioso in certe occasioni, in altre potrà essere devastante. Se il vostro progetto dipende tutto dall'uso di un font specifico, come in quei progetti in cui si devono seguire linee guida imposte dal brand, potreste davvero rimanere impantanati in questo tentativo di sostituzione.
A meno che qualcosa non cambi rispetto al modo in cui molti font rendono sui vari browser e sistemi operativi, queste sono le opzioni realistiche che molti di noi dovranno affrontare quando decidiamo di usare font reali con @font-face:
- usare una qualche forma di logica condizionale per servire font diversi a diversi visitarori;
- consentire al nostro font di rendere in maniera poco soddisfacente per alcuni visitatori;
- continuare a usare tecniche di font replacement.
Per giungere al cambiamento la cosa migliore è puntare al nuovo capendo prima le sfide che dobbiamo affrontare. Per vedere come i font rendono sul web, abbiamo solo bisogno di buoni modelli di test. Spero che questo articolo sul web Font Specimen possa rendere questa attività di testing più semplice e divertente.
