Tecniche CSS moderne per migliorare la leggibilità

Possiamo leggere in tanti modi, e ci sono tanti tipi diversi di lettori, ognuno con le proprie esigenze, abilità, linguaggio e, soprattutto, abitudini. Leggere un romanzo a casa è diverso da leggerlo in treno, così come leggere un giornale è diverso da sfogliare la sua versione online. La lettura, come qualsiasi altra attività, richiede pratica affinché qualcuno diventi veloce ed efficiente. Fondamentalmente, leggiamo meglio quelle cose che siamo abituati a leggere di più.

Quali aspetti dobbiamo prendere in considerazione quando progettiamo e sviluppiamo per la lettura? Come possiamo creare esperienze accessibili, confortevoli e inclusive per tutti i lettori, compresi i più sfidati e quelli affetti da dislessia?

Spazi, parole, frasi e paragrafi

Unità

In una pagina Web, sono disponibili molte unità per regolare la dimensione del carattere del testo. Capire quale unità utilizzare è essenziale per impostare la struttura di un'intera sezione di lettura. La natura reflowable del web richiede di considerare diversi aspetti, come la dimensione del viewport e le preferenze di lettura dell'utente.

Per questo motivo, le scelte più adatte sono generalmente em e rem, che sono unità specifiche dei font. Ad esempio, l'impostazione dei margini tra i paragrafi utilizzando ems aiuta a preservare il ritmo verticale al variare delle dimensioni del testo. Tuttavia, questo può essere un problema quando un font serif viene alternato a un sans-serif all'interno di una sezione. Infatti, a parità di dimensione del carattere, i caratteri possono apparire otticamente molto diversi. Tradizionalmente, l'altezza del carattere "x" minuscolo (l'altezza x) è il riferimento per determinare la dimensione apparente di un carattere.

Usando la regola font-size-adjust, possiamo quindi renderizzare otticamente i caratteri della stessa dimensione, perché la proprietà corrisponderà alle altezze delle lettere minuscole. Sfortunatamente, questa proprietà è attualmente disponibile solo in Firefox e in Chrome ed Edge dietro un flag, ma può essere utilizzata come miglioramento progressivo utilizzando il controllo @support:

 @supports (font-size-adjust: 1;) { article { font-size-adjust: 0.5; } }

Aiuta anche con lo scambio dal font di fallback a quello caricato in remoto (ad esempio, utilizzando Google Fonts).

Altezza della linea ottimale

Pensiamo che la tipografia sia in bianco e nero. La tipografia è davvero bianca [...] È lo spazio tra i neri che lo rende davvero.

— Massimo Vignelli, Helvetica, 2007

Poiché la tipografia è più una questione di "bianchi" che di "neri", quando applichiamo questa nozione alla progettazione di un sito Web o di un'applicazione Web, dobbiamo tenere conto di caratteristiche speciali come l'altezza della riga, i margini tra i paragrafi e le interruzioni di riga.

L'impostazione della dimensione del carattere basandosi sull'altezza x aiuta a ottimizzare l'altezza della linea. L'altezza della riga predefinita nei browser è 1,2 (un valore senza unità è relativo alla dimensione del carattere), che è il valore ottimale per Times New Roman ma non per altri caratteri. Dobbiamo anche considerare che l'interlinea non cresce linearmente con la dimensione del carattere e che dipende da vari fattori come il tipo di testo. Testando alcuni font comuni per la lettura in formato lungo, combinati con dimensioni da 8 a 14 punti, siamo stati in grado di dedurre che, sulla carta, il rapporto tra l'altezza x e l'interlinea ottimale è 37,6.

Rispetto alla lettura su carta, la lettura dello schermo richiede generalmente una maggiore spaziatura tra le righe. Pertanto, dovremmo regolare il rapporto a 32 per gli ambienti digitali. In CSS, questo valore empirico può essere tradotto nella seguente regola:

 p { line-height: calc(1ex / 0.32); }

Nei giusti contesti di lettura, questa regola imposta un'altezza di linea ottimale sia per i font serif che sans-serif, anche quando gli strumenti tipografici non sono disponibili o quando un utente ha impostato un font che sovrascrive quello scelto dal designer.

Definisci la scala

