Un aspetto da tenere in considerazione in un sito web è la tipografia. La scelta della font, la sua dimensione, il colore… Ricorda che una buona tipografia permette di realizzare siti web eccellenti! E’ necessario conoscere le norme che regolano l’estetica per una chiara leggibilità, fluidità e armonia. Ecco alcuni principi base da non dimenticare mai.
Partiamo dalla base: Serif Vs San Serif:
La differenza tra i serif e in Sans Serif è la presenza delle grazie, quegli allungamenti ortogonali alle estremità delle lettere, presenti in alcune font come Bodoni e Times New Roman, mentre i Sans Serif sono quelli ‘Sans’ ovvero Senza i Serif (le grazie) come ad esempio Arial e Helvetica.
Principalmente bisognerebbe essere in grado di riconoscere e identificare i seguenti elementi all’interno di una font: l’altezza dell’occhio (detta stem), la linea intermedia (x-height), l’ascendente e il discendente (ascender-descender).
In generale bisognerebbe trovare la giusta proporzione tra leggibilità e gusto estetico, soprattutto nel web dove gli studi dimostrano che la lettura risulta più difficoltosa che sulla carta stampata bisogna trovare un armonia tra leggibilità e bellezza del carattere cercando di alleggerire il più possibile, selezionare font armonici e chiari, evitare di inserire famiglie di font troppo differenti tra loro e in generale di utilizzare dimensioni leggibili a qualsiasi utente sia esso miope, astigmatico o ipermetrope!
Vediamo nello specifico alcuni elementi chiave da tenere a mente!
L’allineamento
Come si sceglie un allineamento? Qual è il suo significato grafico?
In primis gli allineamenti vanno pensati per ampi blocchi di testo per facilitare la lettura, l’allineamento a sinistra in occidente è il più semplice da leggere (visto che scriviamo da sinistra verso destra ma ricorda! Non in tutto il mondo vale la stessa regola!), l’allineamento a destra risulta sempre parlando per noi occidentali, il più ‘fastidioso’ da leggere, soprattutto se si estende per molte righe, si dovrebbe riservare ai titoli di grandi dimensioni, stesso vale per il testo centrato, va bene per un numero limitato di righe, dopo di che diventa difficoltosa la lettura perché l’occhio deve ad ogni riga adattarsi ad una lunghezza differente.
Il testo giustificato è spesso causa di bruttezze inguardabili sia online che sulla carta stampata, bisogna impostare una corretta interlettera e controllare che non si distanzino troppo le parole fra di loro altrimenti la lettura verrà interrotta dagli spazi vuoti.
Dimensione peso e contrasto
Ad ogni contenuto il giusto peso! Una buona gerarchia in quanto a dimensioni aiuta considerevolmente i lettori. Il rapporto tra le dimensioni dei font di un titolo <h1> ed un sottotitolo <h2> ad esempio non può essere di pochi punti ma almeno del doppio es. <h1> pt 50 <h2> pt 25/30 lo stesso vale per <h3> e <body>.
Impostare una gerarchia dimensionale aiuta il lettore a captare i significati chiave, e può aiutarci a indirizzare la sua attenzione su alcune voci importati che vogliamo sottolineare. Immagina che un font grande sia ‘urlato’, il sottotitolo enunciato ad alta voce e il testo invece raccontato con una voce tranquilla e coinvolgente. Lo stesso concetto vale per il grassetto, sottolinea una parola, o una frase che vogliamo mettere in evidenza rispetto al resto del testo, nel web solitamente identifica delle keywords.
Da non dimenticare è il contrasto tra il testo e il suo sfondo, una palette colori con tonalità troppo vicine tra loro creerà un immagine poco chiara, una selezione invece con elementi tenui e uno o due elementi di tono più deciso aiuteranno a stabilire una gerarchia chiara e intuitiva.
L’interlinea
Non esiste una formula perfetta per trovare l’interlinea esatta, il suo scopo è quello di rendere facile al lettore di muoversi tra le righe. Un blocco di testo con un interlinea esagerata obbliga l’occhio a uno sforzo maggiore per passare da una riga all’altra, lo stesso vale per quei blocchi di testo, passatemi il termine, impastati dove gli ascender e i discender si toccano fra loro fino a sovrapporsi, rendendo davvero difficile l’identificazione dei caratteri. Solitamente si sceglie un interlinea che è superiore alla dimensione del testo di 2/5 punti in modo da dare respiro al testo e rilassare l’occhio durante la lettura.
Gli spazi
I vuoti non sono inutili! Anzi! Dare aria alla pagina inserendo giuste proporzioni di spazi vuoti aiuta a rendere leggibile e gradevole il layout. Fate molta attenzione ad esempio a come il testo contorna le immagini o altri elementi del layout.
La leggibilità
Teniamo in considerazione che la maggior parte dei siti leggibili ha un layout semplice, font Sans Serif, contrasti evidenti tra testo e sfondo, e una buona proporzione tra pause e pieni.
Ora tocca a te! Buon lavoro!
