Quale carattere utilizzare per un sito web?

Oggi vi proponiamo qualche regola e qualche consiglio pratico per fare in modo che il contenuto testuale del vostro sito web risulti piacevole anche alla lettura.

Innanzitutto l’impaginazione del testo in un sito non è facile. L’armonia tra parti scritte e grafica è da non sottovalutare. Il tipo di font che si utilizza e la sua caratterizzazione sono altrettanto funzionali alla resa generale del sito quanto lo è l’impostazione grafica.

Quale carattere utilizzare per un sito web?

Il formato del testo nel Web

Se in una rivista, in un quotidiano o in un libro, la scelta del carattere ha un’importanza grafica, stilistica e funzionale, a maggior ragione questo accadrà in una pagina Web. La lettura veloce a video è molto più difficoltosa di una lettura su carta, sia per la luminosità del video, sia per il tempo d’attesa davanti ad un monitor. Non è un caso, quindi, che un testo, pensato per la carta e riportato a video, debba necessariamente subire modifiche, tagli, trattamenti nella strutturazione e visualizzazione dei concetti fondamentali.

L’attenzione dello sguardo sulla pagina non è continua come nel caso della lettura su carta. L’occhio fa una scansione visiva della pagina nella sua interezza, cogliendo qua e là elementi importanti su cui soffermarsi: paragrafi, parole in grassetto, elenchi puntati, simboli.

In questo contesto la scelta del carattere ha un valore fondamentale sia per l’individuazione del contenuto principale e della rilevanza con quello che si sta cercando, sia in termini di leggibilità.

Non è un caso, quindi, che ci siano font nati espressamente con il fine di essere letti a video, che sono poi quelli che troviamo con più frequenza all’interno delle pagine Web.

Testo, Colori e Sfondo

Un altro fatto da non trascurare è la resa visiva e cromatica del testo su una pagina. Un blocco di parole troppo fitto, una dimensione del carattere troppo piccola, un testo tutto in grassetto, demoralizzano subito il lettore che ha poco tempo e si stufa in fretta e magari sa che può trovare altri contenuti di suo interesse altrove, impaginati meglio e disposti in maniera più fluida.

E’ provato che il testo di colore scuro, meglio nero, su fondo chiaro sia il più leggibile in assoluto. Più in generale, deve esserci un netto contrasto tra parole e sfondo: qui la regola del tono su tono non funziona per niente.

Il tipo di carattere

Un Web designer che sceglie un font per il testo del proprio sito ha, in teoria, a disposizione un’infinità di tipi di carattere da utilizzare per rendere al meglio l’equilibrio grafico. La scelta, però, è subordinata a due fattori fondamentali:

• leggibilità del font utilizzato;
• compatibilità del carattere con i font installati sul computer del navigatore.

Per ovviare al secondo punto e utilizzare caratteri che seguino l’assetto grafico del sito, si ricorre al testo in grafica. Vale a dire che, spesso, si sceglie di riportare parti testuali in formato immagine (testi scritti con un programma di grafica e salvati ad esempio in un file gif o in jpg). Lo stesso discorso vale quando si realizzano interi siti in Flash. In questi casi si ha piena libertà grafica e di rappresentazione del testo, ma non bisogna mai dimenticare il requisito della leggibilità.

Altri due requisiti importanti per le pagine web sono:

• l’indicizzazione delle singole pagine;
• la facilità di effettuare aggiornamenti.

Se vogliamo che il contenuto del sito sia indicizzato nei motori di ricerca e, quindi, raggiunto da un numero sempre maggiore di utenti, dobbiamo riportarlo in forma testuale.

Per quanto riguarda gli aggiornamenti, invece, dobbiamo fare in modo di avere la possibilità di modificare il testo con rapidità e semplicità. Proprio per tenere sempre conto di queste esigenze, è consigliabile ridurre al minimo il testo in grafica utilizzando le immagini per scritte particolari come pay-off o titoli.

