7 tipici errori tipografici nel web design

Ti è mai capitato di entrare in un sito web e fare fatica a leggere il contenuto? Oppure avere una sensazione come di “qualcosa che non funziona” senza riuscire a capire come mai?

Il motivo, spesso, è un cattivo utilizzo della tipografia su quei siti.

Io sono Lorenzo Miglietta, designer e creatore di Grafigata.com e sono un esperto (e super appassionato) di tipografia, tanto da aver creato anche un corso per conoscerne i segreti come Font-Ninja.

In questo articolo ti vado a spiegare i 7 errori tipografici più comuni che si vedono sui siti web!

Di questo articolo c’è anche la versione a video. Eccola qua! Direttamente dal mio canale di YouTube

I 7 errori tipografici più comuni nei siti web

La maggior parte dei siti web in circolazione è realizzata da persone con scarse conoscenze tipografiche. E non c’è niente di male, certo, però questo porta spesso a vedere tutta una serie di errori che sono assolutamente evitabili.

In pratica, questi errori sono tutti degli elementi che, su un sito web, ne vanno a diminuire l’usabilità.

Pensa che anche siti e portali da milioni di visitatori quotidiani, come Wikipedia, commettono proprio questi errori di cui ti vado a parlare!

Sei pronto? cominciamo.

1. La colonna di testo troppo larga

Hai mai notato che il 99% dei libri esistenti ha una disposizione della colonna di testo generalmente sempre uguale? E cioè con proporzioni ben precise tra larghezza e altezza?

Questo succede perché centinaia di anni di storia dell’editoria ci hanno insegnato che ci sono larghezze del testo che sono più o meno ottimali. Più o meno agevoli da leggere.

Una colonna di testo troppo larga è difficile da leggere (così come una colonna troppo stretta, ma online si vede raramente).

Se il paragrafo che hai appena letto, ad esempio, fosse stato scritto su una riga sola, probabilmente avresti perso il filo del discorso prima della metà.

Un esempio di questo tipo di errore viene proprio (quasi paradossalmente) da uno dei siti web più visitati al mondo: Wikipedia.

Le colonne di testo su Wikipedia, soprattutto quando lette con un monitor molto largo, come un 4k, sono decisamente troppo larghe e affaticano inutilmente gli occhi e la mente del lettore.

Perché quando le righe sono di una lunghezza corretta, il percorso che fanno i nostri occhi per andare dalla fine di una riga all’inizio di quella successiva non è complesso.

Se invece la riga è troppo lunga è difficile andare a recuperare l’inizio di quella dopo.

Le regole di leggibilità che valgono per i libri, valgono ovviamente anche sul web. Cerca sempre quindi di impostare una buona larghezza alla colonna di testo.

Quale larghezza della colonna di testo scegliere?

Riassumendo, dipende dal numero di colonne:

• Colonna di testo inserita in una griglia con altre colonne di testo (quindi più di una colonna): circa 7-8 parole per singola colonna;
• Colonna di testo unica (come per i libri o per i blog come questo): circa 50-75 caratteri.

2. Il cattivo utilizzo di grassetto e corsivo

Il grassetto, inutile dirlo, serve per evidenziare un concetto-chiave e per fare in modo che il lettore si focalizzi immediatamente su una serie di cose che stai cercando di comunicargli.

Nel momento stesso in cui tu decidi di scrivere un intero paragrafo in grassetto, stai vanificando la ragion d’essere stessa del grassetto.

Un paragrafo scritto interamente in grassetto e uno del tutto privo di grassetto, sono esattamente la stessa cosa agli occhi di chi legge, dato che evidenziare tutto o non evidenziare nulla sono azioni equivalenti.

Vedi la differenza tra questi due paragrafi? Quale dei due ti sembra più leggibile? :)

Come usare grassetto e corsivo nei testi

Il grassetto andrebbe riferito solo a espressioni o parole che devono risaltare nel testo, mentre il corsivo si dovrebbe utilizzare per frasi fatte, citazioni, discorsi, espressioni scientifiche o termini stranieri.

Un giorno scriverò un articolo in cui ti spiegherò nel dettaglio quando usare il grassetto e quando usare il corsivo, ma qui il punto della questione è un altro e riguarda il loro abuso sistematico.

