8 errori di tipografia da evitare per la leggibilità

Ci sono tanti errori tipografici da evitare quando decidi di migliorare i tuoi testi online. Il più noto? Sicuramente il refuso, ma nel mondo del web writing le combinazioni sono sempre diverse.

Gli errori di tipografia sono sempre in agguato quando devi valutare la bontà dei testi online. Questo perché spesso si catalogano questo tipo di elementi come tipici della carta stampata, dei giornali o dei libri. Ma cosa sono gli errori di tipografia?

errori di tipografia
Quali sono gli errori da evitare?

Il mancato rispetto delle regole che da sempre caratterizzano la stampa a caratteri mobili. E che il web ha raccolto e importato nella progettazione di un sito web.

Quando decidi quale font utilizzare metti in pratica le stesse conoscenze che riguardano una pagina pubblicitaria o un libro. Quindi, quali sono gli errori tipografici da evitare se creiamo un blog, un landing page o una pagina web?

Formattazione usata senza criterio

Il grassetto e il corsivo sono due elementi della formattazione di un testo che servono in determinate condizioni. Usare questi elementi per evidenziare interi blocchi di testo, ad esempio, è un errore da evitare.

Il neretto va inserito in una o due parole per blocco di testo, mentre il corsivo per evidenziare forestierismi o citazioni. Il resto diventa caos e confusione, un tipo errore di tipografia da evitare.

Spazio errato tra le lettere (tracking)

Altro errore di tipografia: c’è uno spazio non adeguato tra le parole. Con il tracking intendiamo proprio questo e aggiungo: devi assicurarti che ci si armonia e coerenza.

Non esiste un parametro definitivo perché il tracking deve essere valutato in base al tipo di font e lettera, ma anche in relazione con il leading e il kerning. Ovvero?

  • Kerning (crenatura): spazio tra due lettere.
  • Tracking: spazio tra due parole.
  • Leading (piombatura): spazio tra due righe.

Ipotizzando la distanza ideale come una unità, per ottimizzare il tracking devi valutare lo spazio tra due lettere dritte (ad esempio la i o la l) con valore uno.

Poi la divergenza tra le lettere diritte e quelle rotonde è leggermente inferiore alla singola unità e la distanza tra due lettere rotonde ancora meno ma di poco.

Per approfondire: quanto deve essere lungo un articolo?

Errori di tipografia: interlinea (leading)

L’interlinea è lo spazio tra due righe. Se esageri con questo parametro trovi due linee separate e difficili da leggere. Se lo riduci troppo il risultato è simile.

Ma a causa di parole troppo vicine verticalmente. L’interlinea si definisce con il CSS attraverso la proprietà line-height. Sul web una buona misura oscilla tra 1.3 e 1.5 di interlinea. Aumentare o diminuire, spesso, vuol dire peggiorare la leggibilità del testo.

Da valutare anche l’interlinea tra i paragrafi (che deve essere superiore a quella tra le righe) e quella che viene inserita tra un titolo e il testo. Questo per evitare l’effetto di headline galleggiante: bisogna capire a quale blocco è legata.

Testo giustificato e non a bandiera

Sì, è un errore. Se il testo è impostato con un allineamento a bandiera, lo spazio tra le parole rimane fisso e aumenta la leggibilità. Se è giustificato, invece, lo spazio deve essere elastico. Questo provoca, in alcuni casi, un problema per gli occhi.

Come allineare un testo?

Soprattutto su grandi quantità di testo. Questo aiuta a tenere sotto controllo il tracking, ovvero lo spazio uniforme tra ogni singola parola nella riga. Meglio allineamento a sinistra o giustificato? Senza dubbio la prima opzione.

Dimensione del font testo inadeguata

Quanto deve essere grande il carattere sul web? Le misure influiscono: per il body copy la dimensione ideale è 16 pixel con una preferenza dedicata al sans serif.

I vari H1, H2 e H3 devono adeguarsi e rispettare la gerarchia in modo da aumentare e diminuire il font in base all’importanza del titolo. Le regole da rispettare:

  • Mai usare gli header per aumentare la dimensione del font.
  • Gli header hanno sempre una dimensione superiore al body copy.
  • L’H1 ha la dimensione maggiore e poi a seguire gli altri header.

I font senza grazie che sono più leggibili anche se ci sono sfumature ed eccezioni. Se vuoi approfondire puoi dare uno sguardo a questo studio della IBM che suggerisce un punto: con caratteri serif di dimensioni inferiori abbiamo una lettura più lenta.

Font blog tipo
Ecco come scegliere il tuo font.

Attenzione al font che scegli: alcune famiglie hanno un legame ben preciso con lo stile che vuoi sviluppare su un sito web. Non basta solo puntare sul sans serif.

Errori di tipografia: contrasto del font

Un altro problema tipico di un disordine tipico di questo passaggio: sbagliare l’equilibrio tra colore dello sfondo e carattere. Ma se non c’è abbastanza contrasto?

La leggibilità diventa un problema. Di conseguenza è sempre giusto usare uno sfondo chiaro con un font scuro. Attenzione, una base bianca può essere faticosa nella lettura, quindi puoi seguire quelle che sono le line guida WCAG:

  • #FFFFFF su #FFFFFF – 1:1 invisibile.
  • #797676 su #FFFFFF – 4.5:1 minimo.
  • #6C6868 su #FFFFFF – 5.5:1 adeguato.
  • #595959 su #FFFFFF – 7:1 ideale.
  •  #000000 su #FFFFFF – 21:1 massimo contrasto.

Il rapporto 4,5:1 rappresenta il minimo di leggibilità (standard AA) sul web mentre 7:1 è il rapporto di contrasto che offre piena accessibilità (standard AAA)

Larghezza errata della colonna testo

Il testo si inserisce in uno spazio indicato come colonna. Questo elemento deve avere una larghezza tale da non affaticare la lettura a causa di un’ampiezza eccessiva.

O magari di una layout fluido che si adatta completamente allo schermo in modo da prendere in ogni situazione l’intera larghezza del monitor. Qual è l’ideale?

Quante battute per riga? Meglio 66 caratteri, massimo 75 tra lettere e spazi per una colonna piena. Mentre rimaniamo tra 40 e 50 per le multiple. Questa è la regola:

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters

webtypography.net

Variabilità degli elementi nella pagina

Uno degli errori di chi inizia a lavorare con il layout delle pagine web: non mantenere la coerenza dei vari elementi. Ogni sezione che si ripete in un sito deve avere le stesse misure di tracking e leading, lo stesso font e tutto ciò che è stato deciso.

Questo riguarda anche l’uso di caratteri differenti all’interno di una pagina su internet: usa una buona combinazione tra headline e body copy ma poi stop.

TL;DR: errori di tipografia in sintesi

Quanto deve essere grande il font?

Per il testo della pagina minimo 16 PX.

Quanto deve essere lunga una riga?

La lunghezza ideale è di 66 caratteri.

Quanti font inserire in una pagina?

Meglio rimanere sui due, titolo e body copy.

Come allineare il testo?

Allineato a sinistro, no centrato o giustificato.

Qual è la giusta interlinea?

Tra 1.3 e 1.5 siamo nella norma.

Qual è il contrasto ideale?

#595959 su #FFFFFF

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here