CSS  »  Articoli  »  CSS fonts stampa e tipografia 

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.

Altri articoli

Altre guide

Altre newsletter