Esattamente come non disegneresti mai un cuore rosso su uno sfondo rosso (almeno spero), non evidenziare parole o espressioni all’interno di frasi o paragrafi già evidenziati, perché, altrimenti, nessuno le noterà mai.

3. Il cattivo utilizzo del maiuscolo

Il terzo errore tipografico più comune sul web è un po’ una sorta di variante del precedente.

Anche il MAIUSCOLO, come il corsivo e il grassetto, possiede una precisa funzione e non è una semplice decorazione!

Il maiuscolo va usato solamente in casi particolari, come per titoli o sottotitoli.

Se invece SCRIVI TUTTO UN TESTO IN MAIUSCOLO… beh, questo equivale ad urlare.

Questo perché il maiuscolo è più faticoso da leggere del minuscolo proprio per via delle forme ben separate e staccate tra una lettera e l’altra.

Quindi scrivere un intero testo o anche solo un intero paragrafo in maiuscolo equivale a renderlo meno leggibile.

Come detto prima, il carattere maiuscolo andrebbe riservato solo a titoli o sottotitoli e, anche in quel caso, solo se non ne puoi fare davvero a meno.

4. Lo scarso contrasto visivo tra testo e sfondo

Una cosa che vedo spesso è lo scarso contrasto visivo tra il testo e lo sfondo.

Negli ultimi anni si è diffusa quella che mi piace definire come la “moda del web grigino“: numerosi siti Web hanno iniziato a inserire testi grigi scuri su sfondi grigi chiari. O testi grigi chiari su sfondi bianchi!

Causando quindi una diminuzione del contrasto e, quindi, della leggibilità.

Ma per garantire un’adeguata leggibilità, le parole devono risaltare alla vista, essere, appunto, leggibili, definite e perfettamente contornate.

Se mi interessa un’informazione, la voglio leggere in modo chiaro e pulito: è il testo che deve armonizzare con l’occhio umano, non il contrario!

Non cercare dunque di emulare il sito della Apple, che è stato tra i brand a dare il via a questa “moda”, ma tieni presenti le basilari leggi ottiche che regolano il contrasto tra testo e sfondo.

Più precisamente, il contrasto minimo, per garantire la leggibilità dovrebbe essere uguale o superiore ad un rapporto di 4,5/1, sotto il quale, il testo diventa sempre più illeggibile al diminuire del rapporto.

5. Colore di sfondo troppo acceso

Cosa ci può essere di peggio al mondo di un testo scritto in totale assenza di contrasto?

Semplice: uno sfondo colorato, soprattutto se molto acceso o troppo saturato.

Dato che i siti e le pagine con sfondo fucsia esistono davvero, non solo nelle leggende metropolitane, prima di farti venire un’idea del genere, guarda bene l’effetto finale e inorridisci a dovere.

Cattivo gusto a parte, avrai senz’altro notato che molti siti web fanno comparire dei messaggi d’errore di sistema utilizzando un pop-up di colore rosso con testo bianco.

Ti ho spiegato una volta (vedi il mio articolo “Come scegliere il colore di un logo”) come tutti i colori che utilizziamo facciano leva su una determinata componente psicologica per trasmettere un messaggio.

I cartelli stradali che si riferiscono ad un pericolo sono di colore rosso, perché associamo il rosso alle emozioni forti e dunque, siamo più portati a fermarci o a prestare attenzione di fronte al segnale di Stop.

Tutto questo, però, non significa che ogni cosa deve essere di colore rosso! È molto meglio cercare di ottimizzare la grafica di un messaggio d’errore di questo tipo inserendo la “giusta quantità” di rosso. Così:

6. Un eccessivo utilizzo dell’allineamento centrato

Nel mondo occidentale noi scriviamo e leggiamo scorrendo da sinistra a destra. I testi scritti, dunque, devono rispettare il naturale fluire dello sguardo e devono essere allineati in questo modo.

Ecco perché i testi dovrebbero quasi sempre essere allineati a bandiera a sinistra o giustificati a sinistra. E solo in rari casi utilizzare diversi allineamenti (a destra, centrati, ecc).

Cercare di essere originali a tutti i costi ed allineare il testo in modo centrato, non rende il tuo lavoro più creativo, ma semplicemente, beh, noioso.

