CSS font-size: pt, px o em? Che unità di misura utilizzare?

In linea di massima possiamo dire che ogni unità di misura ammessa nei CSS ha una destinazione d’uso precisa:

pt

I punti (pt) sono l’unità di misura utilizzata nei processi di stampa e nei software (come ad esempio Microsoft Word) destinati alla creazione di documenti stampabili. Le stampanti, infatti, non "ragionano" in pixel ma in punti. Se mandiamo in stampa un testo formattato in pixel la stampante provvederà autonomamente a convertire i pixel in punti. Se state predisponendo un foglio di stile per la stampa, quindi, il suggerimento è di utilizzare pt per avere un risultato più preciso.

px

I pixel (px) sono, ovviamente, l’unità di misura dei monitor o, più in generale, dei display (la cui risoluzione è data dal numero di pixel della linea orizzontale per quella verticale).

em

L’em, a differenza di pt e px, è un’unità di misura relativa (cioè non fissa). Per utilizzare questa unità di misura si definisce nel body del documento la dimensione di default dei caratteri utilizzando i pixel. Dopodiché, mediante em, vengono definiti i singoli elementi della pagina. L’unità di misura così definita (in "em") sarà relativa alla dimensione dei caratteri di default. In sostanza l’em è una specie di moltiplicatore della dimensione di default. facciamo un esempio: se la dimensione dei caratteri di default è 10 pixel, un paragrafo avente

font-size: 1.5 em

avrà, in pratica, un font di 15 pixel sulla base di questo semplice calcolo:

10px * 1.5 = 15px

px to em: come faccio a convertire una misura in pixel in em e viceversa?

Fare questo tipo di calcolo è semplicissimo. Per prima cosa è necessario conoscere la dimensione di default di font-size definita per l’elemento body. Per il nostro esempio supponiamo che tale valore corrisponda a 12 px. L’unità di misura em, infatti, ha natura relativa e fa riferimento a questo valore di default. Per farla semplice, em è una sorta di moltiplicatore della dimensione di default.

Quindi, un elemento della pagina avente

font-size: 1.5 em

avrà una dimensione in pixel pari al risultato di questa moltiplicazione:

12px * 1.5 = 18px

Viceversa, se volessimo conoscere la dimensione in em di un font-size espresso in pixel dovremmo fare l’operazione inversa:

18px / 12px = 1.5 em