Font del sito web: le dimensioni contano

Perché il testo del tuo sito web dovrebbe essere più grande.

 

Vi riproponiamo oggi questo interessante articolo pubblicato recentemente su blog.marvelapp.com in sui si affronta uno dei temi più dibattuti (sarebbe forse meglio dire: combattuti) tra web designer e sviluppatori: la dimensione da utilizzare per il corpo del testo (o body text) di un sito web.

Iniziamo col dire che molto dipende anche dalle finalità di un sito, tuttavia ci sono considerazioni generalmente valide che oggi non possiamo più ignorare e che ci spingono a proporre ai nostri clienti testi (decisamente) più grandi rispetto al passato.

 

Più grande, ma di cosa?

 

Ad oggi i body text della maggior parte dei siti web ha una dimensione tra i 15 ed i 18px, anche se cominciamo a vedere sempre più siti adottare standard maggiori (20px). Naturalmente dimensioni diverse sono fondamentali per assolvere al meglio funzioni diverse (per una didascalia possiamo certamente considerare corretta una dimensione inferiore ai 18px), tuttavia riteniamo fondamentale l'adozione di dimensioni superiori per il corpo del testo.

 

 

Perché i testi sono ancora così piccoli?

 

Come detto, designer e sviluppatori sembrano in gran parte ancorati a standard appartenenti al passato. Le ragioni sono diverse, e le vedremo a breve, tuttavia sembra che l'elemento maggiormente in grado di influenzare queste scelte sia (come spesso accade nei settori più disparati) l'abitudine ed il conformarsi, magari involontariamente, a quello che propone la maggioranza dei professionisti del settore. 

Ma come detto, ci sono poi ragioni tecniche, vediamole.

 

Mobile, mobile, mobile!

La componente responsive rappresenta oggi il primo pensiero a guidare lo sviluppo di un sito web. Questo coinvolge naturalmente anche le dimensioni del body text, il quale dovrà garantire leggibilità anche su schermi di risoluzione inferiore, come sono quelli di smartphone e tablet. Ecco perché l'impostazione comune è quella di adottare i 15-18px come soluzione polivalente: garantisce discreta leggibilità su monitor convenzionali e si adatta bene a monitor più piccoli. 

Non va però dimenticato che prodotti responsive possono essere visualizzati anche su laptop e smart TV, oltre naturalmente a monitor per computer desktop di grandi dimensioni.

 

Grande, ovvero grossolano

L'ambiente del design tende ad associare un testo grande con un'immagine grossolana e bambinesca.

Crediamo sia necessario partire dalla scelta del carattere giusto, considerando design, kerning, letter spacing, line height, e tutti quegli elementi che influenzano la nostra interpretazione visiva. Di fatto non è detto che un bel carattere sia bello in qualsiasi dimensione, basta solo scegliere quello giusto.

 

C'è leggibilità e facilità di lettura

In inglese si distingue tra legibility, cioè la possibilità fisica di leggere un testo, e readability, ossia le caratteristiche che rendono un testo più o meno facile da leggere.

Si tratta di una distinzione tanto sottile quanto importante, spesso infatti i progettisti tendono a confondere l'una con l'altra, dimenticando come il design possa incidere sulla composizione di un testo, aggiungendo una componente emozionale e sensoriale che diminuisce notevolmente lo sforzo da compiere per leggerlo.

 

A morte lo scroll!

In termini di usability di un app o di un sito web, non possiamo certamente considerare sbagliata la tendenza di ridurre la quantità di scroll a cui un utente è sottoposto durante la navigazione dei contenuti. 

Ridurre non significa però eliminare; l'utente web ha ormai sviluppato una naturale tendenza allo scroll, movimento ormai impresso nel nostro DNA di internet users e consumers. Non possiamo quindi, in alcun caso, compromettere la facilità di lettura (readability) a favore di una leggibilità (fisica) che riduce la dimensione del carattere con il solo fine di ridurre al minimo la necessità di scroll.

 

Le ragioni per cui il body text dovrebbe essere più grande

 

Farsi leggere, da ogni distanza

La nostra esperienza quotidiana ci suggerisce come la fruizione dei contenuti web avviene da distanza sempre più ravvicinata: smartphone e table si trovano, al massimo, alla distanza di un braccio rispetto ai nostri occhi, gli stessi monitor di computer desktop e laptop si trovano solitamente a meno di un metro di distanza da noi.

Nonostante questo, pensiamo sia sbagliato limitarci a questo, perché significherebbe ignorare l'esistenza di schermi ad altissima risoluzione, che non sono certo la maggioranza, ma sono sono sempre più diffusi, e le smart TV, per non parlare delle difficoltà visive di alcuni utenti. Un body text di dimensioni maggiori non comprometterebbe in alcun modo la leggibilità e la facilità di lettura su schermi più piccoli, agevolando allo stesso tempo la fruizione dei contenuti su schermi più grandi, che normalmente osserviamo da distanze ben maggiori.

 

Facilitare la lettura

Un argomento che da solo potremmo anche considerare sufficiente. Le statistiche ci dicono che gli utenti leggono il 28% percento dei testi presenti su una pagina web ed inoltre hanno la tendenza a scannerizzare i testo, piuttosto che leggerlo in dettaglio.

