Testo a misura di utente con CSS e Javascript

Ridimensionamento semplice dei caratteri

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:

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:


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.


I Video di HTML.it

Andrea Provaglio

L’adozione delle metodologie Agile in Italia, consigli pratici per piccoli team di sviluppo.