13 font "di facile lettura" e tre punti chiave su come sceglierli.

2024/10/29

Sul sito webCaratteri di facile letturaLa leggibilità dei caratteri ha un impatto significativo sull'esperienza dell'utente nel web design.

In particolare, la pratica di scegliere e utilizzare font appropriati in termini di accessibilità del web,È essenziale soddisfare le linee guida WCAG e garantire che il sito web sia di facile utilizzo per tutti gli utenti.。

I due fattori seguenti sono importanti per la leggibilità di un font

(i) Visibilità.
(ii) Accessibilità.

Visibilità significa che la dimensione dei caratteri, la spaziatura e il contrasto sono appropriati e che il testo è chiaramente riconoscibile, mentre accessibilità significa che il carattere è facile da leggere, soprattutto per gli utenti ipovedenti e per quelli con difficoltà di lettura.Scegliendo un font che combina entrambi questi elementi, gli utenti possono comprendere agevolmente il contenuto senza alcuno sforzo visivo.

In questo articolo,13 caratteri tipici di facile lettura.I progettisti e gli ingegneri che devono produrre contenuti altamente accessibili sono invitati a leggere questo articolo.

13 font di facile lettura che migliorano l'accessibilità.

Per migliorare l'accessibilità, è importante innanzitutto la scelta dei caratteri utilizzati nel design,Caratteri di facile lettura in termini di accessibilità.Di seguito sono riportate 13 font rappresentative dell'argomento.

◆13 caratteri accessibili e di facile lettura

Font UD: font di design universale (da 1) a (4)

Vedere i punti da (1) a (4) (in verde) nella tabella precedente.I font con la sigla "UD" sono chiamati collettivamente "UD fonts: universal design fonts".

Il font UD è,Caratteri sviluppati per essere facilmente leggibili da tutti gli utenti.In particolare,Il design è caratterizzato da forme concise delle lettere e da una facile distinzione visiva, in considerazione degli utenti ipovedenti e di quelli con difficoltà di lettura.。

I font UD sono utilizzati, ad esempio, nelle istituzioni pubbliche in Giappone, nella segnaletica delle stazioni e nel settore dell'istruzione, e la loro versatilità li rende efficaci anche nel web design: l'uso dei font UD può migliorare l'accessibilità di un intero sito.

Font 1: UD Shingo.

Carattere UD gotico, altamente leggibile, soprattuttoStrutture pubbliche e segnaletica informativa in Giappone.È ampiamente adottato in diversi contesti, tra cui

Font (2) UD Marugo

In carattere gotico rotondo per un'impressione più morbida,Materiali per bambini e situazioni in cui è richiesta una certa familiarità.Viene utilizzato nei seguenti ambiti: è meno impegnativo dal punto di vista visivo e più facile da riconoscere.

Font (iii) Hiragino UD Mincho.

Il carattere Mincho UD, elegante e leggibile, è stato progettato pensando agli anziani e agli ipovedenti,Visivamente leggibile mantenendo la bellezza del carattere MinchoCarattere.

Carattere 4: FOT-UD Kakugo.

Le forme chiare delle lettere, lo spessore e la spaziatura regolati rendono il testo facile da leggere per tutti, soprattutto per le persone con disabilità visive, ed è particolarmente facile da leggere per le persone con disabilità visive.Istituzioni pubbliche, strutture sanitarie e settore dell'istruzione.Si raccomanda di utilizzarli in luoghi come

Font di facile lettura diversi dai font UD (⑤-⑬)

Oltre ai font UD, esistono numerosi altri font ad alta visibilità e accessibilità, anche se non sono specificamente destinati a utenti con determinate disabilità,Hanno un'eccellente visibilità e versatilità e vengono utilizzati in una varietà di ambienti digitali e stampati.

Questi caratteri, utilizzati in molti siti web e applicazioni, sono un elemento fondamentale per rendere i contenuti confortevoli e facili da leggere per tutti gli utenti.Se utilizzato correttamente come parte del design, può migliorare l'UX complessiva del sito.

Carattere 5: Yasashisa Gothic.

carattere liberoIl carattere ha la reputazione di essere facile da leggere, ma molto leggibile, con linee spesse e una quantità ragionevole di spazio tra le lettere, che lo rendono visivamente meno faticoso,Materiali didattici e web design per bambiniUtilizzato anche in.

Carattere 6: Genno Kaku Gothic.

È un font open-source sviluppato congiuntamente da Adobe e Google. È un font gotico ad alta leggibilità, con un design semplice, ma progettato per la leggibilità,È adatto al web design e alle applicazioni globali, poiché è multilingue e giapponese.