Testi più grandi facilitano sia le operazioni di lettura che di scansione, tanto per utenti anziani che possono manifestare deterioramento della vista, quanto per utenti giovani, sovrastimolati e tendenti all'impazienza.

Non è solo una questione di dimensioni, caratteri più grandi ci costringono infatti a produrre una quantità minore di testo, ad essere più concisi e chiari: riducendo la densità di parole si migliora, di nuovo, la facilità di lettura. Testi più grandi e brevi richiedono meno concentrazione, inoltre tendono ad occupare uno spazio maggiore a schermo, invitandoci allo sviluppo di un design che faccia "respirare" il testo, riducendo le distrazioni per l'occhio sovraccarico degli utenti internet di oggi, a tutto vantaggio dell'usabilità.

 

Maggiore impatto Visivo

Abbiamo parlato prima di componente emozionale associata al design di un testo: nella giusta misura, un testo più grande può trasmettere forza e convinzione, le parole acquisiscono importanza, aiutando la veicolazione di un dato significato.

Dal punto di vista estetico, un carattere più grande permette di evidenziarne in modo chiaro le sfumature di design che lo contraddistinguono, non così evidenti alla nostra vista in un formato minore, consentendo di distinguere tra un carattere ben disegnato ed uno scadente.

 

 

Come ottimizzare un body text più grande

 

Body text first!

Rispetto alle abitudini consolidate può sembrare un eresia, ma consigliamo di partire dal design del corpo del testo per sviluppare il tuo sito web. La ragione è presto detta: il body text è il luogo in cui raccontiamo, descriviamo e forniamo all'utente le informazioni di dettaglio, dove ci esprimiamo; in sostanza è quello che vorremmo venisse letto con maggior interesse. Se così non è o non avete nulla da dire, o non lo state dicendo nel modo giusto. Quindi partite dal corpo del testo, per dargli lo spazio, il respiro e l'importanza che merita, e poi proseguite nel lavoro.

 

Scegliete un carattere scalabile

Come principio generale, si consiglia un serif o sans-serif font per il corpo del testo. Non tutti i caratteri appartenenti a queste famiglie rendono bene quando ingranditi, in particolare i caratteri di sistema (Georgia, Arial ecc.) non danno il meglio nel grande formato, essendo stati sviluppati con pochi dettagli, per una leggibilità ottimale ad una dimensione standard di 14px.

Esempi di serif font che ben si adattano a body text di dimensioni maggiori: Equity, Franziska, Leitura News, Merriweather, Miller, PT Serif Tisa.

Esempi di sans-serif font che, sebbene generalmente meno utilizzati nel body text, rappresentano un'alternativa interessante grazie ai minori dettagli: Atlas Grotesk, Futura, Lato, Maison Neue, Real Text, Roboto Suisse Int’l.

 

Scegliete con gli occhi

Le particolarità dei diversi caratteri li rendono unici, quindi non decidete la dimensione da utilizzare sul vostro sito in base ad una cifra prestabilita che vi sembra ideale e nemmeno in base ad una dimensione che produce buoni risultati su altri siti che utilizzano caratteri diversi. Ogni carattere è una storia a se, quindi partite da un minimo di 20px e andate in crescendo, valutando empiricamente quale dimensione fa al caso vostro.

La resa del carattere è poi influenzata dai colori di sfondo e in primo piano di un sito, quindi testate le dimensioni in uno scenario cromatico semi-definitivo e valutate la possibilità di altre varianti di colore.

 

Ottimizzare la spaziatura delle lettere

Come per la dimensione, anche lo spacing tra le lettere non può essere deciso a priori, va definito empiricamente date le grandi differenze tra i diversi caratteri. Generalmente può rivelarsi utile ridurre la spaziatura in caso di un ingrandimento del font, per minimizzare la distanza in eccesso, ma non è una regola universale e la reale necessità andrà valutata sul campo.

Il kerning è invece tutta un'altra storia ed attiene alla distanza tra due lettere specifiche di un set di caratteri, si tratta di regolazioni più raffinate, che possono migliorare la leggibilità del testo.

 

Ottimizzare lunghezza e spaziatura delle linee di testo

Le regole della composizione tipografica ci indicano come compreso tra 55 e 75 il numero ideale di caratteri che dovrebbe contenere una line di testo. Questo valore è indipendente dalla grandezza del font: qualunque sia la grandezza, un numero di caratteri superiore rende difficoltosa la lettura, un numero inferiore produce lo stesso risultato, troncando frasi e parole pensate per essere continue.

Riguardo alla larghezze delle colonne di testo, la regola generale è che il testo ne determina l'estensione e non vice versa: più è grande il font, più larga dovrà essere la colonna.

La spaziatura tra le linee segue i principi della spaziatura tra i caratteri: all'aumentare delle dimensioni saranno probabilmente necessari degli aggiustamenti che favoriscano a leggibilità.

 

In conclusione, quello che emerge da questo articolo è un principio: nel design dei nostri progetti web dobbiamo metter al primo posto la facilità di lettura e comprensione da parte dell'utente. Più grande non significa migliore, la dimensione del font va definita in base alle esigenze ed al contesto, ma per le ragioni viste, un testo di dimensioni inferiori ai 20px non rappresenta la scelta migliore.

 


Se hai trovato interessante questo articolo, faccelo sapere!