CSS  »  Articoli  »  Accessibilità e CSS 

Questa è la traduzione dell'articolo Increase Your Font Stacks With Font Matrix di Richard Rutter pubblicato originariamente su 24 Ways il 17 dicembre 2007.

Le pagine web realizzate con HTML e CSS vengono visualizzate facendo ricorso solo ai font installati sui computer degli utenti (a meno di non prendere in considerazione l'implementazione della proprietà @font-face). Per ottenere ciò i CSS usano la proprietà font-family per specificare i font in ordine di preferenza (si parla spesso al riguardo di collezioni di font).

Per esempio:

In questa regola, i titoli saranno mostrati con il font Egyptienne F. Se Egyptienne F non è disponibile allora verrà utilizzato Cambria; se nemmno questo font è disponibile la soluzione estrema sarà quella di usare Georgia oppure il font serif di default. Questo piccolo pezzettino di codice CSS diverrà molto familiare tra i lettori di 24 Ways.

Si ritiene anche comunemente che gli unici font su cui possiamo contare per il fatto che sono installati tutti sui computer degli utenti sono i cosiddetti core web fonts: Arial, Times New Roman, Verdana, Georgia, etc. Ma è veramente così?

Se date un'occhiata alla cartella dei font che è sul vostro computer, anche quello della vostra mamma, molto probabilmente ci troverete una bella manciata di altri font oltre a quelli cui si accennava qui sopra. Per esempio, Office 2003 installa oltre 100 font addizionali. A dire il vero non tutti sono particolarmente rifiniti e validi per essere usati sul web. Ad ogni modo, aumentano il campo delle opzioni disponibili.

La matrice

Ho messo insieme una matrice di font occidentali che mostra quali sono installati sui sistemi operativi Mac e Windows, quali sono installati con le varie versioni di Office, quali sono installati con la Creative Suite di Adobe.

Figura 1 - Anteprima della matrice

La matrice è disponibile per il download come documento Excel o in formato CSV. Non ci sono statistiche già disponibili rispetto alla penetrazione di Office o della Creative Suite, ma senz'altro si può fare una discreta stima approssimativa basata sulla conoscenza della propria audience.

L'idea della matrice è che si può usare come base per costruire la vostra collezione di font. Prima di tutto scegliete il font con cui vi piacerebbe davvero visualizzare il vostro testo. Questo font non deve essere necessariamente presente nella matrice. Quindi scegliete la famiglia di font generica (serif, sans-serif, cursive, fantasy o monospace) e un font per ciascun sistema operativo. Quindi selezionate un font dalle liste relative a Office e alla Creative Suite di Adobe.

Altri articoli

Altre guide

Altre newsletter