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:
h1 {font-family: 'Egyptienne F', Cambria, Georgia, serif}
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.
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.
Per esempio, potreste decidere che i vostri titoli dovrebbero essere visualizzati con il sempre più disponibile font Clarendon. Si tratta di un font serif. A livello dei sistemi operativi il più simile è forse il Georgia. Adobe CS2 fornisce Century Old Style che ha uno stile molto simile. Century Schoolbook è anche somigliante, ed è installato con tutte le versioni di Office. In base a quanto detto la vostra collezione di font diventa:
font-family: 'Clarendon Std', 'Century Old Style Std', 'Century Schoolbook', Georgia, serif
Nell'immagine qui sopra il suffisso 'Std' indica un file standard di tipo OpenType, che di norma sarà la scelta da fare per font un po' particolari.
Non sto suggerendo che il processo di scelta di un font sia facile. Intanto nella matrice sono presenti quasi duecento font. Imparare come rende ciascun font può essere complicato e far sprecare molto tempo (si tenga pure presente che se non avete tutti i font installati sul vostro PC dovrete spesso affidarvi a Google per un'anteprima).
Inoltre, non è tutto così semplice come scegliere font che siano quasi simili nell'aspetto o che abbiano background tipografici correlati. I font dovrebbero essere simili anche nelle metriche. Ciò è specialmente vero rispetto alla x-height, cosa che dà un'indicazione di come piccolo o grande appare un certo font.
A voi la scelta
Il punto principale in tutto questo discorso è che ci sono in generale e potenzialmente molti più font da considerare di quanto si pensi. Così ragionate un po' (con misura e gusto) e date un po' di varietà ai vostri siti. Se riuscirete a creare qualche nuova collezione di font con questo approccio, fatelo sapere nei vostri blog. Magari un giorno potremmo riunirle tutte in un unico posto.
Appendice
E su Linux?
Gli unici sistemi operativi considerati nella matrice sono quelli di Microsoft e Apple. Per completezza dovrebbero essere inclusi anche i sistemi Linux, sebbene presentino una grande varietà, siano tanti e siano una minoranza. Li ho omessi per il momento. C'è da dire che alcune distribuzioni offrono installati i Core Fonts di Microsoft. Altri usano la famiglia Vera, altri la famiglia Liberation che comprende font simili metricamente a Times New Roman e Arial.
Fonti
Le fonti per le informazioni sui font nella matrice sono le seguenti:
- Windows XP SP2
- Windows Vista
- Office 2003
- Office 2007
- Mac OSX Tiger
- Mac OSX Leopard (scroll down two thirds)
- Office 2004 (Mac)
- Office 2008 (Mac) che introdurrà anche i ClearType fonts di Vista
- Creative Suite 2
- Creative Suite 3
Nota sull'autore
Richard Rutter è Direttore Produttivo presso l'agenzia di consulenza di web design Clearleft. Scrive, in genere sul sito Clagnut, di accessibilità, web standards e mountain bike. Richard è l'animatore di un progetto dedicato alla tipografia per il web, The Elements of Typographic Style Applied to the Web.
