Archiviato per sempre il vecchio tag <font> per definire il font di caratteri da usare per il nostro testo, l’aspetto tipografico delle nostre pagine viene oggi definito dalla specifica font-family del foglio di stile CSS.
body {
font-family:'Trebuchet MS', Helvetica, sans-serif;
color: #333333;
}
h1,h2 {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
}Questo codice definisce che il font da usare di base sulla pagina sia il Trebuchet MS e il colore sia grigio scuro (#333333) mentre quello da usare per i tag di heading h1 e h2 sia l’Arial grassetto (font-weight: bold;)
Il passaggio ai CSS tuttavia non rimuove la limitazione alla scelta dei font che possiamo usare: affinchè la pagina venga visualizzata secondo le nostre specifiche il font indicato deve essere presente sul computer dell’utente. Specificando ad esempio:
body {
font-family:Calibri;
}
Specifichiamo di volere impiegare per la pagina il font Calibri, appartenente alla ClearType Font Collection fornita con Windows Vista e con Office 2007. Risultato graficamente piacevole; peccato che chi non disponde del font (utenti Mac, utenti senza Windows Vista o Office 2007, utenti linux, ecc) vedrà visualizzata la nostra pagina nel font di default del browser che è quasi sempre il Times New Roman, molto differente dal Calibri.
Per questo motivo è almeno utile indicare una sequenza di font alternativi che possano essere usati dal browser qualora il primo font indicato non sia presente sul computer:
body {
font-family:Calibri, Verdana, Arial, sans-serif;
}In questo modo se non è presente il Calibri verrà impiegato il Verdana che è abbastanza simile ed è presente su un maggiore numero di computer. Se non presente il Verdana allora verrà impiegato l’Arial, e così via.
Ho creato una pagina di esempio così che possiate verificare il risultato.
Ma quali sono i font presenti su tutti (o quasi tutti i computer)?
Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS e Verdana sono ormai presenti su quasi tutti i PC e Mac. Inoltre alcuni font come il Tahoma hanno un equivalente su Mac pratiamente identico (il Geneva) per cui indicando font-family:Tahoma, Geneva, sans-serif; siamo certi di ottenere risultati quasi identici su tutti i computer.
E il sans-serif sempre presente? È il font più generico che c’è. Indichiamo infatti la famiglia del font in modo che il browser, in totale assenza di font tra quelli precedentemente indicati, non applichi un Times New Roman (completamente differente) la dove volevamo un Calibri. Le famiglie di font sono sans-serif (caratteri senza-grazie), serif (caratteri con grazie) e monospace (caratteri monospazio).
Ricordate infine che i font, a parità di dimensione espressa nel foglio di stile, possono risultare più o meno grandi. Ad esempio un font Calibri di 12 px risulta più piccolo di un font Verdana di 12 px. Per cui, in caso di sostituzione del font sulla pagina dell’utente, la pagina potrebbe risultare differentemente impaginata da come la vedete voi.