Con l’avvento e la diffusione di internet sono stati creati, appositamente, nuovi tipi di carattere ideali per la lettura a video. Prendiamo in considerazione i due più diffusi e famosi: il Verdana e il Georgia.

• Verdana: è il migliore font da utilizzare nel Web. I caratteri sono ben distanziati, proporzionati e leggibili anche a grandezze piuttosto piccole. Il neretto è sempre molto visibile e i caratteri simili sono ben differenziati. Il tipo di carattere fu rilasciato nel 1996 dal gruppo tipografico di Microsoft e il nome si rifà al termine “verdant” che indica un’area verde, come quella di Seattle.
• Georgia: E’ l’evoluzione del Times New Roman. Nasce per essere letto a video e la sua forma dà maggiore eleganza e leggerezza alle lettere. Il rilascio del font è datato 1993 ed è sempre a cura di Microsoft. Il nome deriva dallo Stato americano.

Nella realizzazione di pagine Web non si utilizza mai un solo tipo carattere. In generale si attribuisce al testo una famiglia di caratteri. Una volta si utilizzava il vecchio tag font face: in questo modo si potevano attribuire al testo dei gruppi “standard” personalizzati di caratteri. Ad esempio:

<font face=Verdana, Arial, Helvetica, sans-serif>

così facendo, un utente che non avesse installato sul proprio pc il Verdana (cosa improbabile) avrebbe visualizzato il testo con l’Arial e così via.

L’arrivo dei CSS

La vera rivoluzione nella gestione e formattazione del testo è stata apportata con l’introduzione dei CSS (fogli di stile), oggi utilizzati non solo per il testo, ma soprattutto per impostare il layout dei siti Web.

Nelle “famiglie” i tipi di carattere possono essere indicati tramite due specifiche:

• family-name: il nome dei caratteri da utilizzare. Se il nome ha spazi, come ad esempio “Times New Roman”, dovrà essere riportato tra virgolette.
• generic-name: Indica la tipologia del font, in particolare:

1. serif: carattere con grazie;
2. sans-serif: carattere senza grazie;
3. cursive: carattere tipo handwriting, che imita la scrittura a mano;
4. fantasy: carattere decorativo;
5. monospace: carattere monospaziato, con larghezza fissa.

Il tag relativo al tipo di carattere si presenta in questo modo:

(font-family: Verdana, Arial, Helvetica, sans-serif)

Le famiglie che troviamo di default, ad esempio in Dreamweaver sono le più utilizzate, ma se ne possono creare o personalizzare di nuove, basandosi su altri tipi di carattere.

Gli attributi del testo

Per completare l’argomento font facciamo un cenno agli altri attributi. Font-size, ad esempio, indica la dimensione del font. Generalmente è espressa in pixel, ma può essere assegnato un valore anche in altre unità di misura, valori assoluti o percentuali.

Le specifiche che indicano il font-style, il font weight, il fontvariant e il text-transform indicano tutti gli attributi relativi all’italico, al bold, alle maiuscole e alle minuscole. E’ possibile anche indicare colore e decorazione.

La grande innovazione apportata dai fogli di stile riguarda, anche, la possibilità di gestire l’interlinea, i margini, la distanza tra le lettere, la spaziatura da un box o la possibilità di creare elenchi puntati personalizzati proprio come un editor di testo.

E’ così che le pagine Web sono diventate più sofisticate nella visualizzazione di testi scritti e accurate nell’impaginazione grafica generale.

Il valore emotivo e quello emozionale

I caratteri comunicano: quelli più lineari e professionali come l’Avant Garde, il Futura, l’Helvetica, gli “handwriting” come Mistral, Lucida handwriting indicano confidenza e pacatezza, mentre quelli più giocosi (Comic Sans, Comic Strip) evocano un mondo allegro e fanno riferimento ai fumetti.

La scelta del font è, quindi, diretta conseguenza di quello che si vuole comunicare e del tipo di comunicazione che si vuole instaurare.