Prima di essere una web designer, sono un utente del web così come tutti voi. Quando creiamo il nostro blog od un sito vetrina spesso ci confondiamo perché magari lo vorremmo abbellire, vorremo che alcune parole fossero più evidenti, dei titoli più particolari, ecc…
Spesso però vedo degli errori, non parlo di quelli grammaticali, ma errori di stile.
Testi piccoli, con colori poco visibili, con 5 font diversi, con il colore e la tipografia dei link uguale ai titoli ed alle parole evidenziate in grassetto.
Quando sto leggendo l’articolo di un blog e vedo che il testo di un grigio chiarissimo su sfondo bianco, un carattere piccolissimo che mi costringe a zoommare la pagina, ecco è in quel momento che abbandono il sito.
In questo articolo ho voluto dare un contributo non solo come web designer ma soprattutto come utente
Sono gli utenti che poi devono leggere e non avrà importanza quanto figo possa essere il sito se poi ai tuoi utenti bruciano gli occhi e non riescono ad andare in fondo alla pagina.
- #10 regole top per il testo del tuo sito
- 01. Ingrandisci i caratteri, ma non troppo
- 02. Colora il testo di grigio scuro
- 03. Prediligi i caratteri senza grazie
- 04. Open Sans sta bene su tutto
- 05. Lascia il testo allineato a sinistra nel 90% dei casi
- 06. Utilizza 2 tipi di font, il terzo deve essere prezioso
- 07. Differenzia stile e colore dei permalink dal grassetto e dai titoli
- 08. Dai spazio tra un blocco e l’altro
- 09. Utilizza una lista puntata o numerata per elencare qualcosa
- 10. Evidenzia i titoli ed i punti salienti del testo
#10 regole top per il testo del tuo sito
- Ingrandisci i caratteri, ma non troppo
- Colora il testo di grigio scuro
- Prediligi i caratteri senza grazie
- Open Sans sta bene su tutto
- Lascia il testo allineato a sinistra nel 90% dei casi
- Utilizza 2 tipi di font, il terzo deve essere prezioso
- Differenzia stile e colore dei permalink dal grassetto e dai titoli
- Dai spazio tra un blocco e l’altro
- Utilizza una lista puntata o ordinata per elencare qualcosa
- Evidenzia i punti salienti del testo
01. Ingrandisci i caratteri, ma non troppo
La grandezza dei caratteri: font-size
Mi è capitato spesso di cercare qualcosa su Google e di entrare nella pagina di un sito web dove il testo del contenuto era veramente piccolo.
Non utilizzare un font-size troppo piccolo.
Il font-size, per chi mastica di CSS (fogli di stile), è la taglia del font, per farla semplice sarebbe la grandezza del carattere.
Spesso viene utilizzato un carattere troppo piccolo e questo ci obbliga a sforzare la vista.
Personalmente in genere chiudo subito la pagina, a meno che sia estremamente importante e non ci siano altri siti web da cui leggere ciò che cerco e a quel punto utilizzo CTRL+, facendo appunto uno zoom + per ingrandire la pagina.
Un font-size consigliabile per il testo di un articolo o di una pagina è di 16px o meglio ancora 18px. Tutto dipende dal font che stiamo utilizzando, infatti alcuni font sembrano più piccoli di altri e hanno bisogno di una grandezza maggiore.
Imposta un font-size di 18px al body.
Se stai scrivendo una landing page potresti anche valutare di ingrandire i caratteri di alcuni paragrafi, per mettere ancor più in evidenza il testo. In questo caso potresti utilizzare un font-size di 20px.
Per quanto riguarda gli headers (h1, h2, h3, …) ed i titoli in generale, puoi lasciare i loro size di default.
Se volessimo modificare il size degli header, una regola potrebbe essere quella di avere un size decrescente. Ad esempio possiamo impostare H1 con un font-size di 42px, H2 con 36px e H3 con 28px.
Quando usare un font-size piccolo
Il font-size piccolo, che per spazia tra i 12 e i 15px (e mai di meno), generalmente viene utilizzato per il tag <small>.
Il tag <small> è utilizzato ad esempio per l’inserimento di note finali in fondo alla pagina.
Un altro modo che abbiamo per utilizzare un font-size minore di 16px è nelle mini descrizioni ceh non vogliamo far notare o che sono supportati da un titolo già ben visibile.
Preferisco impostare un font-size di 16/18 px, ma ogni tanto anche un font-size di 14px potrebbe essere utilizzato. Bisogna, come tutte le cose, usare il buon senso.
Nell’immagine qui sopra puoi vedere la differenza tra i 3 paragrafi. Il primo paragrafo ha un font-size di 18px, il secondo di 16px ed il terzo di 14px. Apri l’immagine per vedere i caratteri a grandezza naturale.
Il font-family utilizzato per questo esempio è Open Sans.
02. Colora il testo di grigio scuro
Il colore del testo in generale
Il colore del testo deve essere ben visibile e leggibile, e soprattutto deve avere un giusto contrastro con lo sfondo.
Ipotizzando di avere uno sfondo bianco, possiamo utilizzare un grigio scuro od un nero, ma è sconsigliabile (se non per piccole e rare descrizioni) di utilizzare un grigio chiaro.
Generalmente preferisco spaziare in una scala di grigio/nero che va da quello scuro come #444444 a #212121.
Il colore nero #000000 preferisco non usarlo mai perché secondo me con uno sfondo bianco è troppo pesante da vedere. A me da veramente fastidio e dopo un po’ devo distogliere lo sguardo.
Il colore dei titoli
Per i titoli vanno bene sia un colore grigio scuro/nero che più colorati come il blu, il rosso, occhio sempre alle tonalità che siano morbide e non “accecanti”.
03. Prediligi i caratteri senza grazie
I font possono essere di questa tipologia: serif, sans-serif, monospace, script e fantasy. Quelli che ci interessano sono di tipo serif e sans-serif.
Il carattere serif ha le grazie, mentre il sans-serif è senza grazie. Ma vediamo in seguito perché prediligere i caratteri senza grazie nei paragrafi ed invece utilizzare i font serif nei titoli.
Caratteri sans-serif
I font di tipo sans-serif non contengono le grazie, ovvero dei bastoni all’inizio ed alla fine delle lettere.
Per il testo di un paragrafo è consigliabile utilizzare caratteri senza grazie per rendere più leggibile il testo.
Alcuni dei font che vengono utilizzati maggiormente sono “Open Sans”, “Lato” e “Poppins”.
Quando utilizzare i caratteri con le grazie
I font serif hanno delle lineette o bastoni in ogni carattere. Il termine tecnico è “grazie”.
Possiamo utilizzare font di tipo serif, quindi con le grazie?
Si, certo. Per esempio possiamo utilizzarli nei titoli (h1, h2, h3).
Alcuni dei font di tipo serif che vengono utilizzati in maggior modo sono Roboto Slab, Ralewey, Georgia, Times, New York.
04. Open Sans sta bene su tutto
Al punto 03 ti ho parlato di quale tipologia di font sia meglio utilizzare tra serif e sans-serif, adesso invece parlerò di quale font potresti utilizzare di default: Open Sans.
Probabilmente Open Sans è il font più comune ed utilizzato in un sito web. Si tratta di un font di tipo sans-serif.
Come ti preannunciavo nel titolo, anche un po’ giocando, “Opens Sans sta bene su tutto“.
Ciò significa che puoi utilizzarlo per qualsiasi testo, anche per i titoli. Utilizzando Open Sans non sbagli mai.
Ricollegandoci per un secondo alla dimensione del testo, potremmo dire che il testo potrebbe essere di 18px.
05. Lascia il testo allineato a sinistra nel 90% dei casi
Puoi allineare il testo in diversi modi: left, right, center, justify.
L’allineamento che puoi escludere subito è justify, non è da prendere in considerazione.
Un testo va allinato a sinistra (left) ed il nostro browser lo fa in automatico.
In alcuni casi vorresti allineare il testo a destra (right) perché magari a destra hai inserito un’immagine, oppure vorresti allinarlo al centro quando per esempio hai 4 colonne con icone e mini descrizioni e quindi allinei tutto al centro.
06. Utilizza 2 tipi di font, il terzo deve essere prezioso
Una regola che viene sempre riportata dai web designer è quella di non utilizzare mai più di 2 tipi di font.
Generalmente si utilizza un font per il testo ed un font diverso per i titoli.
Tuttavia potresti voler utilizzare un terzo font. Quando? Per esempio potresti utilizzare un font elegante in stile “handwriting” ovvero scritto a mano. Diversificalo con un colore diverso rispetto al colore del testo.
Il terzo font viene utilizzato per enfatizzare una frase piccola composta da poche parole. Solitamente i font di tipo handwriting non sono super leggibili, quindi consiglio di non utilizzarlo per i titoli, ma soltanto per evidenziare poche parole.
Dove trovare i font: https://fonts.google.com
Su Google Fonts puoi sia scaricare i font ed installarli sul tuo pc/mac sia importare l’url del font sul tuo sito web.
07. Differenzia stile e colore dei permalink dal grassetto e dai titoli
Mi è capitato di visitare dei siti web dove tutti gli elementi a cui dare maggior risalto avevano lo stesso colore e stile, e non si distinguevano fra di loro.
Una delle regole da tenere in considerazione è quella di dare un giusto colore ed un corretto stile ad ogni singolo elemento. Va bene la creatività, ma ricordiamoci sempre che l’utente del web è abituato a vedere le cose in un certo modo.
- Il colore del testo in grassetto deve essere uguale, o quasi, a quello dei paragrafi.
- Il colore e lo stile del link non deve confodersi con altri elementi. Dai un colore al link diverso dal testo e soprattutto fai in modo che sia sottolineato (text-decoration: underline) oppure abbia un bordo di 1 o 2 px.
08. Dai spazio tra un blocco e l’altro
Le parole chiavi per questa regola sono “line-height” e “margin-bottom”.
Assicurati che il testo abbia una giusta interlinea, ovvero un adeguato spazio verticale tra una riga di testo ed un’altra.
Spezzetta le frasi in più paragrafi dando così la possibilità al lettore di respirare e di non trovare un muro di testo che ti rende faticosa la lettura.
Tra un paragrafo ed un altro fai in modo che ci sia il giusto spazio. In questo caso puoi lavorare con il margin-bottom.
09. Utilizza una lista puntata o numerata per elencare qualcosa
Quando stai scrivendo un paragrafo dove elenchi qualcosa è sempre una buona prassi utilizzare l’elenco.
In questo modo puoi spezzare il ritmo dell’articolo, inoltre le liste potrebbero avere un maggior risalto nel testo.
Utilizza un elenco puntato (di default vengono visualizzati dei pallini prima di ogni riga) quando vuoi elencare qualcosa che non ha alcun tipo di priorità.
Utilizza invece una lista ordinata, detta anche numerata, per dare un ordine di importanza od una sequenza alla tua lista.
Generalmente la lista numerata, di default, è di tipo decimale. A me invece piace utilizzare il tipo “decimal-leading-zero” (aggiunge uno zero nei numeri da 1 a 9).
10. Evidenzia i titoli ed i punti salienti del testo
Siamo giunti all’ultimo punto di questo articolo. Abbiamo visto come deve essere il testo presente all’interno di una pagina web.
Abbiamo già visto la regola fondamentale sulle dimensioni del testo, che non deve essere piccolo, adesso invece vorrei parlarti di come mettere in risalto le parti più essenziali del testo.
Capita sempre di più di leggere un articolo e di voler saltare dei pezzetti perché magari non ci interessano e cosa facciamo?
Saltelliamo da un paragrafo all’altro, alla ricerca delle parole chiavi che ci riassumono in in pochissime parole l’argomento del paragrafo.
Sarebbe dunque opportuno evidenziare in grassetto le chiavi del contenuto.
Così facendo darai la possibilità ai tuoi lettori di saltellare da un paragrafo all’altro mantenendo alta la loro concentrazione.
Se io vedo un blocco di testo di tansissime righe, senza spazi, senza grassetti, senza alcun elemento che risalti, allora ho più probabilità di abbandonare il sito.
Evidenzia le parti più importanti del testo con un grassetto od uno sfondo in stile evidenziatore.
Il lettore ha bisogno di un appiglio ed un testo evidenziato gli renderà migliore la lettura.
Conclusione
Siamo arrivati alla chiusura di questo articolo. Spero di averti dato tutte le informazioni che ti servivono per migliorare i tuoi articoli o le pagine del tuo sito.
In definitiva le regole da seguire sono quelle di lasciare spazio tra un paragrafo e l’altro, avere dei paragrafi non troppo grandi e con parti del testo messi in risalto.
Evitiamo dunque di utilizzare caratteri troppo piccoli.
