Fogli di Stile per il Web
CSS, trucchi & suggerimenti

em, px, pt, cm, in…

I CSS offrono un numero di differenti unità per esprimere le lunghezze. Alcune unità hanno una storia nella tipografia, p.e. i punti (pt) e i pica (pc), altre sono conosciute per un uso quotidiano, tipo i centimetri (cm) e i pollici (in). C'è pure un'unità "magica" inventata specificamente per i CSS: i px. Significa questo che a differenti proprietà corrispondono diffrenti unità?

No, le unità non dipendono dalle proprietà, dai mezzi di output: schermi e carta.

Non c'è nessuna restrizione su quale unità usare dove. Se una proprietà accetta un valore in px ('margin: 5px') essa accetta pure un valore in pollici o centimetri ('margin: 1.2in; margin: 0.5cm') e viceversa.

In generale però, si dovrebbero usare insiemi di unità per lo schermo diversi da quelli per stampare su carta. La seguente tabella indica l'uso raccomandato.

	Raccomandato	Uso occasionale	Non Raccomandato
Fogli di stile per output su schermo	em, px, %	ex	pt, cm, mm, in, pc
Fogli di stile per stampe	em, cm, mm, in, pt, pc, %	px, ex

Le cosiddette unità assolute (cm, mm, in, pt e pc) hanno lo stesso significano nei CSS come altrove. Una lunghezza espressa in una di queste unità sarà esattamente di quella misura (entro la precisione dell'hardware e del software). Esse non sono raccomandabili per lo schermo, perchè le dimensioni degli schermi sono molto variabili. Uno schermo grande potrebbe essere di 60 cm (24 pollici), un piccolo schermo portabile potrebbe essere solo 8cm. Inoltre non si guardano dalla stessa distanza.

Le unità em e ex dipendono dal font e potrebbero differire per ogni elemento del documento. Un em è semplicemente la dimensione del font. In un elemento con un font di 2cm, 1em equivale a 2cm. Esprimendo le dimensioni, p.e. di margini e padding, in em vuol dire che sono relativi alla dimensione del font, se un utente ha un font grande (p.e. su uno schermo grande) oppure un font piccolo (p.e. su un palmare), tutte le dimensioni saranno proporzionali. Dichiarazioni come 'text-indent: 1.5em' e 'margin: 1em' sono molto comuni nei CSS.

L'unità ex è usata raramente. Il suo scopo è esprimere le dimensioni in relazione a x-height (altezza della x, ndt). La x-height è, grossolanamente, l'altezza della maggior parte delle lettere minuscole: a,c,m, oppure o. Font diversi con la stessa dimensione (e quindi stesso em) possono avere le minuscole di dimensione molto diversa tra loro, in alcuni casi può tornare utile l'unità ex.

Il px è l'unità magica dei CSS. Non è relativa al font attuale e nemmeno è un'unità assoluta. Il px è definito per essere piccola ma visibile, e tale che una linea orizzontale di 1px sia visibile con confini netti (in assenza di anti-aliasing). Cosa sia netto, piccolo e visibile dipende dal dispositivo e dal suo utilizzo: è tenuto vicino agli occhi come un cellulare, a 70cm come un monitor, o a una distanza intermedia come un libro? Il px non si definisce come una lunghezza costante ma come qualcosa dipendente dal dispositivo e dal suo utilizzo.

Per avere un'idea di come appare un px, si pensi a un monitor CRT (monitor a tubo catodico, ndt) degli anni 90: il più piccolo punto che poteva visualizzare misurava circa 1/100esimo di pollice (o.25mm) o poco più. Il px prende il suo nome da questi punti detti pixel.

Oggigiorno ci sono dispositivi che potrebbero, in linea di principio, visualizzare bene punti più piccoli (sebbene non visibili a occhio nudo). Però i documenti del secolo scorso che usavano il px nei CSS appaiono ancora allo stesso modo, non importa su quale dispositivo. Le stampanti, in particolare, potrebbero stampare linee nette con un dettaglio molto minore di 1px, ma persino sulle stampanti, una linea di 1px apparirebbe molto simile alla stessa linea su un monitor. I dispositivi cambiano, ma il px appare sempre allo stesso modo.

I CSS definiscono anche che le immagini raster (a griglia di punti, ndt) sono, di default, visualizzate mappando 1 punto immagine in 1 px. Così una foto con una risoluzione 600X400 sarà 600px larga e 400px alta. I punti di una foto non vengono allora mappati su i punti del dispositivo di visualizzazione (che potrebbero essere molto piccoli), ma mappati sui px intesi come unità. Questo rende possibile allineare esattamente le immagini agli altri elementi del documento, fintanto che venga usato nei fogli di stile il px e non pt, cm, etc.

Usare em o px per le dimensioni dei font

I CSS hanno ereditato le unità pt (punto) e pc (pica) dalla tipografia. Le stamperie hanno tradizionalmente usato tali e simili unità in preferenza ai cm o in. Nei CSS non c'è ragione per usare i pt, usare qualunque altra unità a scelta. C'è un buon motivo per non usare pt né nessun altra unità assoluta e usare solo em e px.

L'unità magica dei CSS, il px, è spesso un'ottima unità da usare, specialmente se si vuole allineare il testo alle immagini, o semplicemente perchè qualunque cosa che misura 1px o un multiplo di 1px è garantito che si veda bene.

Però per le dimensioni dei font è anche meglio usare em. L'idea è (1) di non impostare le dimensione del font dell'elemento BODY, ma usare la dimensione di default del dispositivo, perchè questa dimensione è quella ottimale per una lettura comoda; ed (2) asprimere la dimensione dei font degli altri elementi in em: 'H1 {font-size: 2.5em}' per rendere H1 2,5 volte il font normale del BODY.

L'unico ambito dove utilizzare pt (o cm o in) per la dimensione del font, è nei fogli di stile per stampanti; se si vuol essere sicuri di stampare il font esattamente di una data dimensione. Però persino qui è spesso conveniente usare la dimensione del font di default.

Piu unita nei css in futuro

Per rendere ancora più facile scrivere regole di stile che dipendono solamente dalla dimensione del font di default, una nuova unità è in sviluppo: la rem. La rem (o "root em") è la dimensione del font dell'elemento root del documento. Diversamente da em, che può cambiare da elemento a elemento, rem è costante in tutto il documento.

Altre unità in sviluppo renderanno possibile specificare le dimensioni in relazione alla finestra aperta. Queste sono vw e vh. La vw sarà 1/100esimo dell'ampiezza della finestra e la vh sarà 1/100esimo dell'altezza della finestra.