Come dimensionare il testo con i CSS

Questa è la traduzione dell'articolo How to Size Text in CSS di Richard Rutter, pubblicato originariamente su A List Apart il 20 novembre 2007. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

Abbiamo assistito nel corso dell'ultimo anno ad un rinnovato interesse per la tipografia sul web, con diversi articoli e relazioni in conferenze che hanno presentato tecniche e teorie interessanti.

Una nozione che torna spesso in questi interventi è che la buona tipografia richiede un controllo accurato delle dimensioni del testo e dei valori di interlinea (line-height). Ma questo è il web: è un medium speciale in cui il lettore può avere quasi lo stesso controllo sul testo del designer. Ciò implica che il testo sul web, pur ubbidendo ai desideri del designer, deve anche poter essere ridimensionabile sui diversi browser e sulle diverse piattaforme.

In questo articolo tenteremo di riconciliare le esigenze in termini di accuratezza di resa del designer con la necessità dell'utente di ridimensionare il testo in base ai suoi bisogni. Tenteremo di arrivare alla definizione di buone pratiche che soddisfino entrambi e che funzionino sui diversi browser e piattaforme.

Arriveremo al traguardo finale seguendo il metodo tradizionale del 'prova e correggi'. Con particolare riguardo per il lavoro pionieristico di Oweb Briggs del 2002, ho creato un set di prove con 6 iterazioni e 161 screenshot.

La suite usata per i test

Il contenuto usato per i test è stato un layout a due colonne con il corpo principale sulla sinistra e una barra laterale sulla destra. Il testo è stato definito in Arial per avere una consistenza di resa su browser e piattaforme diverse.

I browser usati sono stati Safari 2, Firefox 2 e Opera 9.5 su sistema operativo Mac OS X, Internet Explorer 6 e 7 su sistema operativo Windows XP con ClearType attivato. Non è chiaramente una lista esaustiva dei browser disponibili, e nemmeno dei sistemi operativi o dei motori di rendering, ma copre la stragrande maggioranza dell'utenza.

Ciascun sistema operativo e browser sono stati eseguiti con le impostazioni di default. Ogni iterazione è stata testata per vedere come ogni browser rendeva il testo a dimensioni piccole, medie, grandi e al massimo, con livelli di zoom del 90%, 100%, 110% e 120%.

Il test di base

Prima di tutto è stato necessario verificare che i browser testati fornissero una base comune da cui partire. Il test di base mostra che in ogni browser la misura di default dei caratteri è di 16px senza l'applicazione di stili (a parte quelli di default del browser). Il testo, inoltre, scala in maniera consistente in tutti i casi.

Iterazione 1: dimensionare il testo in pixel

La misura di default vista nel test di base è un buon punto di partenza, ma per la maggior parte delle persone (designer, clienti e utenti) 16px è una dimensione troppo grande per il testo presente nel corpo della pagina. Nel nostro esempio le dimensioni del corpo principale sono state allora ridotte a 14px, quelle della barra laterale a 12px. Ecco il codice CSS usato in questa prima batteria di test:

Il risultato è che Safari e Firefox possono ridimensionare ancora il testo, mentre IE6 e IE7 no. Il testo può essere ridimensionato su IE7 e Opera usando lo zoom di pagina, che ingrandisce il layout della pagina stessa, compresi il testo e le immagini presenti al suo interno.

Iterazione2 - Dimensionare il testo in em

Sebbene le statistiche sull'uso dei browser siano diverse da sito a sito e sebbene tali statistiche siano spesso costruite sulla sabbia, non è sbagliato dire che IE6 è ancora utilizzato da molte persone. Impostare il testo in pixel, dunque, significherebbe lasciare molta gente senza la possibilità di ridimensionare il testo. E a ciò si potrebbe aggiungere l'argomento che gli utenti di IE7 dovrebbero avere la possibilità di ridimensionare il testo senza usare la funzione di zoom.

La prossima unità di test userà il dimensionamento del testo in em. L'em è una vera unità tipografica, raccomandata dal W3C, e permette un'ottima precisione. Partendo dalla misura di default di 16px, gli stili che seguono dovrebbero restituire la misura del testo desiderata e corrispondente:

I risultati mostrano che, su tutti i browser, il testo impostato sulle dimensioni medie è reso in maniera identica al testo dimensionato in pixel. Dimostrano pure i risultati che il testo definito in em può essere facilmente ridimensionato in tutti i browser. IE6 e IE7, però, esagerano in maniera inaccettabile le piccolezza e la grandezza del font quando si rimpicciolisce o si ingrandisce.

Iterazione 3 - Body dimensionato in percentuale

Per corrreggere questo fenomeno su IE6 e IE7 si può impostare la misura del testo sul body in percentuale. Mantenendo gli em per il nostro contenuto, il test è stato svolto con i seguenti stili:

