Impostare la dimensione base del testo

Uno dei problemi più importanti quando si realizza il layout di una pagina web è impostare la giusta dimensione del testo. Sono anni ormai che utilizzare dimensioni fisse non è una tecnica consigliata, soprattutto per i problemi di scalabilità nei vari browser. È sempre consigliabile utilizzare unità di misura relative come percentuale o em che meglio si adattano ai vari browser e, soprattutto, consentono una maggiore leggibilità anche zoomando la pagina.

Volendo utilizzare unità di misura relative come l’em bisogna prima definire correttamente la dimensione del font di base in base al quale vengono calcolate. Generalmente il font di base è definito per il body così da sfruttare l’ereditarietà delle regole CSS. Di default, nella maggior parte dei browser la dimensione del testo è settata a 16px. Di conseguenza:

1em     = 100%   = 16px
1.125em = 112.5% = 18px
1.25em  = 125%   = 20px
1.375em = 137.5% = 22px
1.5em   = 150%   = 24px
2em     = 200%   = 32px
...
0.875em =  87.5% = 14px
0.75em  =  75%   = 12px

Utilizzare la dimensione di default (16px) può risultare piuttosto scomodo. Si ha la necessità di effettuare calcoli con la calcolatrice per definire la grandezza del testo degli elementi della pagina con conseguenti perdite di tempo.

Bisogna poi tener conto di browser come Internet Explorer 7 e precedenti che non ridimensionano correttamente il testo rendendolo illeggibile in alcuni casi.

Una soluzione comoda con cui si riesce a semplificare i calcoli relativi alle dimensioni del testo e, allo stesso tempo, garantisce una uniformità di dimensioni su tutti i browser consiste nell’impostare il body in percentuale.

In questo caso le tecniche e le misure utilizzate sono tante:

• 62,5%
• 72,5%
• 75%
• 80%
• 100,1%

e tante altre. La scelta dipende per lo più dalle esigenze del designer e non c’è una regola prestabilita. Tra le misure elencate, però, la più consigliata è la prima, 62,5%, vediamo perchè.

Il 62,5% di 16px corrisponde precisamente a 10px. Assegnare una misura del genere al body significa semplificare in maniera drastica i calcoli per le dimensioni degli elementi. Infatti utilizzando una regola CSS come la seguente:

body { font-size: 62,5%; /* = 10px = 0.625em */ }

consente di utilizzare, per gli elementi della pagina, in maniera semplicissima e molto più intuitiva le seguente misure:

1em     = 100%   = 10px
1.2em   = 120%   = 12px
1.4em   = 140%   = 14px
1.5em   = 150%   = 15px
2em     = 200%   = 20px
4em     = 400%   = 40px
...
0.9em   =  90%   =  9px
0.8em   =  80%   =  8px