Web Design  »  Articoli  »  Web design 

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.

Figura 1 - Testo a 42px

Figura 2 - Titoli, liste, enfasi

Figura 3 - Testo in scala di grigi e colore, testo chiaro su sfondo scuro

Altri articoli

Altre guide

Altre newsletter