CSS  »  Guide  »  Guida CSS Tecniche essenziali 

I font installati sui PC degli utenti non sono gli stessi per ognuno. Il set di caratteri a disposizione dipende da molte variabili, come ad esempio il sistema operativo (Windows, Mac, Unix, ...), eventuali software installati (Office e pacchetto Adobe su tutti) e caratteri installati manualmente.

Quando bisogna scegliere il carattere per una pagina, quindi, bisogna tener conto che non tutti gli utenti avranno installato un certo font sul proprio PC. La prima soluzione a questo problema consiste nell’utilizzare i cosiddetti caratteri “web-safe” (Verdana, Georgia, Times New Roman, etc.), ovvero un set di caratteri compatibili con tutti i sistemi operativi. Questo soluzione già garantisce buona compatibilità della pagina con la maggior parte dei sistemi.

Per garantire, invece, alternative valide a tutti i sistemi in maniera da rendere compatibile la pagina in qualunque situazione, è consigliato fare uso della tecnica denominata font-stack.

Come ben sappiamo, la proprietà font-family del CSS consente di inserire più di un solo font al suo interno, come nel seguente esempio:

body {
  font-family: "Times New Roman", Times, Georgia, serif;
}

Questa caratteristica permette di creare una lista di caratteri da utilizzare nella pagina. Nel caso il primo carattere non fosse installato (Times New Roman), verrà utilizzato il secondo e così via creando quindi una sorta di stack.

L’idea principale del font-stack è quella di utilizzare famiglie di caratteri simili, in maniera da consentire una visualizzazione di pagina simile per ogni sistema e/o browser.

Font-family comuni

Bisogna innanzitutto riconoscere le categorie di appartenenza dei font da utilizzare, così da scegliere correttamente i tipi di carattere. Le principali, e più famose, famiglie sono le seguenti:

• serif: ovvero con “grazie”; quei font come Georgia e Times New Roman;
• sans-serif: ovvero “senza grazie”; font come Arial e Verdana;
• monospace: composto da caratteri come il Courier utilizzati, ad esempio, negli editor testuali.

Font-stack intelligenti

Da tempo, ormai, sono stati realizzati dei font-stack già pronti che garantiscono una corretta compatibilità con tutti i sistemi.

A seconda delle esigenze possiamo scegliere font-stack adatti per il corpo della pagina, altri adatti per i titoli, etc.

Vediamo insieme alcuni dei font-stack con e senza grazie più famosi utilizzati in rete:

Corpo del testo

• Baskerville, ‘Times New Roman’, Times, serif
• Geneva, ‘Lucida Sans’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif

Titoli

• Palatino, ‘Palatino Linotype’, ‘Hoefler Text’, Times, ‘Times New Roman’, serif
• Trebuchet, Tahoma, Arial, sans-serif

Le famiglie di caratteri appena viste contengono caratteri che, anche se presenti in più dell’80% dei sistemi, non appartengono tutti alla lista dei web-safe fonts. Per non correre rischi si può decidere di utilizzare font-stack contenenti solo caratteri web-safe come le seguenti:

• Verdana, Geneva, sans-serif
• Tahoma, Arial, Helvetica, sans-serif
• Georgia, Utopia, Palatino, ‘Palatino Linotype’, serif
• ‘Times New Roman’, Times, serif
• ‘Courier New’, Courier, monospace

Altri articoli

Altre guide

Altre newsletter