In questo articolo vedremo come sia possibile dare la possibilità di ridimensionare
il testo delle nostre pagine web grazie ai fogli di stile e Javascript. Un'altra
funzionalità che va a completare, insieme allo Style Switcher per tutti, la personalizzazione delle pagine web da parte dell'utente. In questo
caso la personalizzazione riguarderà soltanto la dimensione del testo. Non è un
argomento totalmente nuovo nella sezione PRO, articoli correlati a questo sono:
- Cambiamo al volo le dimensioni dei font con CSS e Javascript
- Stabilire le dimensioni dei font in un CSS: vantaggi, problemi e soluzioni
- L'arte del testo perfetto con i CSS
Elementi di tipografia per il web
Prima di addentrarci nel vivo dell'articolo, mi è parso utile accennare
ad alcuni principi di tipografia per il Web.
Vari studi hanno dimostrato che un testo leggibile è composto da linee di massimo
60-80 caratteri. Righe molto più lunghe o molto più corte causano difficoltà di
lettura e comprensione. Più i caratteri sono piccoli, maggiore è la difficoltà
di lettura se le righe di testo non sono ben distanziate. La spaziatura tra le
righe è diretta conseguenza della proprietà line-height. Il line-height
ottimale, a parer mio, oscilla tra 1.2 e 1.8, a seconda del font-size
e della lunghezza della riga. Bisogna tener presente che font piccoli e linee
lunghe richiedono line-height maggiore.
Mentre è provato che caratteri serif
risultano molto più leggibili per la carta stampata, per il Web ci sono pareri
discordanti. Personalmente ritengo che per caratteri medio piccoli siano meglio
famiglie sans-serif, mentre per dimensioni maggiori vanno bene sia i serif che
i sans-serif (si veda come introduzione l'articolo I font e la tipografia del testo).
Ultimamente si sta diffondendo l'uso del "Trebuchet MS" tra i font sans-serif.
È un carattere che può andar bene per dimensioni non troppo piccole: a
12 pixel, ad esempio, risulta molto meno leggibile dell'Arial. Per i caratteri
serif, invece, il Georgia può essere una valida alternativa al Times New
Roman.
Un consiglio che mi sento di dare: non eccedere con il numero di font dei vari
elementi di testo in una pagina web. Dovrebbero essere al massimo due. Un'idea
potrebbe essere usare un font serif per gli headings (titoli) e uno sans
per i paragrafi. Un'ultima parola sul colore: si consiglia di assicurarsi che
ci sia sufficiente contrasto tra colore del testo e dello sfondo, e di non usare
colori che affaticano la vista. Quello che bisogna sempre tenere presente realizzando
siti web è che il loro scopo è comunicare.
Prima di concludere questa breve introduzione, ecco alcune valide risorse sulla
tipografia per il web:
- Il capitolo sulla tipografia della Web Style Guide
- Web Typography
- Ipovisione e accessibilità e fruibilità del web
Dimensionamento consistente
tra gli elementi di testo
È importante poter stabilire un dimensionamento proporzionale degli
elementi testuali in una pagina web. I due modi per ottenerlo attraverso i fogli
di stile sono sostanzialmente due: dichiarare la dimensione del testo in percentuale
o in em. Nell'attribuire ad un elemento un font-size in percentuale
ci si riferisce ad una percentuale del font-size del suo contenitore.
Per esempio:
body{font-size: 14px}
h1{font-size: 180%}
L'h1, in tal caso, avrà dimensione pari al 180% del body, ossia
25 pixel.
Gli em, a differenza del percentuale, costituiscono una vera
e propria unità di misura ma per quanto riguarda il font size possono assumere
lo stesso ruolo della regola in percentuale. In pratica, considerando che 1em
corrisponde a 100%, per trasformare percentuali in em basterà dividere per cento.
Ecco l'analogo delle due regole viste qui sopra:
body{font-size: 14px}
h1{font-size: 1.8em}
Ed ecco uno scehema di CSS in cui, stabilita una dimensione di base per il
corpo della pagina, fissiamo le proporzioni per i titoli:
body{
/*qui va la regola per il
font-size*/
font-family: Arial, Helvetica, sans-serif
}
h1,h2,h3,h4,h5,h6{font-family: Bodoni, Georgia, "Times New Roman", Times, serif}
h1{font-size: 200%}
h2{font-size: 170%}
h3{font-size: 140%}
h4{font-size: 120%}
h5{font-size: 100%}
h6{font-size: 80%}
p{line-height: 1.5}
Un'osservazione sulle famiglie di font. Esse vengono definite dalla più "rara"
(a cui verrà data la precedenza se questa è presente sul sistema dell' utente),
alla più diffusa, fino ad arrivare a quella generica di appartenenza. Un ulteriore
spunto per "osare" e dichiarare famiglie di font ricercate proviene da Luxury
Type. Potete trovare un elenco di font con percentuali di distribuzione per
sistema operativo su Visibone
Font Survey.
La via dei pixel
Abbiamo visto come sia possibile ottenere una proporzionalità tra gli elementi
testuali di una pagina HTML. Fissando la misura del font del body in pixel, avremo
automaticamente definito le dimensioni degli elementi principali. Ecco le regole
tipografiche:
body{ font: 12px Arial, Helvetica, sans-serif}
h1,h2,h3,h4,h5,h6{font-family: Georgia,"Times New Roman", Times, serif}
h1{font-size: 200%}
h2{font-size: 170%}
h3{font-size: 140%}
h4{font-size: 120%}
h5{font-size: 100%}
h6{font-size: 80%}
p{line-height: 1.5}
Personalmente ritengo che un approccio in pixel, combinato con la possibilità
da parte dell' utente di ridimensionare i caratteri attraverso la pagina stessa
e non le impostazioni del browser possa costituire una buona soluzione per
l'usabilità.
Javascript e cookie per personalizzare il testo
Finalmente arriviamo all'esempio dell'articolo.
Si tratta di due pagine in cui il testo è ridimensionabile grazie a Javascript,
e la preferenza dell'utente viene memorizzata attraverso un cookie.
Ricordo che un cookie è un piccolo file di testo che memorizza sul computer dell'utente,
in questo caso, la dimensione del testo preferito, così da poter mantenere questa
informazione durante l'intera navigazione tra le pagine del sito e le visite successive.
Mentre un carattere di 12 pixel può risultare ben leggibile a basse risoluzioni,
a risoluzioni più elevate può risultare troppo piccolo. Una semplice funzione
Javascript, che ho chiamato SetFontSize, può andare ad intervenire
sul font-size del body, e gli altri elementi si ridimensionaranno
di conseguenza. Vediamo la chiamata attraverso i link all'interno della pagina.
Questa è un esempio con la soluzione testuale, in cui i link vengono per il ridimensionamento
vengono presentati attraverso del testo:
<div id="controller">
<h4>Dimensioni del testo</h4>
<a href="javascript:SetFontSize('12px')">Carattere piccolo</a>
<a href="javascript:SetFontSize('14px')">Carattere medio</a>
<a href="javascript:SetFontSize('16px')">Carattere grande</a>
</div>
Da notare che nel codice sopra, come nell'esempio, le tre dimensioni sono 12,
14 e 16 pixel, ma che modificando il testo tra singoli apici della chiamata a
funzione è possibile impostare la dimensione come più vi piace.
Ho preparato una
pagina con il codice Javascript da consultare online. Lo script contiene la
funzione SetFontSize e due funzioni per la gestione dei cookie. Il
principio di funzionamento è abbastanza semplice. Al caricamento della pagina
si reperisce un eventuale cookie. Se questo è presente, l'utente ha già impostato
la sua preferenza, che verrà attuata di conseguenza.
Nel momento in cui l'utente clicca su uno dei link per il dimensionamento
del testo, viene scritto il cookie e impostato il font-size del body.
Ricordo che è importante informare chi ci legge, attraverso una pagina apposita,
che è possibile intervenire sulla dimensione del testo della pagina, e che Javascript
e cookie dovranno essere abilititati. Anche in questo caso, come per lo style
switcher, un valido esempio è il sito del
comune di Torino.
Lettere come link per ridimensionare il testo
La soluzione che vedremo consente di ridimensionare il testo attraverso i classici
"bottoncini" con le lettere a misura, che stanno ormai diventando una metafora
comune nel web. Nell'esempio, costitutito da due pagine
così da poter mostrare che la preferenza viene mantenuta tra una pagina e l'altra,
ho realizzato i bottoncini attraverso testo e CSS. Vediamo l'HTML dell'esempio:
<div id="controller">
<a id="size1" href="javascript:SetFontSize('12px')" title="imposta il testo piccolo">T</a>
<a id="size2" href="javascript:SetFontSize('14px')" title="imposta il testo medio">T</a>
<a id="size3" href="javascript:SetFontSize('16px')" title="imposta il testo grande">T</a>
</div>
Mi raccomando in tal caso di non dimenticare l'attributo title
che è fondamentale per orientare l'utente. Ovviamente si possono usare anche le
immagini (in questo caso oltre al title, è obbligatorio l'attributo alt)
o con il testo esteso. Ho preferito farlo con i CSS dato che questa è probabilmente
la soluzione più difficile da implementare, e chi la vorrà riutilizzare la potrà
trovare già pronta nel pacchetto zip contenente le due pagine di esempio, il codice
Javascript e i CSS. Sostanzialmente il testo delle tre T non è soggetto
al dimensionamento dato che è dimensionato assolutamente, e cioè in pixel.
Come implementare lo script
Per prima cosa sarà necessario impostare un dimensionamento proporzionale del
font nel CSS, per esempio seguendo l'esempio di questo articolo. Si attribuisce
al body la misura di base, nal caso 12px, e agli altri elementi,
dove necessario, un dimensionamento relativo in percentuale o in em. Poi andrà
linkato nella sezione head delle pagine HTML il file Javascript:
<script type="text/javascript" src="fontSize.js"></script>
Infine, basterà aggiungere i link per impostare la dimensione nell'HTML, e
il gioco è fatto.
Scarica lo zip con il codice e gli esempi.
