{"id":171,"date":"2024-08-12T16:07:22","date_gmt":"2024-08-12T16:07:22","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=171"},"modified":"2024-08-23T12:10:10","modified_gmt":"2024-08-23T12:10:10","slug":"accessibilita-grandezze-dei-caratteri-e-leggibilita-dei-font","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/accessibilita-grandezze-dei-caratteri-e-leggibilita-dei-font\/","title":{"rendered":"Accessibilit\u00e0: Grandezze dei caratteri e leggibilit\u00e0 dei font"},"content":{"rendered":"

Un aspetto molto importante quando si parla di accessibilit\u00e0 web, e forse uno dei pi\u00f9 trattati, riguarda i caratteri del testo<\/b> delle pagine web.<\/p>\n\n

Leggibilit\u00e0 dei caratteri<\/h2>\n

Iniziamo subito dicendo che la leggibilit\u00e0 <\/b>\u00e8 molto <\/b>importante<\/b>. Esistono dei font che sono pi\u00f9 o meno leggibili, come possiamo facilmente immaginare. Ad esempio, la Pubblica Amministrazione italiana ha scelto Titillium come famiglia di caratteri standard<\/b> per i suoi siti web.<\/p>\n

Altre famiglie di font note per la loro leggibilit\u00e0 sono OpenDyslexic<\/a>, Lexend<\/a>, Lora<\/a>, Roboto<\/a>. Personalmente suggerisco di considerare anche Arial, Lato e Montserrat.<\/p>\n

In CSS<\/b> esiste una propriet\u00e0 chiamata text-rendering<\/a> che pu\u00f2 essere impostata su optimizeLegibility<\/b>, molto probabilmente non noteremo grandi differenze ma \u00e8 bene conoscerla e possibilmente impostarla come default.<\/p>\n

Grandezza dei caratteri<\/h2>\n

Per quanto riguarda la grandezza dei caratteri<\/b>, le linee guida WCAG<\/b> non indicano dei criteri specifici, quindi quello che possiamo tenere a mente \u00e8 che l\u2019unica indicazione<\/b> riguarda ci\u00f2 che viene considerato \u201clarge scale text\u201d, ad esempio nei criteri sul contrasto colore.<\/p>\n

Il testo di almeno 18pt senza grassetto<\/b> (generalmente 20px) oppure 14pt con il grassetto<\/b>, si pu\u00f2 considerare abbastanza grande come valore di default.<\/p>\n

Un suggerimento utile nello sviluppo di un sito web \u00e8 quello di abituarsi ad usare le unit\u00e0 \u201crem\u201d oppure \u201cem\u201d. La prima fa riferimento al font-size dell\u2019elemento root (generalmente il tag <html> o <body>) mentre la seconda fa riferimento all\u2019elemento parent.<\/p>\n

Quindi, se definiamo in CSS ad esempio:<\/p>\n

html, body { font-size:16px; }<\/code>
\narticle { font-size:1.5rem; }<\/code>
\nheader { font-size:1.1rem; }<\/code>
\nheader nav a { font-size:1.2em; }<\/code><\/p>\n

Avremo una situazione in cui l\u2019article avr\u00e0 un font size di 16 * 1,5 = 24px, che viene definito moltiplicando il font size dell\u2019elemento root<\/b> (16px) con il valore in \u201crem\u201d (1.5), mentre i link della navigazione nella testata avranno un font size di 16 * 1.1 * 1.2 = 21,12px, perch\u00e9 viene moltiplicato prima il valore dell\u2019elemento root (16px) per il valore assegnato all\u2019header (1.1) e poi per il valore (1,2) assegnato al link (tag <a>) che si riferisce al parent pi<\/b>\u00f9 vicino<\/b>, in questo caso <header>.<\/p>\n

Se invece avessimo usato i rem<\/b> anche per il tag <a>, il valore finale sarebbe stato di 16 * 1,2 = 19,2px.<\/p>\n

Criteri di riferimento<\/h2>\n

Queste unit\u00e0 di misura sono molto utili per l\u2019accessibilit\u00e0 perch\u00e9 aiutano a rispettare alcuni criteri del livello AA:<\/p>\n