Font (vii) Noto Sans JP

Come il Genno Kaku Gothic, questo font open source è stato sviluppato da Google e si concentra sulla leggibilità del giapponese; mantiene un design coerente in molte lingue, compreso il giapponese,Web, applicazioni e materiale stampatoÈ ampiamente utilizzato in settori quali

Font (viii) Meirio.

Font standard a partire da Windows Vista.Il carattere è stato sviluppato come "font", con particolare attenzione alla leggibilità su display: la spaziatura delle lettere viene regolata automaticamente, migliorando notevolmente la leggibilità su schermo.Ottimizzazione dell'interfaccia utente del sito web e del software, in particolare per quanto riguarda la chiarezza e la facilità di lettura sui monitor.Questo lo rende eccellente in termini di accessibilità al web.

Font (ix) Arial.

È stato a lungo utilizzato come font standard in Windows ed è oraCaratteri ampiamente utilizzati in tutto il mondoAltamente visibile,Viene utilizzato frequentemente, soprattutto nei media digitali e stampati.È caratterizzato da un design semplice e viene utilizzato in molti media come font di facile lettura.

Font 10 Verdana.

Caratteri progettati per essere facilmente leggibili in piccole dimensioniLa spaziatura tra i caratteri è ampia e viene spesso utilizzata nei contenuti web e digitali, dove sono richieste un'elevata visibilità e leggibilità sullo schermo.

Font (11) Tahoma.

Un carattere simile all'Arial e al Verdana, con una spaziatura stretta tra le lettere ma con un'eccellente leggibilità, in particolareLarghezza del testo uniforme, progettata per facilitare la visualizzazione anche su schermi con spazio limitato.Di seguito viene riportata una sintesi dei risultati dello studio.

Font ⑫Dyslexie.

La dislessia è,Caratteri progettati per persone con disabilità di lettura (dislessia).Le lettere sono: ogni lettera ha una forma unica, che garantisce la leggibilità rendendo difficile confondere le lettere.

Font⑬OpenDyslexic.

Come Dyslexie, è un font open source progettato per le persone con difficoltà di lettura.La parte inferiore delle lettere è stata progettata per renderle stabili e facilmente leggibili.Il testo è progettato per essere letto in modo scorrevole.

Esistono molti altri font accessibili e leggibili oltre a questi, compresi i font UD.Selezionare il font giusto per l'occasione, il mezzo e le esigenze dell'utente in cui viene utilizzato.è importante.

La prossima sezione spiegherà esattamente quali sono i tipi di carattere "di facile lettura".

La "visibilità" e l'"accessibilità" sono importanti per la leggibilità dei caratteri.

La chiave dei "caratteri di facile lettura" èVisibilità e accessibilità.Is.Entrambi sono concetti importanti legati ai font, ma con connotazioni diverse.。

visibilità

Cos'è la visibilità,Quanto è "chiaro" e "leggibile" il testo.Per font ad alta visibilità si intende un font che ha una forma chiara delle lettere, è facile da leggere per chiunque e può essere riconosciuto rapidamente perché le lettere sono posizionate a una distanza ragionevole l'una dall'altra,I caratteri non troppo spessi, non troppo sottili e con una forma chiara sono molto visibili.

accessibilità

L'accessibilità riguarda il fatto che i caratteri e il testo siano accessibili a tutti, vale a direÈ facile da leggere e da capire per tutti?".si riferisce al comfort di tutti gli utenti, compresi gli ipovedenti, gli utenti con difficoltà di lettura e gli anziani.

I font accessibili non sono solo visibili, ma anche facili da usare per alcuni utenti,È stato progettato per essere facilmente compatibile con gli screen reader e altri strumenti di supporto.

Combinare visibilità e accessibilità in modo che il carattere sia accessibile e facile da leggere per molti utenti.Entrambi sono considerazioni centrali nella scelta dei caratteri e hanno un impatto significativo sulla qualità del design web e del materiale stampato.

La sezione seguente spiega quali elementi del carattere sono necessari per garantire la visibilità e l'accessibilità.

Due elementi fondamentali di un font leggibile

Qui,Elementi di base dei font per garantire visibilità e accessibilità.Questa sezione spiega i due fattori principali che sono importanti.

Elemento 1) Dimensione del carattere.

La dimensione dei caratteri ha un impatto significativo sulla facilità di lettura del testo; un testo troppo piccolo può affaticare gli occhi, soprattutto per gli ipovedenti e gli anziani.

Generale,Sul web, si raccomanda una dimensione minima di 16px (pixel).Vedere di seguito le diverse dimensioni di ciascun formato px.

