Le Guide de “La Fabbrica del Web”

www.lafabbricadelweb.it

I font, piccoli ma importanti per un sito Web

© 2009 Luca Boldori. Tutti i diritti riservati.

I font, piccoli ma importanti per un sito Web

Il termine font deriva dal francese medioevale fonte ovvero: "qualcosa che è stato fuso", in
riferimento ai caratteri prodotti per la tipografia, stampando il metallo fuso, consiste di una
serie di glifi (immagini) rappresentanti i caratteri appartenenti ad un particolare set di
lettere in un design particolare

Scrivendo al computer, in genere non si bada molto al font utilizzato, spesso non lo si
sceglie, ma si lascia quello predefinito.

Dietro la progettazione di un font ci sono moltissime ore di lavoro, di studi di grafica, di

estetica, di leggibilità, ecc.
I caratteri maggiormente utilizzati nella composizione tipografica sono frutto di secoli di
ricerca empirica, ma anche sperimentale, hanno raggiunto senza dubbio un elevato livello
di qualità grafica e percettiva.
L'arte di disegnare i font, prende il nome di type design, chi se ne occupa è il type
designer.

In tipografia, un font consiste in un set coordinato di caratteri. Generalmente lettere ,

numeri e segni di punteggiatura.

Caratteristiche principali di un carattere

