CSS font-size e l’unità di misura rem

I CSS3 introducono una nuova unità di misura priva dei problemi di em e px.

Esistono vari modi di ridimensionare il testo di una pagina web tramite CSS: in pixel, em e in percentuale.

Tramite un post di Jonathan Snook ho scoperto l’esistenza di una nuova unità di misura introdotta con i CSS3, chiamata rem. Questa unità si comporta in maniera molto simile a em, senza ereditarne i punti deboli.

Font-size con em

Prima di parlare delle novità mi sembra giusto riprendere in mano la tecnica che potrebbe essere sostituita.

Utilizzare l’unità di misura em permette già ora di superare un problema di tutte le versioni di Internet Explorer (compresa la 9): l’impossibilità di ridimensionare il testo quando il font-size è espresso in px. Con em questo inconveniente non esiste, basta usare una formula di questo tipo:

body { font-size:62.5%; }
h1 { font-size: 2em; } /* =20px */
p  { font-size: 1.4em; } /* =14px solo se non all'interno di una lista */
li { font-size: 1.4em; } /* =14px solo sul primo livello */

Il problema però è che em è un’unità di misura relativa all’elemento contenitore. Se nella pagina appare un paragrafo all’interno di un elemento li oppure ci sono due o più liste annidate, gli elementi interni aumentano progressivamente di dimensione. Una lista contenuta in un’altra lista in questo caso non sarebbe più 14px ma 20px. Aumentando di un altro livello la dimensione del testo diventerebbe 27px.

Il problema può essere evitato dichiarando per ogni livello il font-size originale, ma è un metodo scomodo e poco mantenibile.

Font-size con rem

L’unità di misura rem si comporta come em, ma fa riferimento all’elemento alla radice del documento. Rem infatti è la sigla per “root em”.

La nuova formula diventa:

html { font-size:62.5%; }
h1 { font-size: 2rem; } /* =20px */
p  { font-size: 1.4rem; } /* =14px */
li { font-size: 1.4rem; } /* =14px */

In questo modo tutti i problemi sono risolti, non esistono differenze sugli elementi annidati e il testo può essere ridimensionato senza problemi anche su IE.

Rem e il supporto dei browser

Il supporto di questa unità di misura è migliore di quanto pensassi: viene riconosciuta da tutte le ultime versioni dei browser, escluso Opera. Per non avere problemi su questo browser e garantire il supporto anche alle versioni precedenti di IE è sufficiente indicare un fallback nei CSS:

html { font-size:62.5%; }
h1 { font-size: 20px; font-size: 2rem; } /* =20px */
p  { font-size: 14px; font-size: 1.4rem; } /* =14px */
li { font-size: 14px; font-size: 1.4rem; } /* =14px */

Cosa ne pensate? Io inizierò a sperimentare questa tecnica nei miei prossimi progetti, e se non emergeranno particolari problemi penso proprio che potrebbe diventare uno standard. E’ più immediato utilizzare px come unità di misura, ma se tenete all’accessibilità dei vostri lavori basta veramente poco per fare la differenza.

[Foto di Paul Pirosca – Fotolia.com]

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

10 commenti su “CSS font-size e l’unità di misura rem”

  1. Ottima notizia… mi ero perso questa novità dei CSS3… ed era proprio ora! Grazie per l’info, corro a sperimentare :)

  2. Ciao, ottima tecnica.
    Attendo sempre notizie rassicuranti circa l’intervento di qualche organizzazione internazionale per superare il digital divide.
    Mi occupo di accessibilità web, ma non ho mai approfondito le problematiche relative ad alcuni problemi di visualizzazione con versioni di browser che ritengo aggiornabili.
    Il programmatore vada incontro all’utilizzatore, ma qualcuno aiuti l’utilizzatore ad avere computer adeguati.
    Così potremo tutti beneficiare, ad esempio, della versione 3 dei Css (io utilizzo ancora Css2 nei miei template, ma vedo i limiti).

  3. Bella notizia! In effetti l’em poteva essere comodo, ma sulla distanza aveva mostrato in effetti delle controindicazioni e non era molto pratico utilizzarlo.
    Vediamo come si comporterà questo rem!
    grazie
    ciao

  4. @Sebastian la moderazione su questo blog è ex post, Akismet non ha fatto il suo dovere, ma ho appena rimediato :)