Unità di misura: perchè usare em per definire le dimensioni degli elementi?

Pubblicato il 12/02/2008 da Matteo Moro in accessibilità, css, teoria, w3c

Nella progettazione di una pagina web, bisogna considerare diversi fattori: i due principali sono il dispositivo su cui la pagina verrà visualizzata e l’utente che la leggerà. Dal punto di vista del dispositivo, le differenze non sono solo quelle, evidenti, fra il monitor di un PC e lo schermo di un palmare, ma anche le diverse risoluzioni che lo stesso monitor può utilizzare. Gli utenti, poi, possono essere i più diversi: problemi alla vista, o anche solo l’abitudine a leggere caratteri più grandi o più piccoli, possono portare a difficoltà di fruizione della nostra pagina.

Per questi motivi, è bene prendere in considerazione con attenzione questi problemi nel momento in cui andremo a definire i fogli di stile: l’utilizzo delle unità di misura corrette, permetterà di non trovarsi in guai inaspettati alla fine dei lavori, dovendo tornare indietro e fare modifiche che si riveleranno difficoltose e, di conseguenza, costose.

In un mondo ideale, in cui tutti i browser si comportano secondo gli standard, tutti useremmo i pixel come unità di misura per i fogli di stile da applicare per la visualizzazione su schermo. Purtroppo, però, il mondo è tutt’altro che ideale e facendo in questo modo andremo a scontrarci con un problema di IE, nella sua versione per Windows. Utilizzando i pixel come unità di misura, infatti, non è possibile ridimensionare il testo da parte dell’utente: questo potrebbe essere un problema, visto che non sappiamo a priori chi leggerà le nostre pagine, ed quindi necessario trovare una soluzione.

La soluzione arriva dall’unità di misura em, derivata dalla tipografia e che rappresenta una delle unità di misura di tipo relativo (i pixel, al contrario, sono di tipo assoluto). Le impostazioni predefinite dei browser, prevedono che la dimensione del testo abbia una base di 16 pixel, per cui possiamo considerare questo valore come punto di partenza per i nostri fogli di stile, utilizzando dimensioni relative per il resto dei contenuti, in base alle nostre esigenze.

Come prima cosa, per semplificare i calcoli, andremo a definire la dimensione del testo nell’elemento &ls;body> come 0,625% del valore iniziale, in modo da portarlo a 10 pixel. A questo punto, l’unità em si comporta concettualmente come le percentuali. Potremo quindi definire la dimensione del testo nell’elemento <h1> come 2.4em, in modo che diventi di 24 pixel e così via. Gli utenti che avranno bisogno di aumentare o diminuire le dimensioni del testo, potranno utilizzare le funzioni fornite dal web-browser e ottenere un ridimensionamento armonico dei contenuti.

Se l’unità em si comporta come le percentuali, perchè non utilizzare direttamente le percentuali? La risposta è semplice. il valore 1em equivale sempre alla dimensione, in quel particolare elemento, del font. E’ dunque possibile utilizzare la stessa unità di misura per definire bordi, margini e dimensioni dei blocchi contenitore, andando in questo modo a creare un layout completamente ridimensionabile dall’utente in base alle proprie esigenze. Il ridimensionamento, essendo sempre proporzionato alle dimensioni del testo, sarà dunque armonico e non rovinerà il nostro lavoro di impaginazione.

APPROFONDIMENTI:

CREDITS:

Le foto utilizzate nell’articolo appartengono agli utenti Flickr und_dann e mociman e sono state pubblicate sotto licenza Creative Commons.

Commenti

2 commenti per “Unità di misura: perchè usare em per definire le dimensioni degli elementi?”

diggita.it il 12/02/2008 09:31

Unità di misura: perchè usare em per definire le dimensioni degli elementi?…

Nella progettazione di una pagina web, bisogna considerare diversi fattori: i due principali sono il dispositivo su cui la pagina verrà visualizzata e l’utente che la leggerà. Dal punto di vista del dispositivo, le differenze non sono solo quelle, …
Parliamo di web design? Proviamoci! - Matteo Moro il 13/02/2008 07:00

[...] argomenti saranno abbastanza vari: dai problemi spiccioli con i fogli di stile, alle tendenze del design sul web, ai web standard proposti dal W3C, alle [...]

Commenta il post