Font styles: quale carattere per il sito web?

Font styles: quale stile di carattere scegliere per un sito web?
(photo by Hello I'm Nik on Unsplash)

Font styles per il sito web: qual è il miglior stile del carattere da usare per leggere con facilità su internet? Quello che ti ritrovi a leggere senza nemmeno accorgerti.


Capita ancora, di trovare siti che utilizzano “caratteri non propriamente comprensibili”, che sembrano scritti a mano, talvolta in corsivo, e ciascuno ha la sua scrittura, non sempre così facile da interpretare.
Forse chi ha realizzato il sito, pensa risulti esteticamente gradevole, ma tali caratteri “così disegnati”, si leggono con molta fatica.
Altri siti utilizzano caratteri sì leggibili, ma che hanno dimensioni che non vanno oltre i 10 pixel, sembra vogliano risparmiare spazio, o pixel (!!!)

L'importante è che sia comprensibile

Vero è, che ciascuno sul suo browser può impostare le dimensioni desiderate dei caratteri.

Però, quando poi si cambiano tali impostazioni, nel momento in cui si esce da un sito con caratteri particolarmente piccoli, e si torna su di uno con stile e dimensione più grandi, e leggibile, occorre nuovamente cambiare le impostazioni, in quanto i caratteri risulterebbero troppo grandi, occupando lo schermo del dispositivo (PC, notebook, tablet, iphone, etc.) in modo eccessivo.

Sembra di trovarsi su di un dispositivo, di cui non conosciamo le impostazioni.

Dover cambiare lo zoom di sito in sito, o quasi, è una seccatura.

Per impostare sul sito caratteri, se non illeggibili, comunque difficilmente comprensibili, occorre impegnarsi parecchio, è molto più facile, anche per sbaglio, scegliere di fretta font styles facilmente leggibili.

Tuttavia, dimensione dei caratteri e stile, fanno la differenza, in meglio e in peggio, soprattutto se il sito è praticamente da leggere.

CSS font styles

Con i CSS (Cascading Style Sheets), impostare dimensione e stile del carattere è semplice, anche avendo una conoscenza di base della scrittura del codice:

p {
font-family: Verdana, Georgia, Tahoma, Helvetica, Arial; /* stile del carattere */
font-size: 16px; /* dimensione del carattere */
}

È sempre consigliabile specificare qualche tipo di font, non uno soltanto, in quanto se il browser non lo dovesse riconoscere, adotterebbe quello di default del browser stesso.

Nell'esempio sopra, lo stile “Verdana” viene interpretato per primo dal browser; se non viene interpretato Verdana, il browser legge “Georgia” per secondo, e via dicendo.

I browser sono molto più evoluti rispetto al passato, e gli aggiornamenti servono a migliorare la qualità della navigazione; ecco perché, quando si sceglie un software, e ci si affida a quei precisi sviluppatori che lo hanno creato, è bene aggiornare con celerità alle nuove versioni quando disponibili, per poter fruire al meglio delle opportunità che offre, sovente anche in termini di sicurezza.

Font styles accessibili

Quando si scrive del codice è però sempre bene pensare anche a chi non può disporre, per tutta una serie di motivi diversi, delle versioni più recenti e potenzialmente più prestanti, l'usabilità e l'accessibilità passano anche da qui.

Lo stile del carattere Verdana, è uno dei più facili da leggere; di default ha caratteri piuttosto grandi, con una buona spaziatura, è sufficiente dare la stessa dimensione ad altri stili di carattere per vederne la differenza.

Georgia - Roma Capitale d'Italia

Arial - Roma Capitale d'Italia

Times New Roman - Roma Capitale d'Italia

Tahoma - Roma Capitale d'Italia

La stessa frase, con font styles diversi.

Ci sono migliaia di tipi di font, nonostante ciò cercarne uno che sia facilmente leggibile e comprensibile, non è affatto difficile; più difficile cercarne uno che sembra un geroglifico.

I Google Fonts sono interessanti: fonts․google․com

Ma come scegliere quello giusto, che meglio rappresenti il proprio sito, o la propria azienda, quale font può rappresentare meglio quello che scrivi?

La risposta univoca ovviamente non c'è. La devi trovare tu.

Font styles: cosa osservare quando scegli lo stile del carattere

Fermo restando che è sempre il contenuto che deve fare la differenza, lo stile del font, così come l'impaginazione del sito, devono mettere in evidenza, dare risalto, al contenuto stesso.

Ovviamente font e layout sono complementari, perché se uno dei due tende a naufragare, si porta appresso anche l'altro.

Come scegliere un font che possa andare bene?

Semplice

Lo devi leggere con facilità, in modo spontaneo, naturale, non ti devi nemmeno accorgere che lo stai leggendo, in quanto la tua concentrazione è sul contenuto.
Appena inizi a leggere, dovresti istintivamente dimenticarti del tipo di carattere: significa che lo comprendi facilmente, e lo leggi velocemente.

• Che il font non abbia disegni eccessivi, che sembrano un ricamo, che sia privo di ghirigori, di orpelli, ma che sia invece chiaro, lo ripeto: chiaro.

Sono uno a cui piace leggere articoli su internet, e mi piace, quando posso, leggere senza stress, soprattutto sullo smartphone, dove lo schermo è piccolo, paragonato ad un altro display; PC, TV, etc.

Perché caratteri assurdi, o troppo ricamati, non sono solamente stressanti da leggere, ma sono quasi un chiaro invito a lasciar perdere e abbandonare il sito.

La spaziatura

Fa in modo che la spaziatura tra i caratteri sia adeguata, non devono essere troppo appiccicati, addirittura tanto da arrivare a toccarsi; né troppo distanti.
Nel primo caso si farebbe fatica a comprendere il testo, nel secondo si verrebbe inevitabilmente distratti cercando di rincorrere con lo sguardo il carattere successivo nel testo che si sta leggendo.

Fai attenzione ai caratteri che si possono confondere durante la lettura, se non risultano ben distinti, esempio:

bd, oq, li, il, j, k, w, É

Anche i caratteri accentati, e quando sono seguiti dalla punteggiatura, che potrebbero confondere ulteriormente le acque, se non ben distinguibili.

Fai attenzione anche agli 1 (il numero uno) e alle I (i maiuscole), che non si confondano:

1I, I1

Provando a scriverli senza spaziatura uno dopo l'altro, è un metodo spietato per capire se sono leggibili oppure no.

Anche per quanto riguarda l'interlinea, lo spazio tra una riga e l'altra: 1,6 risulta una buona impostazione, anche per i dispositivi mobili.

Il corsivo

Quando usi il corsivo (Italic), lo stile del carattere cambia, può anche essere che sia uno stile chiaro e limpido scritto in modo regolare, per poi confondere quando leggi in corsivo, e se lo usi spesso, è bene controllare.

Il grassetto

Controlla il testo anche quando è scritto in grassetto (bold): che non risulti come l'inchiostro sbavato su di un foglio di carta.

Fino a poche settimane fa, per un certo periodo di tempo, avevo usato il font Roboto Mono che mi piace molto, perché ricorda, e somiglia, ai caratteri delle vecchie e mai datate macchine per scrivere.

Però, quando usavo il grassetto mi sembrava un po'ridondante, e la spaziatura tra i caratteri, di poco eccessiva.

Ho provato anche Tahoma ma in ambo i casi, il corsivo risultava troppo inclinato, e con caratteri accentati, non era molto gradevole.

Così ho deciso di cambiare, e ho ripiegato su Nunito, quello che stai leggendo.

Font styles: dimensione dei caratteri

Leggere sullo schermo, è ben diverso che leggere sulla carta, più faticoso, specialmente su display piccoli.

Dai al carattere una dimensione ragionevole; dimensione che cambia, in base allo stile del carattere, quindi, dagli un'occhiata.

Non avere paura di dare allo stile del carattere che adoperi, una dimensione anche di 14 o 16 pixel (px), o l'equivalente per dimensione in em o rem, nel caso di 16px = 1em = 1rem

Non pensare, anche se non porti gli occhiali come li porto io; è troppo grande per me, vedo benissimo anche un carattere più piccolo: prova a leggere l'articolo per intero, e poi magari un altro ancora, e comprendi la lettura ti affatica, oppure hai letto in modo fluido e scorrevole.

L'impatto che si ha al primo istante in cui si arriva su di un sito, conta molto; a me piace entrare subito in sintonia con il testo scritto, e fare in modo che inizio a leggere istintivamente, senza chiedermi che lettera sia quel carattere, o quell'altro.

Il colore dei caratteri

Quasi dimenticavo: il colore dei caratteri. Sfondo bianco, e carattere scuro. Semplice.

Ma lo usano tutti! Vero. Forse perché funziona bene.

Anche perché non mi sono mai cimentato in stilismi grafici, non ne ho la competenza, non vorrei pasticciare.
Ci sono buoni esempi però, di siti che giocano per bene con i colori, di sfondo e testo, oltre che immagini.

Uno di questi, è quello della brava Laura Lonighi, sul suo sito, yunikondesign․com, molto interessante la soluzione quasi tono su tono di testo e sfondo, davvero gradevole.

Se ti interessa, da un'occhiata al colore dei link.