Cerca:

16/11/2010

La scelta dei caratteri per il sito web

I tipi di caratteri più giusti per i siti web, la dimensione, le famiglie di font web safe, la scelta tra graziati o senza grazie, la formattazione dei link, le linee guida per scegliere il carattere più adatto per il proprio sito e per formattarlo correttamente (post originale del 11/11/2009).

La scelta del carattere giusto per un sito web è argomento tutt'altro che banale e influenza in modo netto sia la sua usabilità che l'impatto emotivo del suo layout grafico.

Innanzitutto partiamo da una considerazione tecnica. Per qualsiasi interfaccia visualizzata su computer sarebbe meglio utilizzare caratteri cosiddetti web safe (sono chiamati così perchè installati di default  praticamente su tutti i computer del mondo).

Scegliendo un carattere appartenente a una di queste famiglie potremo essere ragionevolmente sicuri che il nostro lettore non vedrà testi scritti con caratteri molto diversi da quello che abbiamo selezionato per lui.

Le famiglie di caratteri web safe sono:

  • Arial
    Esempio di testo in Arial
  • Courier
    Esempio di testo in Courier
  • Georgia
    Esempio di testo in Georgia
  • Helvetica
    Esempio di testo in Helvetica
  • Tahoma
    Esempio di testo in Tahoma
  • Times New Roman
    Esempio di testo in Times New Roman
  • Verdana
    Esempio di testo in Verdana

Questa distinzione sta comunque gradualmente perdendo importanza, perchè il numero di caratteri installati di default nei sistemi di tutto il mondo continua a crescere. Inoltre ci sono vari modi per far visualizzare un certo carattere in un browser che non lo avesse già installato... Ma perchè complicarsi inutilmente la vita? 

Altra distinzione molto importante è tra i caratteri con grazie o senza grazie (serif o sans serif). Le grazie sono quei fregi posti alle estremità delle cuspidi delle lettere. Se guardiamo gli esempi sopra riportati vi accorgerete subito che l'arial, l'Helvetica, il Tahoma e il Verdana ne sono prive, mentre il Courier, il Georgia e il Times New Roman le hanno.

Generalmente per i testi non troppo lunghi (ad es.: i titoli, le voci di menù, ecc.), a rapido scorrimento (ad es.: le newsletter, i siti web o i cartelli stradali) o in condizioni di stress visivo (ad es.: nei monitor dei computer) risultano più leggibili caratteri senza grazie.

Invece nei testi piuttosto lunghi (ad es.: E-book o schede prodotto molto dettagliate), stampati su carta (ad es.: libri), molto piccoli o ben contrastati (scritte nere su fondo bianco) risultano più leggibili caratteri con le grazie.

Queste indicazioni vanno però prese come suggerimenti molto generali, perché dovrebbero essere sempre calate nell'interfaccia grafica che le contorna e variano molto a seconda del tipo di carattere prescelto.

A meno di casi molto particolari, non conviene comunque mai accostare più di 2-3 caratteri diversi in uno spazio ristretto, in quanto ciò genererebbe nel lettore un’impressione di confusione.

Altri aspetti molto importanti da valutare sono la lunghezza dei tratti ascendenti e discendenti (cioè delle parti delle lettere che sporgono in alto o in basso rispetto al corpo centrale (altezza della x minuscola) e la chiusura o apertura dei caratteri (un carattere è più chiuso, o meno aperto, quanto più i suoi contorni esterni assomigliano a una "o" - "O").

Più i caratteri sono aperti e i tratti ascendenti sono evidenti, più il testo risulta leggibile, in quanto ogni lettera offre all'occhio del lettore maggiori punti di riferimento nella lettura rapida.

Va infatti considerato che noi non leggiamo ogni lettera di ogni singola parola, ma le "riconosciamo" guardandone la parte superiore, l'inizio e la fine.

 

Nell’immagine sopra ci sono alcuni esempi che mettono in luce la discreta leggibilità mantenuta dalle parole a cui vengono sottratte le lettere centrali e la maggiore chiarezza delle stesse parole scritte con caratteri minuscoli (o con solo la prima lettera maiuscola), rispetto a quelle scritte tutte in maiuscolo. Ciò è dovuto al fatto che nella scrittura minuscola la variabilità di altezza e di forma delle lettere ne facilita notevolmente il riconoscimento

Nella terza frase viene evidenziato ancora più chiaramente come sia molto più difficile capire le parole senza avere come riferimento visivo la parte superiore delle lettere.

Da questo punto di vista va anche tenuto presente che l'uso intelligente dei grassetti per evidenziare i concetti fondamentali all'interno di una frase è un grandissimo aiuto alla "scansione rapida" di un testo (la modalità tipica in cui gli utenti “leggono” sul web). Vedi a tal proposito quanto affermato nell’articolo sul layout ideale per un sito web.

Una precisa gerarchia visiva dei testi serve a far si che gli utenti notino prima quello che vogliamo noi e poi leggano il più in profondità possibile tutto il resto.

A parità di font, si può ottenere un’efficace gerarchia usando la grandezza, il colore, lo stile (sottolineato, italico, ecc.), il peso (rapporto tra area inchiostrata e vuota, maggiore ad es. se il testo è in grassetto), il posizionamento (più in alto e a sinistra si trova il testo, maggiori sono le possibilità che venga notato) e il contrasto rispetto al contesto (tanto maggiore quanto più grande è l’area vuota che circonda il testo).

Altro aspetto fondamentale che coinvolge l'usabilità dei testi è la formattazione dei link. Gli utenti web sono abituati a identificare come cliccabili i testi colorati in blu e sottolineati, perchè tutti i browser identificano in questo modo i link a cui non sia stato dato un formato diverso da parte di chi ha realizzato il sito.

E' bene tenere presente questo fattore e non richiedere al lettore (magari già provato dai concetti che esprimiamo) un extra sforzo per capire dove può cliccare. Ma soprattutto, una volta che si è identificato il format giusto per i link, usiamo sempre e solo quello in tutto il sito, senza formattare allo stesso modo testo che non è invece cliccabile.

Nei link di approfondimento troverai l'interessante e ben fatta pagina sui font di Wikipedia e la pagina con le guide alla scelta dei font giusti per il web di Fontshop (purtroppo tutte in inglese).

Se vuoi segnalare risorse utili collegate a questo tema o suggerire modifiche al testo puoi farlo commentando questo post. Sei assolutamente benvenuto.


Autore: Gianpaolo Lorusso

Il tuo voto sta per essere inserito
Giudizio: 4.1 su 5. 9 voti.
scelta-caratteri-sito-web.pdf560 K
stampa l'aggiornamento
Non ci sono commenti

Commenta

* - campo obbligatorio

*





*
*
rights.jpg, 3 kB space.gif, 0 kB