Ma dunque, Lorenzo, devo rimuovere l’allineamento centrato e dimenticarmene per il resto dei miei giorni?

No, anche qui, il buon senso stabilisce il confine tra l’uso e l’abuso.

Un titolo allineato centralmente può avere il suo perché, a seconda dell’effetto che stai cercando di ottenere; una citazione o un estratto da un’intervista, anche; interi paragrafi no!

Allineare centralmente interi paragrafi di testo non ha semplicemente senso, perché, ancora una volta, se ne riduce la leggibilità, di quel paragrafo.

L’allineamento centrato può essere utile per estrapolare parti di discorso, per richiamare l’attenzione su un breve aforisma, non sicuramente per convincere il lettore che il contenuto di interi paragrafi debba occupare un posto centrale nella sua mente.

Ripeto: Nel dubbio, scegli sempre di allineare un testo “a bandiera” a sinistra o in modo “giustificato”, sempre a sinistra e andrai sul sicuro!

7. L’interlinea troppo sottile o troppo grande

Eccoci dunque all’ultimo dei nostri 7 errori tipografici che si vedono (troppo spesso) sul web: l’interlinea troppo sottile o troppo grande.

Se ti stai chiedendo cosa sia un’interlinea in un testo, facciamo subito un piccolo passo indietro.

L’interlinea, in un testo, non è altro che l’altezza della riga di testo e quindi la gestione dello spazio tra le righe di testo.

Svolge un po’ la stessa funzione delle righe dei quaderni che si usavano alle elementari. C’erano quelli con le righe giganti e quelli con le righe piccole.

L’interlinea, essendo modificabile sia su un sito web tramite CSS sia su un qualsiasi programma che gestisce un testo, può essere più o meno grande.

E bisogna quindi impostarla nel modo giusto.

L’interlinea troppo sottile tende infatti a ravvicinare le righe di testo tra loro in modo troppo marcato, mentre quella troppo grande, rischia di disperdere le parti di testo e di offrire alla mente uno stacco ingiustificato tra le varie righe dei paragrafi.

Per ottenere un testo equilibrato ed armonico, occorre dunque impostare l’interlinea tra il 120% e il 145% dell’altezza del corpo del testo.

Cioè, se il tuo testo ha un’altezza ipotetica di 10pt, l’interlinea ottimale è compresa tra i 12pt e i 14 pt, come accade in default in quasi tutti i software dedicati all’impaginazione.

Questa è una regola generale che non tiene conto delle differenze tra i vari font e caratteri tipografici impiegati, ma in linea di massima, è una regola che ti garantisce sempre di metterti al riparo da errori banali, per eccesso o per difetto.

Errore bonus: una cattiva scelta del font

Uno degli errori più diffusi, oltre quelli citati finora, è quello di una cattiva scelta del carattere tipografico.

Per fortuna qui su Grafigata ho scritto il più grande articolo che tu possa trovare sulla scelta di un font. C’è anche la versione video:

Conclusione

Spero di averti chiarito le idee sui 7 errori più comuni che vengono commessi sul web in ambito tipografico e sul loro effetto reale.

Il fatto che numerosi siti di successo commettano questi errori, non autorizza tutti gli aspiranti graphic designer a replicarli, dato che i suddetti errori potrebbero essere frutto tanto di una strategia ben precisa (come nel caso di Apple) o di noncuranza (come nel caso di Wikipedia).

Non essendo noi chiamati a lavorare per nessuno dei due immensi portali, conviene dunque seguire le regole ed evitare di dare vita a testi che potrebbero interferire in modo molto negativo sulla leggibilità del nostro sito e dunque sulla sua resa finale.

In ogni caso, quelli che ho appena passato in rassegna sono solo alcuni tra gli errori che vengono commessi da molti graphic designer in ambito tipografico.

Se vuoi imparare a conoscere tutti i segreti del mondo della tipografia, ti consiglio il mio mini-corso Font-Ninja, dove potrai trovare linee guida, consigli e segreti sul mondo dei font.

Dalla cura delle scelte tipografiche, dipende infatti la buona riuscita di un progetto, per cui, non trascurare una versante del graphic design che ti verrà in aiuto in tutti i tuoi lavori.

A presto!

Lorenzo