• Corpo
La grandezza di un carattere viene misurata in punti e viene chiamata corpo.
• Peso
E' il rapporto tra l' area inchiostrata e l'area in bianco della serie di caratteri.
• Grazie
I tipi di carattere si possono suddividere in due principali categorie: con o senza
grazie (note anche con l'inglese serif). I caratteri graziati hanno delle particolari
terminazioni alla fine dei tratti delle lettere.
• Occhio
Parte dei caratteri a forma chiusa vuota all'interno.
• Proporzionalità

-1-
I font, piccoli ma importanti per un sito Web

Un carattere tipografico che mostri glifi di larghezza variabile è detto proporzionale,

mentre un carattere tipografico che possiede glifi con larghezza fissa è detto non
proporzionale o monospace, ad esempio nei caratteri proporzionali la "w" e la "m"
sono della stessa larghezza mentre la "i" è più stretta.
I caratteri proporzionali sono generalmente considerati più attraenti e leggibili sono
quindi i più comunemente usati nel materiale stampato professionalmente.

Famiglie di font usate sul web

• Times New Roman non è così new, fu inventato nel 1931 e usato nel 32 proprio
dalla rivista Times.
• Verdana invece risale al 1996, creato per la Microsoft da Virginia Howlett, per il
nome scelse di unire le parole verdant e ana. La prima indica qualcosa di verde, e
ana il nome della figlia.
• Arial è uno dei pochi font presente in tutte le piattaforme informatiche esistenti.
Creato nel 1982, con il Times New Roman, è il più usato in assoluto per i
documenti di qualsiasi genere.
• Courier progettato per assomigliare a quelli delle macchine da scrivere, Fu creato
da Howard Kettler nel 1955. Il design del Courier New fu usato negli anni 50
dall'IBM nelle proprie macchine da scrivere.
• Georgia è un serif transitional progettato nel 1993 da Matthew Carter per Microsoft
Corporation, per essere leggibile su un monitor anche di piccole dimensioni
• Trebuchet MS è un sans-serif tipografico progettato nel 1996 da Vincent Connare
per Microsoft
• Helvetica è il nome di un carattere tipografico creato nel 1957 da un'idea di Max
Miedinger per la fonderia svizzera Haas

Questi sono i caratteri sempre presenti in un computer. Scegliere un font diverso da questi
potrebbe dare una non corretta visualizzazione della pagina da come è stata ideata.
A questa mancanza in parte si può ovviare sostituendo i testi con immagini contenenti le
diciture desiderate. Questa tecnica però deve essere limitata e usata unicamente su titoli

-2-
I font, piccoli ma importanti per un sito Web

o menu.

Aspetti tecnici da non sottovalutare

Sistemi di colori Additivi e Sottrattivi

Quando si guarda lo schermo del computer, è possibile vedere i colori e le forme
che sono costituiti da luce. I colori sono la combinazione di rosso, verde e blu
mescolati tra di loro in diverse intensità di miscele. Questa mescolanza prende il
nome di colore additivo.

Se si stampa questa pagina, i colori e le forme che si vedono sono composti da

pigmenti d'inchiostro. Questi colori sono percepiti dall'assorbimento e riflessione
della luce sulla loro superficie. Questo è noto come sistema cromatico sottrattivo.

Perché questo è così importante? Prendiamo in considerazione la più comune

combinazione di colori per il testo e lo sfondo: nero su bianco. In un sistema
cromatico sottrattivo (cioè di stampa), questa pratica si adatta perfettamente. Il
contrasto del nero su bianco dà una buona leggibilità e una lettura confortevole.
Con un sistema di colore additivo (cioè sullo schermo), il bianco è prodotto da una
miscela di rosso, verde e blu a piena intensità, per questo motivo la combinazione
può risultare troppo luminosa e pesante per gli occhi per consentirne la lettura sullo
schermo. La luce irradiata dallo schermo rispetto a quella riflessa sul foglio può
influenzare la chiarezza di ogni dettaglio.

Risoluzione dello schermo

Se avete stampato questo testo con una moderna stampante laser, è possibile che
abbiate utilizzato una risoluzione fino a 2400 dpi (punti per pollice), mentre sullo
schermo, al massimo avrete una risoluzione di 96 dpi. A differenza della stampa
non c'è modo di avere uguale chiarezza e dettaglio quando la visualizzazione è
sullo schermo. Questo è il fattore più di ogni altro, definisce i principi che sono alla
base delle raccomandazioni di una buona tipografia Web.

-3-
I font, piccoli ma importanti per un sito Web

La maggior parte di siti utilizza caratteri senza grazie, moderni quali Verdana o
Arial. E' opinione comune che a differenza della stampa, sullo schermo del
computer i caratteri senza grazie siano più leggibili per la minore risoluzione del
monitor.

Infatti, oltre gli aspetti psicologici e comunicativi, la scelta del font deve essere
sempre e comunque funzionale alla lettura. Il visitatore non deve far fatica a
leggere sulle pagine, ma far scivolare gli occhi di parola in parola, superando le
resistenze opposte dallo schermo.

Antialiasing
Detto antialiasing o allisciamento.
Per i tipi di caratteri definiti con tecniche vettoriali è possibile utilizzare alcuni
sistemi che permettono di sostituire, particolarmente sui bordi, i pixel totalmente
neri percepiti come profili seghettati con altri di gradazioni intermedie, al fine di
ottenere una soluzione percettivamente migliore.

Come scegliere un font?

Citando il guru americano Daniel Will-Harris, non esistono font belli o brutti, ma solo font
adatti. Quindi evitate di usare il Comic Sans, tipico dei fumetti, per un sito di notizie
finanziarie: nessuno vi prenderebbe sul serio!

Nel valutare la scelta di un font è molto importante la sua leggibilità, quindi bisogna
attenersi alle seguenti regole:

Peso
Quando parliamo di 'peso' facciamo riferimento ad un rapporto coerente tra i
caratteri stessi e alla luce della pagina che scorre intorno a loro. Se utilizziamo una
versione leggera, la lettura sarà probabilmente più faticosa e nessuno lo leggerà.

-4-
I font, piccoli ma importanti per un sito Web

Se utilizziamo una versione troppo pesante la distinzione di certe lettere è difficile.

Caratteri Senza Grazie: Verdana, Arial, Helvetica e similari.

Si adattano bene a gran parte degli utilizzi e, data la neutralità delle loro fattezze,
offrono una buona riuscita sia in bianco sia in nero, sia con qualsiasi cromia.
Possono essere usati in maiuscolo, minuscolo o maiuscoletto, offrendo un risultato
esteticamente apprezzabile e leggibile.
Sono molto sensibili alle mode, spesso una semplice differenza di angolo o di curva
li può identificare immediatamente nel kitsch o nell’eleganza. Un consiglio prendete
spunto dai prodotti pubblicizzati su larga scala.

Caratteri con Grazie: Times New Roman, Georgia, Trebuchet MS, Courier e
similari.
Hanno una connotazione specifica che richiama tutto ciò che è storico e di testate
giornalistiche. Per questo contesto visivo, mal sopportano una cromia differente dal
bianco e nero, soprattutto se appoggiano su di uno sfondo non monocromatico.
Particolarmente adatti a titoli di forte impatto, richiamano immediatamente uno stile
classico.
Se utilizzati con un bordo di colore diverso, molto spesso cadono nel ridicolo, da
evitare se non si è più che esperti, se proprio necessari devono essere
assolutamente sottili.

Attenzione alla disponibilità dei font sul computer del visitatore del sito

La scelta di un carattere è il punto di partenza del tipografo web, può influenzare le

sensazioni trasmesse dai contenuti di una pagina.
Il numero ristretto di caratteri offerti dal HTML soffre di una scarsità di opzioni quando si
tratta della scelta del carattere perché possono essere visualizzati dal computer del
visitatore solo se disponibili. Il primo compito del tipografo Web, è distinguere i caratteri
facilmente disponibili, e capire quali sono i più adatti alla sua specifica esigenza.

-5-
I font, piccoli ma importanti per un sito Web

Luca Boldori esperto in informatica applicata al mondo di internet è nato a Milano nel 1976. Ha
mosso i primi passi nel mondo dell'informatica come hobby durante il periodo della scuola
superiore, dove ha avuto modo di iniziare a conoscerne i fondamenti e un po' di programmazione.

Nel 1996 arriva III° in un concorso nazionale scolastico di Disegno CAD e programmazione per
macchine a controllo numerico

Nel 1998 inizia il suo iter lavorativo collaborando presso il Sole 24 Ore come programmatore VB.
In questo periodo ha modo di conoscere alcuni addetti ai lavori nell'ambito di internet e di rimanere
affascinato da questo nuovo mondo.

Dal 1998 al 2000 inizia una serie di collaborazione con piccole medie imprese che gli permettono
di venire a contatto con molte realtà aziendali delle zone Milano e Brianza. Sempre in questo
periodo incomincia a conoscere il mondo dell'opensource dove scopre Linux Apache PHP e
MySQL che diventeranno il suo cavallo di battaglia.

Nel 2000 riprende una nuova collaborazione con il Sole 24 Ore dove può consolidare le sue
conoscenze nel mondo di internet e di programmazione orientata al web. Parallelamente a questa
incomincia a realizzare siti e applicazioni web per aziende medio piccole con tecnologie Open
source .

Sito internet: www.lafabbricadelweb.it

Blog: lafabbricadelweb.blogspot.com

-6-