Font standard e Web Font

Approfondimenti >

Font standard e Web Font

Previous pageReturn to chapter overviewNext page
Mostra/Nascondi testo nascosto 

La scelta di un font è un passo molto importante da compiere perché influisce in maniera rilevante sulla resa grafica di una Pagina Web. Per rendersene conto, è sufficiente dire che oltre il 90% delle informazioni sul Web sono testuali. Diventa fondamentale, dunque, utilizzare per i testi di un Sito font non solo belli ma anche facilmente leggibili su schermo, oltre che avere la certezza che tutti i nostri Visitatori li possano visualizzare correttamente, a prescindere dal dispositivo e dal Browser che utilizzano per la navigazione.

Clicca per espandere/ridurreLeggibilità dei font

La leggibilità di un font dipende essenzialmente da fattori quali: il genere a cui appartiene, la "altezza x" e la dimensione generale del carattere.

Genere - Per quanto riguarda il genere, sul Web risultano più leggibili i font sans-serif (senza grazie o a bastoni, come l'Arial o l'Elvetica) mentre quelli serif (con grazie, come Times New Roman, Georgia o Palatino) vanno molto meglio per i documenti stampati. I font cursiv (corsivi, come l'Arabic) e fantasy (fantasia, come Symbolix), invece, non sono molto supportati dai Browser. Infine, i font monospace (monospaziati, come Courier) se utilizzati per testi molto lunghi tendono ad affaticare la vista e, solitamente, su Web vengono impiegati solo per pubblicare snippet di codice.
Altezza x - Per "altezza x" si intende proprio l'altezza che viene assunta dal carattere della x minuscola. Un font come il Times New Roman ha, per esempio, una leggibilità media sullo schermo di un computer perché ha un'altezza x moderata. Al contrario, un carattere come il Verdana, progettato specificatamente per essere letto a schermo, ha un'altezza della x molto elevata, soprattutto se paragonata ad altri tipi di carattere con la stessa dimensione di punti.
Clicca per espandere/ridurreI font standard o Web Safe Font

Oltre alla leggibilità, fino a quando non è stato introdotto CSS3, un altro fattore che influiva pesantemente sulla scelta dei font per le Pagine Web era il supporto offerto dai Browser. Di fatto si era obbligati ad utilizzare unicamente font standard, ovvero set di caratteri universalmente diffusi e quindi già presenti sulla maggior parte dei computer.  

In pratica, quando si sviluppa una Pagina Web si dice al client quale font utilizzare per renderizzare il testo. Il client cerca tra i font presenti sul computer in uso per vedere se è disponibile quello richiesto: se è presente, procede come da istruzioni; in caso contrario, utilizza un font di default.

Questo meccanismo imponeva, dunque, di utilizzare sempre gli stessi font (Arial, Verdana, Georgia e pochi altri) al fine di poter mantenere il risultato visuale voluto per le proprie Pagine Web, limitando fortemente la creatività degli autori.

Clicca per espandere/ridurreI font non standard o Web Font

Con CSS3, è stata introdotta la possibilità di utilizzare nelle Pagine Web anche font non standard: attraverso il comando @font-face, infatti, è possibile inviare al client il file (nei formati TTF, EOT, WOFF o SVG a seconda del Browser in uso) contenente il set di caratteri da utilizzare per una specifica pagina.

In questo modo il client non deve più cercare se il font è già installato sul computer in uso ma utilizza direttamente il set di caratteri collegato al foglio di stile della Pagina stessa.

Dunque, grazie ai CSS3 è diventato possibile inserire in una Pagina Web qualsiasi Web Font facendolo scaricare direttamente all'utente.

Esistono 2 tecniche principali per utilizzare i Web Fonts:

usare font presenti sul nostro computer, pubblicando i file dei font (nelle diverse estensioni) sul server Web del Sito;
usare un servizio esterno, come Google Fonts™ (gratuito) o Adobe Typekit (a pagamento), che offrono Web Fonts già pronti all'uso da richiamare attraverso i fogli di stile (CSS) delle Pagine del Sito.

Uno svantaggio di queste soluzioni è che i Web Fonts dovranno essere scaricati dall'utente, quindi avranno un impatto piò o meno significativo sul tempo di caricamento della Pagina. A fronte di questo, il vantaggio che offrono è che si ha molta più libertà nella formattazione dei testi e la possibilità di ottenere dei layout più belli e interessanti. Nel caso, dei Google Fonts, inoltre, i font rimangono archiviati sui server di Google e non devono neanche essere pubblicati sul server del Sito Web.

Clicca per espandere/ridurreQualche consiglio

Ora che grazie ai Web Fonts anche su Web si può godere della stessa libertà creativa a cui si è abituati lavorando su Desktop, occorre fare attenzione a non abusarne. Alcuni consigli a cui sarebbe bene attenersi:

È meglio utilizzare pochi font e poche dimensioni: le Pagine avranno un aspetto più chiaro e ordinato.
È necessario evitare cambianti casuali e applicare lo stesso tipo di carattere e la stessa combinazione di stili in tutte le pagine: il Sito risulterà più omogeneo e coerente.
È importante integrare nelle Pagine solo i Web Fonts, e i relativi stili, effettivamente utilizzati: i file dei Web Fonts devono essere scaricati dall'utente e, di conseguenza, occorre valutarne l'impatto sui tempi di caricamento delle Pagine.
È importante verificare sempre le licenze d'uso dei font utilizzati: esistono font utilizzabili gratuitamente sul Web, altri che possono essere usati solo per la stampa o solo in determinate condizioni e ogni caso va valutato singolarmente.
Clicca per espandere/ridurreUtilizzare i Web Fonts in WebSite X5

Sono numerosi i punti in cui WebSite X5 permette di scegliere il font da utilizzare: ovviamente l'opzione per la selezione del font è disponibile nell'editor dell'Oggetto Testo ma anche nell'editor del Intestazione/Piè di pagina del Modello grafico e, più in generale, tutte le volte che è previsto un testo, sia questo un contenuto, una voce di menu, un'etichetta, ecc...

In ogni caso, la scelta del tipo di carattere viene effettuata attraverso un menu nel quale vengono automaticamente visualizzati tutti i font installati sul computer. Questa lista può essere ampliata aggiungendo, senza doverli installare sul sistema, Web Fonts ripresi da Internet (vedere, Come utilizzare i Web Fonts).

Nel menu di selezione, tutti i font di sistema disponibili e i Web Fonts aggiunti sono elencati insieme in ordine alfabetico ma sono facilmente distinguibili grazie all'icona che li affianca:

I tipi di font sono facilmente distinguibili grazie alle icone associate:

Google Fonts: font integrati attraverso la finestra Aggiungi Web Font di WebSite X5 e collegati al server Google.

Online Web Fonts: font integrati attraverso la finestra Aggiungi Web Font di WebSite X5 e collegati ai server del servizio che offre i font.

Offline Web Fonts: font integrati attraverso la finestra Aggiungi Web Font di WebSite X5 e pubblicati sul server Web del Sito.

 


Best practice:

-

Come utilizzare i Web Fonts

-

Come scaricare un font da Fontsquirrel