Dimensioni diverse dei caratteri sul web

10px	La dimensione del carattere per questo testo è 10px.
12px	La dimensione del carattere per questo testo è 12px.
14px	La dimensione del carattere per questo testo è 14px.
16px (dimensione minima consigliata)	La dimensione del carattere per questo testo è di 16px.
18px	La dimensione del carattere per questo testo è di 18px.
20px	La dimensione del carattere per questo testo è di 20px.

Sul sito web, ad esempio,Usare il grassetto a 20px per i titoli, a 16px per il testo del corpo, ecc.è generalmente uno dei fattori più importanti in termini di leggibilità, in quanto la scelta della giusta dimensione dei caratteri può garantire una leggibilità confortevole per tutti.

Elemento (ii) Carattere tipografico.

I caratteri tipografici dei font includono principalmenteForme sans-serif e serifCi sono, per comodità,Gothic e Mincho in caratteri giapponesi.Ogni carattere è compatibile con applicazioni e situazioni diverse.

◆ corpi sans-serif e serif

sans serif	stile serif

Il corpo sans-serif è,Design semplice, senza decorazioni sui bordi delle lettere.In particolare.Per un'elevata visibilità in ambienti digitali e dimensioni ridottee sono spesso utilizzati nei siti web e nelle applicazioni mobili.Nelle visualizzazioni su schermo si utilizzano comunemente caratteri sans-serif.

I corpi serif, d'altra parte,Presenta piccole decorazioni (serif) ai bordi delle lettere ed è adatto a materiale stampato e a testi più lunghi.Lo stile serif dà un'impressione di fluidità e di ritmo in tutto il testo,Spesso utilizzato per occasioni tradizionali e formaliTuttavia,La visibilità a piccole dimensioni sul display può essere scarsa.

Quando si considera l'accessibilità in ambienti digitali come i siti web, il sans-serif (gotico) è più adatto; tuttavia, quando si tratta di lettura prolungata e leggibilità del testo, come ad esempio nei libri, il design fluido e confortevole del serif (mincho) è d'aiuto.Ad esempio, Hiragino UD Mincho è progettato con chiari dettagli Mincho per garantire l'accessibilità alle persone con disabilità visive, offrendo al contempo un aspetto gradevole e un senso di tranquillità.

Pertanto, a seconda del mezzo e della situazione, è importante scegliere un carattere che migliori l'accessibilità mantenendo il tono e l'impressione generale del documento, non solo la visibilità.

Tre punti chiave su come scegliere un font di facile lettura in termini di accessibilità del web.

Nella sezione seguente, ci concentreremo sull'accessibilità del web e spiegheremo tre punti chiave su come scegliere o utilizzare font di facile lettura.

Punto 1: si basa sulle linee guida WCAG.

WCAG（Linee guida per l'accessibilità dei contenuti web）は、Linee guida stabilite per garantire che i contenuti web siano accessibili a tutti.Nella scelta dei font per l'accessibilità del web,È importante seguire gli standard stabiliti nelle WCAG.。

Un esempio di linea guida è che il rapporto di contrasto tra i colori dello sfondo e del testo deve essere di almeno 4,5:1, in modo che gli utenti con disabilità visive o con problemi di visione a colori possano leggere chiaramente il testo.

Inoltre, in genere si raccomanda l'uso del sans-serif (gotico), che è più leggibile su un display rispetto al serif (ming-cho).

Nella selezione e nell'uso dei caratteri,Il rispetto di queste linee guida delle WCAG garantirà che il sito web sia facile da usare per tutti.Per ulteriori informazioni sulle WCAG, consultare il seguente articolo, che può essere letto insieme a questo.

Articoli correlati:Le WCAG sono uno standard internazionale per l'accessibilità basato su quattro principi

Punto (ii) Garantire la scalabilità (estensibilità) del font.

Per l'accessibilità del web è importante che i font siano scalabili, cioè che possano essere utilizzati in diversi formati, tra cui: a) per la prima volta, b) per la prima volta, c) per la prima volta e d) per la prima volta,Gli utenti devono essere in grado di regolare le dimensioni del testo utilizzando le impostazioni del browser e le funzioni di ingrandimento.è necessario.

Quando si specificano le dimensioni dei caratteri nella costruzione di un sito web, ad esempio nei CSS, utilizzare le unità relative 'em' e 'rem' invece dell'unità assoluta 'px', in modo che gli utenti possano modificare liberamente le dimensioni del testo.