I risultati mostrano che le differenze di resa quando si ridimensiona il testo con le impostazioni più piccole e più grandi su IE6 e IE7 sono ora meno evidenti. Significa quindi che ora tutti i browser rendono il testo ad un'identica misura usando l'impostazione media e che tutti lo ridimensionano in maniera consistente.

Iterazione 4 - Impostare il line-height in pixel

Alcuni recenti articoli sulla tipografia per il web come Setting Type on the Web to a Baseline Grid (pubblicato su A List Apart nell'aprile del 2007) affermano che una buona tipografia richiede una griglia verticale, cioè un solido ritmo verticale ottenuto con un line-height consistente e misurato. La chiave per comprendere il tutto è che il line-height dovrebbe essere lo stesso a prescindere dalla dimensione del testo (così che il line-height, o la griglia verticale, rimanga consistente, a prescindere dal font-size).

Per il nostro esempio un buon line-height è di 18px. Lo aggiungiamo al body in questo modo:

I risultati mostrano che il line-height di 18px è ereditato da tutto il testo presente nella pagina. Si noti come il testo della barra laterale abbia lo stesso regolare ritmo verticale della parte principale. Specificare un unità (in questo caso px) quando si imposta il line-height fa sì che il valore sia ereditato su tutta la pagina. Se invece si usa un valore senza unità, si eredita il moltiplicatore, il che risulta in un line-height reso proporzionalmente rispetto alla misura del testo, fatto che spezza il ritmo verticale.

Purtroppo i risultati mostrano come il line-height di 18px non scala quando si ridimensiona il testo su IE6 e IE7: quando si impostano le dimensioni più grandi il testo è completamente rovinato.

Iterazione 5 - impostare il line-height in em

Dal momento che i pixel non funzionano bene nel caso visto in precedenza, torniamo ad usare gli em. Ripetendo la logica applicata in precedenza impostiamo queti stili:

I risultati mostrano un testo ridimensionato in maniera consistente e accurata, insieme al line-height, su tutti i browser. Perfetto. O quasi.

Iterazione 6 - il problema del monospace su Safari

Osservando attentamente, si nota un problema sugli screenshot relativi a Safari: il font monospace incluso nel corpo principale del documento è reso in maniera inconsistente. Per il testo definito in pixel, Safari rende il font monospace alla stessa misura del testo a dimensione proporzianale che lo circonda. Quando il testo è definito in em, però, Safari rende il font monospace con una dimensione troppo piccola rispetto al testo che lo circonda.

Si può decidere che sia un difetto con cui i nostri lettori possano convivere senza problemi. Per chi invece voglia un controllo assoluto su tutto esiste un modo per correggere il tutto: basta impostare il testo in pixel per Safari.

Il codice che segue aggiunge un commento condizionale con cui si imposta il font monospace in pixel su tutti i browser tranne che su IE6 e IE7 (si noti la sintassi [if !IE] con cui diciamo a IE di ignorare le regole che seguono):

I risultati mostrano ora un testo e un line-height ridimensionati in maniera consistente su tutti i browser, incluso il testo in monospace su Safari 2.

L'uso dei commenti condizionali è piuttosto controverso, con detrattori e persone che ne propongono l'adozione, ma io credo che nel caso specifico sia un approccio appropriato. Stiamo infatti usando una funzionalità di un browser (i commenti condizionali) per aggirare il comportamento di quel browser (il non riuscire a ridimensionare il testo definito in pixel). C'è anche da osservare che il codice visto in precedenza presenta le regole CSS impostate all'interno di un elemento style. Il modo migliore è invece quello di usare CSS esterni collegati alla pagina.

Conclusione

Il nostro obiettivo era quello di trovare un modo per dimensionare il testo consentendo al designer di mantenere un controllo accurato sulla tipografia senza sacrificare la possibilità dell'utente di adattare alle sue esigenze l'ambiente di lettura. Abbiamo testato diverse unità nei browser più comuni. Definendo il testo e il line-height in em con una percentuale specificata per il body (e con una piccola aggiunta per Safari 2), è stato mostrato come fornire una tipografia accurata sui principali browser. Questa tecnica può essere messa in pratica per dimensionare il testo nel modo migliore e soddisfa le esigenze sia del designer sia dei lettori.

Aggiunta

Può a volte essere non molto comodo e intuitivo lavorare con gli em, soprattutto nell'annidamento degli elementi, dal momento che può risultare difficile tenere conto di tutti i calcoli necessari. Commentando bene il nostro codice e lavorando bene sugli elementi a partire dal body, si può arrivare ad una complessiva facilità di gestione. Questo esempio, conclusivo e più complesso, e il suo foglio di stile mostrano come dimensionare elementi annidati usando il body come punto di partenza.