Web Typography

L’arte & la scienza


Introduzione

In questa breve guida vedremo come formattare i contenuti testuali di una pagina, come realizzare il ritmo verticale di un testo, introdurremo i layout a griglia e parlaremo di quello che sarà il futuro della tipografia web, i web fonts. Tutto questo prestando sempre attenzione agli aspetti di accessibilità.

Ma quali caratteristiche deve avere un testo per essere considerato accessibile?
Innanzitutto è necessario utilizzare misure relative (em, percentuali) per impostare testi ridimensionabili in base alle esigenze degli utenti.
Come riportato nell'enunciato del requisito n.12 della Legge Stanca,

“La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri”

I contenuti devono quindi poter essere ingranditi o dimininuiti dall'utente, senza conseguente perdita di informazione o sovrapposizioni di elementi. Emergono però due dubbi dall'enunciato.

Il primo riguarda il tipo di layout da utilizzare. Il testo riportato sembra alludere all'uso di layout liquidi o meglio elastici, senza tuttavia indicare chiaramente la strada da seguire. Nella comunità di sviluppo italiana le correnti di pensiero sono diverse e la decisione finale viene rimandata allo sviluppatore, che dovrà valutare sulla base dei pro e contro di ciascuna metodologia di layout presentate nelle scorse lezioni. Tuttavia è parere comune che un buon test da svolgere sia la visualizzazione delle pagine con IE6, caratteri molto grandi, ad una risoluzione di 800x600.

Un altro dubbio riguarda invece i fattori d’ingrandimento o di riduzione dei caratteri da considerare in fase di sviluppo. Un metodo utilizzato per verificare la robustezza del design realizzato è quello di testarlo con caratteri ingranditi del 200% e caratteri rimpiccioliti del 50% rispetto alla dimensione base scelta. Tali valori di ridimensionamento sono stati presi come riferimento anche dalle WCAG 2.0 come limiti oltre i quali risulta impossibile, anche per i migliori designer, garantire la piena leggibilità dei contenuti.
Vedremo come calcolare la dimensione dei testi in em, secondo quello che viene chiamato il "62.5%" hack proposto dal web designer Richard Butter.

In secondo luogo, l'accessibilità di un testo può essere migliorata attraverso l'uso semantico degli elementi messi a disposizione dal codice di markup: i tag <h1>-<h6> per una corretta struttura logica delle sezioni; i <p> per i paragrafi; <q> per le citazioni all'interno di altri elementi; <blockquote> per blocchi consecutivi di testo citato; <cite> per marcare un riferimento a una fonte (un libro, un autore, una ricerca, ecc...)



luca.uliana84@gmail.com