Inoltre,Caratteri progettati per evitare la corruzione della visualizzazione su diversi dispositivi.sono più scalabili: ad esempio, un sito web ben strutturato su un PC deve poter essere visualizzato su uno schermo più piccolo, come quello di uno smartphone o di un tablet, senza distorcere o corrompere i caratteri.

Punto 3) È compatibile con gli screen reader?

Utilizzato dagli utenti ipovedenti per accedere ai contenuti web.Caratteri con uno "screen reader" perfettamente funzionante.È inoltre importante scegliere il

Tuttavia, non esistono specifiche chiare per il supporto o il non supporto dei font da parte degli screen reader,I font eccessivamente decorativi o i font speciali contenenti simboli o pittogrammi potrebbero non essere riconosciuti correttamente dagli screen reader.Pertanto,L'uso di caratteri semplici sans-serif o standard (ad esempio Arial, Verdana) riduce il rischio di confusione durante la lettura ad alta voce con gli screen reader.。

Quindi, utilizzando la struttura appropriata della pagina, il tagging HTML o il testo alternativo, ecc.

Articoli correlati:Spiegazione di come si usano gli screen reader e cinque strumenti tipici.

A partire da scelte di carattere come queste,Modi specifici per supportare l'accessibilità del web in base alle WCAGPer ulteriori informazioni su argomenti qualiGuida all'implementazione dell'accessibilità web", pubblicata da Digital Agency.Si raccomanda vivamente ai progettisti e agli ingegneri di darvi un'occhiata, in quanto è riassunto in dettaglio nella sezione seguente.

Riferimento:Guida all'implementazione dell'accessibilità del web.

Passiamo ora a discutere le tecniche specifiche per migliorare la leggibilità dei caratteri.

Tre tecniche pratiche per migliorare la leggibilità

Ci sono alcuni punti importanti da tenere a mente quando si usano i font: qui presentiamo tre tecniche pratiche per migliorare la leggibilità dei font e spieghiamo quali innovazioni specifiche possono aiutare.

Tecnica 1: regolazione dell'interlinea e della spaziatura delle lettere.

Una corretta regolazione dell'interlinea e della spaziatura delle lettere è un elemento che può migliorare notevolmente la leggibilità del testo.Se l'interlinea è troppo stretta, il testo viene bloccato, rendendo difficile il movimento dell'occhio.Questo rende la lettura più pesante e difficile per il lettore. al contrario,Se le righe sono troppo larghe, il testo perde coerenza e risulta difficile concentrarsi sulla lettura.。

Di seguito è riportato un testo con lo stesso formato di carattere (Mayrio), con la sola modifica dell'interlinea e dell'interlinea delle lettere.

◆ Differenze di leggibilità dovute all'interlinea e alla spaziatura dei caratteri

interlinea e spaziatura dei caratteri.appropriatofrase nota	interlinea e spaziatura dei caratteri.impropriofrase nota

Generale,Idealmente, l'interlinea dovrebbe essere da 1,5 a 2x.（Analogamente, è necessario regolare la spaziatura dei caratteri (kerning).Se le lettere sono troppo vicine l'una all'altra, appaiono sfocate e la visibilità è ridotta, soprattutto con caratteri di piccole dimensioni.Un'adeguata spaziatura delle lettere aiuta a mantenere la leggibilità, distinguendo chiaramente le singole lettere.

Con molto spazio tra le righe e i caratteri, oltre a interruzioni di riga e rientri appropriati, il carattere, la leggibilità e la facilità di lettura del testo vengono ulteriormente migliorati.

Tecnica 2: Contrasto e schemi di colore.

Il contrasto tra il testo e lo sfondo è un fattore determinante per la visibilità: un contrasto elevato, ad esempio una combinazione di testo nero e sfondo bianco, è il più visibile e facile da leggere per tutti; al contrario,Se i colori dello sfondo e del testo sono vicini tra loro o in combinazioni a basso contrasto (ad esempio, testo bianco su sfondo grigio chiaro), il testo sarà difficile da vedere eIl contenuto del display può essere difficile da capire, soprattutto per gli utenti ipovedenti o con altre disabilità visive.

Di seguito è riportato un confronto tra immagini con la stessa tonalità di colore ma con diversi rapporti di contrasto,È evidente che i rapporti di contrasto elevati sono più facili da vedere.。

◆ Differenze di visibilità dovute al rapporto di contrasto

È inoltre importante scegliere uno schema di colori che tenga conto degli utenti con caratteristiche di visione a colori, ad esempio evitando combinazioni di rosso e verde, e seguendo le linee guida WCAG,Rapporto di contrasto di 4,5:1 o superioreMantenete la combinazione di colori accessibile, poiché la combinazione di colori complessiva è un fattore che migliora la leggibilità del carattere.

