back to top

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

Altri contenuti interessanti

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) รจ un elemento HTML...

Immagini riflesse con CSS

Il Flipping è una tecnica utilizzata dai grafici per...

Applicare un bordo alle lettere di un testo con CSS

Con l'avvento di CCS3 il linguaggo di stilizzazione delle...

CSS: dimensioni relative alla viewport con vw, vh, vmin e vmax

Con l'avvento e la diffusione di CSS 3 e...

Rimuovere CSS inutilizzato

Soprattutto quando si gestiscono progetti Web based di grandi...

CSS: centrare orizzontalmente un elenco puntato

Il sistema migliore per scrivere un buon menu è...
Pubblicitร