Ora che abbiamo regolato la dimensione del carattere e utilizzato l'ex unità per calcolare l'altezza della riga, dobbiamo definire la scala tipografica in modo da impostare correttamente la spaziatura tra i paragrafi e dare un buon ritmo alla lettura. Come detto prima, l'interlinea non cresce in modo lineare ma varia a seconda del tipo di testo. Per i titoli con una dimensione del carattere grande, ad esempio, dovremmo considerare un rapporto più alto per l'altezza della riga.

 article h1 { font-size: 2.5em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h2 { font-size: 2em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h3 { font-size: 1.75em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0; } article h4 { font-size: 1.5em; line-height: calc(1ex / 0.37); margin: calc(1ex / 0.37) 0; } article p { font-size: 1em; line-height: calc(1ex / 0.32); margin: calc(1ex / 0.32) 0; }

Spaziatura tra lettere e parole

Quando si lavora sulla leggibilità, dobbiamo considerare anche i lettori che sono sfidati, come quelli con dislessia e difficoltà di apprendimento. La dislessia evolutiva colpisce la lettura e la discussione e la ricerca sulle cause sono ancora in corso. È importante avvalersi di studi scientifici per comprendere gli effetti che le variabili visive e tipografiche hanno sulla lettura.

Ad esempio, in uno studio seguito dalla mia azienda ("Testing Text Readability of Dyslexia-Friendly Fonts"), è emersa una chiara evidenza che le forme dei glifi dei caratteri ad alta leggibilità non aiutano realmente la lettura, ma una maggiore spaziatura tra i caratteri (tracciamento) fa. Questa scoperta è stata confermata da un altro studio sull'efficacia della maggiore spaziatura ("Come gli aspetti visivi possono essere cruciali nell'acquisizione della lettura: il caso intrigante dell'affollamento e della dislessia evolutiva").

Questi studi suggeriscono che dovremmo sfruttare il dinamismo e la reattività delle pagine web offrendo strumenti più efficaci, come i controlli per la gestione della spaziatura. Una tecnica comune quando si ingrandisce la dimensione dei caratteri consiste nel regolare la spaziatura tra lettere e parole tramite le proprietà CSS come la spaziatura delle lettere e la letter-spacing delle word-spacing .

Il problema è che letter-spacing agisce incondizionatamente e interrompe il tracciamento del carattere, portando la pagina a rendere gli spazi non ottimali.

In alternativa, possiamo utilizzare i caratteri variabili per ottenere un maggiore controllo sul rendering dei caratteri. I progettisti di caratteri possono parametrizzare la spaziatura in modo variabile e non lineare e possono determinare come il peso e la forma di un glifo possono adattarsi meglio alle abitudini del lettore. Nell'esempio seguente, utilizzando il font Amstelvar, siamo in grado di aumentare la dimensione ottica, nonché la spaziatura e il contrasto, come previsto dal designer.

L'articolo di Web.dev "Introduzione ai caratteri variabili sul Web" fornisce maggiori dettagli su cosa sono i caratteri variabili e su come utilizzarli. E dai un'occhiata allo strumento Caratteri variabili per vedere come funzionano.

Larghezza e allineamento

Per ottimizzare il flusso di lettura, dobbiamo lavorare anche sulla larghezza del paragrafo, che è il numero di caratteri e spazi su una riga. Durante la lettura, il nostro occhio si concentra su circa otto lettere in una foveatio (cioè l'operazione che si attiva quando guardiamo un oggetto), ed è in grado di gestire solo poche ripetizioni consecutive . Pertanto, le interruzioni di riga sono determinanti: il momento di spostare il focus dalla fine di una riga all'inizio della successiva è una delle operazioni più complesse in lettura e deve essere facilitato mantenendo il giusto numero di caratteri per tipo di testo. Per un paragrafo di base, una lunghezza comune è di circa 60-70 caratteri per riga. Questo valore può essere facilmente impostato con l'unità ch assegnando una larghezza al paragrafo:

 p { width: 60ch; max-width: 100%; }

Anche la giustificazione svolge un ruolo importante nella lettura trasversale. Il supporto della sillabazione per le lingue non è sempre ottimale nei vari browser; quindi, deve essere verificato. In ogni caso evitate testi giustificati in assenza di sillabazione perché la spaziatura orizzontale che si creerebbe sarebbe di ostacolo alla lettura.

 /* The browser correctly supports hyphenation */ p[lang="en"] { text-align: justify; hyphens: auto; } /* The browser does NOT correctly support hyphenation */ p[lang="it"] { text-align: left; hyphens: none; }

La sillabazione manuale può essere utilizzata per le lingue che non dispongono del supporto nativo. Esistono diversi algoritmi (sia lato server che lato client) che possono iniettare il ‐ entità in parole, per indicare ai browser dove il token può essere violato. Questo carattere sarebbe invisibile, a meno che non si trovi alla fine della riga, dopodiché verrebbe visualizzato come un trattino. Per attivare questo comportamento, dobbiamo impostare i hyphens: manual CSS .

Contrasto in primo piano

Il contrasto di caratteri e parole con lo sfondo è fondamentale per la leggibilità. Le WCAG hanno definito linee guida e vincoli per diversi standard (A, AA, AAA) che regolano il contrasto tra testo e sfondo. Il contrasto può essere calcolato con diversi strumenti, sia per gli ambienti di progettazione che di sviluppo. Tieni presente che i validatori automatizzati sono strumenti di supporto e non garantiscono la stessa qualità di un test reale.

Utilizzando le variabili CSS e un'istruzione calc , possiamo calcolare dinamicamente il colore che offre il miglior contrasto con lo sfondo. In questo modo possiamo offrire all'utente diversi tipi di contrasto (seppia, grigio chiaro, modalità notte, ecc.), convertendo l'intero tema in base al colore di sfondo.

 article { --red: 230; --green: 230; --blue: 230; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000); --aa-color: calc((var(--aa-brightness) - 128) * -1000); background: rgb(var(--red), var(--green), var(--blue)); color: rgb(var(--aa-color), var(--aa-color), var(--aa-color)); } 

Inoltre, con l'introduzione e il supporto cross-browser della media query prefer-color-scheme , diventa ancora più semplice gestire il passaggio dal tema chiaro a quello scuro, in base alle preferenze dell'utente.

 @media (prefers-color-scheme: dark) { article { --red: 30; --green: 30; --blue: 30; } }

Andando avanti

La progettazione e lo sviluppo per una lettura ottimale richiedono molte conoscenze e il lavoro di molti professionisti. Quanto più questa conoscenza viene diffusa nel team, tanto meglio saranno gli utenti. Di seguito sono riportati alcuni punti per portarci a buoni risultati.

Per i designer

• Considerare la struttura semantica come parte del progetto, piuttosto che un dettaglio tecnico;
• Layout del documento e metriche dei caratteri, in particolare i perché e i come delle tue scelte. Aiuteranno gli sviluppatori a implementare correttamente il design;
• Riduci il più possibile le variabili tipografiche (meno famiglie, stili e varianti).

Per gli sviluppatori

• Imparare i principi della tipografia per comprendere le decisioni progettuali prese e come implementarle;
• Usa le unità relative alla dimensione del carattere per implementare layout reattivi (padding, margini, spazi vuoti) che si adattano alle preferenze dell'utente;
• Evita la manipolazione illimitata delle metriche dei caratteri. La leggibilità potrebbe risentirne quando i vincoli dei caratteri non vengono rispettati.

Per Squadre

• Leggere e comprendere i principi delle WCAG;
• Considerare l'inclusione e l'accessibilità come parte del progetto (piuttosto che come questioni separate).

La lettura è un'attività complessa. Nonostante le numerose risorse sulla tipografia web e le pubblicazioni accademiche che identificano aree di miglioramento, non esiste una ricetta magica per ottenere una buona leggibilità. Il numero di variabili da considerare potrebbe sembrare schiacciante, ma molte di esse sono gestibili.

Possiamo impostare l'altezza della linea ottimale di un paragrafo usando l'unità ex , così come impostare la larghezza di un paragrafo usando l'unità ch , in modo da rispettare le impostazioni del browser preferite dall'utente per la dimensione del carattere e la famiglia. Possiamo usare caratteri variabili per regolare la spaziatura tra lettere e parole e possiamo manipolare il tratto dei glifi per aumentare il contrasto, aiutando i lettori con disabilità visive e dislessia. Possiamo anche regolare automaticamente il contrasto del testo usando le variabili CSS, dando all'utente il suo tema preferito.

Tutto ciò ci aiuta a costruire una pagina web dinamica la cui leggibilità è ottimizzata in base alle esigenze e preferenze dell'utente. Infine, dato che ogni piccola implementazione o dettaglio tecnologico può fare un'enorme differenza, è comunque essenziale testare le prestazioni di lettura degli utenti utilizzando l'artefatto finale.

Risorse correlate

• "Test della leggibilità del testo di caratteri compatibili con la dislessia", Galliussi, Perondi, Chia, Gerbino, Bernardis (2020)
• "Come gli aspetti visivi possono essere cruciali nell'acquisizione della lettura: il caso intrigante dell'affollamento e della dislessia evolutiva", Gori, Facoetti (2015)