Quando si progetta mantenendo il rapporto di contrasto appropriato, uno strumento chiamato 'contrast checker' può essere uno strumento efficace.Un utile strumento di controllo del contrasto è descritto nel seguente articolo, che potrebbe essere di vostro interesse.

Articoli correlati:Cinque "controllori di contrasto" facili da usare per i responsabili.

Tecnica 3) Coerenza e uso dei caratteri.

La coerenza dei caratteri nei siti web e nei materiali stampati è importante per una buona comprensione delle informazioni da parte del lettore.L'uso estensivo di caratteri diversi in tutto il testo può causare confusione visiva e contribuire a rendere il testo difficile da leggere.In particolare, l'uso di caratteri coerenti per i contenuti principali e le intestazioni facilita la comprensione del flusso di informazioni e il mantenimento di un design unitario.

D'altra parte, può essere efficace utilizzare caratteri diversi, ad esempio,L'uso di caratteri diversi per i titoli e per il testo del corpo crea una distinzione visiva e facilita l'individuazione delle informazioni importanti.Tuttavia,Un numero eccessivo di caratteri può ridurre la visibilità e può anche ostacolare una comprensione fluida.È importante scegliere con attenzione.

Ora che abbiamo discusso in dettaglio dei font accessibili, diamo un'occhiata ad alcuni siti web che ne fanno effettivamente uso.

Tre siti web che mettono in pratica i "caratteri di facile lettura".

In questo caso, grazie a caratteri di facile lettura con un'eccellente visibilità e accessibilità,Tre siti web che stanno migliorando l'accessibilità complessiva del sito.Questi siti sono riconosciuti per la scelta di font e design accessibili.

Sito 1: Agenzia digitale.

Il sito ufficiale dell'Agenzia Digitale è stato progettato con un occhio di riguardo all'accessibilità; il font è,Utilizza Noto Sans JP, un font open source che tiene conto della visibilità e dell'accessibilità.

Inoltre, sono stati implementati diversi miglioramenti per l'accessibilità, come la struttura delle intestazioni per gli utenti di screen reader e la promozione del supporto per la lettura ad alta voce dei file PDF; queste innovazioni garantiscono che anche gli utenti ipovedenti possano utilizzare comodamente il sito web.

Sito ufficiale dell'Agenzia digitale.

https://www.digital.go.jp/

Sito 2: Apple

Il sito ufficiale di Apple, che enfatizza l'accessibilità dei suoi prodotti e servizi, è un ottimo esempio di sito che molti utenti considerano facile da navigare.Schemi di colore e dimensioni dei caratteri appropriati, nonché margini adeguati.La visibilità e l'accessibilità sono tenute in piena considerazione dalla

Il design semplice e chiaro, basato su uno schema di colori monocromatici con un elevato rapporto di contrasto e un carattere tipografico sans serif (gotico), fornisce informazioni sui prodotti e sull'assistenza in una forma molto leggibile.

Sito web ufficiale di Apple

https://support.apple.com/ja-jp/accessibility

Sito (iii) BBC.

Il sito web della BBC ha prestato molta attenzione a garantire la leggibilità del carattere nel fornire i contenuti delle notizie.Il carattere utilizzato è un font originale chiamato "Reith", che dà un'impressione fomale, garantendo al tempo stesso leggibilità e affidabilità.

La BBC è anche un sito esemplare in termini di supporto all'accessibilità in linea con gli standard WCAG.

Sito ufficiale della BBC

https://www.bbc.com/

sintesi

La chiave per scegliere un font leggibile è aumentare la visibilità e l'accessibilità allo stesso tempo.L'alta visibilità garantisce che tutti possano riconoscere immediatamente il testo e accedere alle informazioni senza problemi, mentre l'accessibilità assicura che gli utenti con una vista limitata, con disabilità di lettura o anziani possano leggere comodamente il testo.

La prima cosa su cui progettisti e ingegneri dovrebbero lavorare in futuro è,Selezione dei caratteri in base alle linee guida WCAG.È inoltre importante progettare il testo in modo che non si rompa su diversi dispositivi.

Per di più,Verifica attraverso la convalida dello screen reader, il test degli utenti e il test A/B per verificare la facilità di lettura dei caratteri da parte degli utenti.e di promuovere miglioramenti appropriati.

È importante che i siti web futuri siano consapevoli delle scelte di caratteri accessibili, in modo che tutti gli utenti possano utilizzare comodamente i siti web e le applicazioni.