Le unità di misura più utilizzate per definire la dimensione di un font all’interno di uno stile CSS sono cinque:

• px (pixel)
• pt (punti)
• em (“M”)
• rem (root em)
• % (percentuale)

Si possono distinguere queste diverse unità di misura in due gruppi, dimensioni fisse (px e pt) e dimensioni relative (em, rem e %). E’ una differenza molto importante da tenere presente ad inizio progetto. Se si andrà a creare un layout responsive probabilmente è meglio usare le unità variabili che si adattano alle dimesioni dello schermo, al contrario se si preferisce che la dimensione resti invariata nonostante le dimensioni è meglio usare le unità fisse.

I paramentri standard hanno queste dimensioni:

1em = 1rem = 16px = 12pt = 100%

Facciamo un esempio, partendo da una definizione di “font-size: 62.5%” definita nel tag HTML e un “font-size: 1.7rem” nel tag body di questa pagina, il render del testo nelle diverse unità di misura è questo:

• Lorem ipsum dolor sit amet 16px
• Lorem ipsum dolor sit amet 12pt
• Lorem ipsum dolor sit amet 1em
• Lorem ipsum dolor sit amet 1rem
• Lorem ipsum dolor sit amet 100%

Si possono notare sia piccole differenze che grosse differenze.

PX

L’unità in pixel è quella forse più naturale per essere gestita dai monitor visto che misura esattamente ciascuno degli elementi puntiformi che compongono l’oggetto. Un pixel è pari a un punto sullo schermo del computer, la più piccola unità della risoluzione dello schermo. E’ molto precisa e abbastanza uniforme anche se visualizzata su dispositivi diversi.

E’ un’unità di misura fissa, si adatta alla perfezione sulle dimesnioni di schermi per il quale è stata pensata, un po’ meno su schermi di dimensioni diverse. Impostare la dimensione del carattere in valori di pixel diventa necessaria quando si ha bisogno di molta precisione senza necessità che sia scalabile.

E’ il modo migliore, indipendentemente dal sistema operativo o dal browser, di fare il render dei caratteri esattamente del numero di pixel specificati. I risultati possono solo variare minimamente in quanto i browser possono utilizzare algoritmi diversi per il render.

PT

L’unità di misura in punti nasce per essere utilizzata sulla stampa tradizionale anche se è stata presto convertita sui monitor. Un punto è uguale a 1/72 di pollice. I punti sono molto simili ai pixel in quanto sono le unità di dimensione fissa e non sono in grado di scalare in termini di dimensioni. Questa è una unità di misura utilizzata nei processi di stampa classici e nei software come Microsoft Word. Scelta ideale per la creazione di file destinati alla stampa dato che le stampanti misurano le dimensioni dei font in punti e non in pixel.

Newsdesigns

EM

Il significato storico della definizione di em viene dalla la lettera “M” maiuscola che un tempo veniva utilizzata come parametro per i processi di stampa offset. Ai giorni nostri non ha più molto senso questo parametro analogico ma la definizione à rimasta. L’unità em è l’altezza del carattere in punti nominali o pollici, la dimensione di un dato carattere sono dipendenti dalle impostazioni definite dall’utente nell’elemento font-size.

1em equivale alla dimensione attuale dell’ultima definizione di font-size, 2em raddoppia e .5em dimezza. L’elemento em è un’unità di misura sempre relativa all’elemento contenitore. Questa unità di misura scalabile è forse una delle più utilizzate per le pagine HTML data l’elevata versatilità di utilizzo.

REM

I valori rem sono stati pensati allo scopo di risolvere il problema delle dimensioni relative negli elementi annidati utilizzando il valore espresso em. I valori rem, a differenza dei valori em, fanno sempre riferimento all’elemento radice del documento HTML e non l’elemento genitore.

In altre parole questa unità di misura permette di specificare una dimensione del carattere in modo assoluto senza essere influenzato dalla dimensione del genitore contenitore.

% {#}

L’unità percentuale è abbastanza evidente nel suo funzionamento. Se un parent ha il font-size di 24px e il child ha un font-size del 50%, le dimensioni trasformate in pixel diventeranno 12.

L’unità percentuale è molto simile all’unità “em”, fatta eccezione per alcune differenze. Innanzitutto il font-size attuale, se non specificato, è pari al 100% (cioò 12pt = 100%). Se si utilizza questa unità percentuale il testo è naturalmente scalabile, molto indicato per i dispositivi mobili e per l’accessibilità.

Altre unità di misura poco utilizzate

• Exes (ex) – L’unità ex è un misura di tipo relativo che si riferisce alla dimensione in altezza della lettera “x” minuscola di un carattere. Scarsamente non è utilizzata a causa del supporto quasi inesistente formito dai i browser.
• Picas (pc) – Come la dimensione in punti anche i picas sono unità di misura provengono dalla tipografia e sono nate per l’utilizzo nei caratteri di stampa. In questo caso il problema che si può riscontare sui documenti destinati allo schermo è che non si garantisce uniformità di dimensioni sulle varie piattafome.

In conclusione

• L’unità in px è la dimensione più precisa per essere visualizzata sui monitor
• L’unità em si riferisce alla dimensione relativa del contenitore genitore
• L’unità rem si riferisce esclusivamente alla dimensione contenuta nel tag HTML
• L’unità % è la più scalabile

Conversion Chart