Portare il mockup nel codice
Il progetto dà 24 pixel di spaziatura e il foglio di stile deve ricevere 1,5em. È il tragitto più frequente nel lavoro sull’interfaccia.
Converti i pixel in em con qualsiasi dimensione del genitore
Con l’impostazione predefinita del browser 24 pixel sono 1,5em e 14 pixel sono 0,875em. Scrivi la misura del mockup, imposta la dimensione del carattere del genitore e porta il risultato dritto nel foglio di stile.
Loading tool editor...
PUBBLICITÀ
A cosa serve convertire i pixel in em?
Il pixel diventa em con una sola divisione: il numero di pixel diviso per la dimensione del carattere del genitore. Con l’impostazione predefinita del browser quel genitore ha 16 px, quindi 24 pixel danno 1,5em e 14 pixel danno 0,875em. L’unità em si riferisce alla dimensione del testo dell’elemento che la contiene [1].
È il verso più frequente nel lavoro quotidiano. Il mockup arriva con misure in pixel, perché così contano i programmi di grafica, e il foglio di stile si scrive in em perché la misura segua la dimensione del testo del suo posto nell’impianto.
Il risultato porta quattro decimali, perché con un genitore di 16 px un singolo pixel è esattamente 0,0625em e le dimensioni del testo danno cifre come 0,875 o 1,125.
Più sotto trovi una tabella con 30 misure su tre dimensioni del genitore, una tabella di otto situazioni con la risposta su quale unità scegliere e due punti in cui l’em batte il rem. Il percorso inverso lo copre il convertitore da em a pixel.
Come calcolare i pixel in em a mano? Formula ed esempio
La formula contiene una sola operazione: em = pixel ÷ dimensione carattere del genitore. È l’inversa della moltiplicazione che trasforma gli em in pixel.
Esempio con una spaziatura da 20 px: con un genitore di 16 viene 20 ÷ 16 = 1,25em. La stessa misura dentro una scheda composta a 14 px dà circa 1,4286em, e in un titolo da 20 px dà esattamente 1em.
Le misure di un mockup danno spesso frazioni: 18 pixel sono 1,125em, 22 pixel sono 1,375em e 30 pixel sono 1,875em. Tutte e tre sono esatte e così si scrivono nel foglio di stile.
Se una misura deve dare lo stesso risultato in tutto il documento a prescindere dall’annidamento, quello stesso pixel lo scrive in rem il convertitore da pixel a rem. La differenza fra le due unità la chiarisce la tabella sulla pagina del convertitore da em a pixel.
PUBBLICITÀ
Quanti em valgono le misure più comuni in pixel?
| Valore in pixel | Genitore 16 px (predefinito) | Genitore 14 px (scheda) | Genitore 20 px (titolo) |
|---|---|---|---|
| 1 px | 0,0625 em | 0,0714 em | 0,05 em |
| 2 px | 0,125 em | 0,1429 em | 0,1 em |
| 4 px | 0,25 em | 0,2857 em | 0,2 em |
| 6 px | 0,375 em | 0,4286 em | 0,3 em |
| 8 px | 0,5 em | 0,5714 em | 0,4 em |
| 10 px | 0,625 em | 0,7143 em | 0,5 em |
| 12 px | 0,75 em | 0,8571 em | 0,6 em |
| 13 px | 0,8125 em | 0,9286 em | 0,65 em |
| 14 px | 0,875 em | 1 em | 0,7 em |
| 15 px | 0,9375 em | 1,0714 em | 0,75 em |
| 16 px | 1 em | 1,1429 em | 0,8 em |
| 18 px | 1,125 em | 1,2857 em | 0,9 em |
| 20 px | 1,25 em | 1,4286 em | 1 em |
| 21 px | 1,3125 em | 1,5 em | 1,05 em |
| 22 px | 1,375 em | 1,5714 em | 1,1 em |
| 24 px | 1,5 em | 1,7143 em | 1,2 em |
| 26 px | 1,625 em | 1,8571 em | 1,3 em |
| 28 px | 1,75 em | 2 em | 1,4 em |
| 30 px | 1,875 em | 2,1429 em | 1,5 em |
| 32 px | 2 em | 2,2857 em | 1,6 em |
| 36 px | 2,25 em | 2,5714 em | 1,8 em |
| 40 px | 2,5 em | 2,8571 em | 2 em |
| 44 px | 2,75 em | 3,1429 em | 2,2 em |
| 48 px | 3 em | 3,4286 em | 2,4 em |
| 56 px | 3,5 em | 4 em | 2,8 em |
| 64 px | 4 em | 4,5714 em | 3,2 em |
| 72 px | 4,5 em | 5,1429 em | 3,6 em |
| 80 px | 5 em | 5,7143 em | 4 em |
| 96 px | 6 em | 6,8571 em | 4,8 em |
| 128 px | 8 em | 9,1429 em | 6,4 em |
Le tre dimensioni del genitore coprono tre situazioni: 16 px è l’impostazione predefinita del browser, 14 px lo incontri nelle schede e nelle tabelle dell’interfaccia, 20 px in un titolo di sezione.
Dove l’em batte il rem?
Il primo punto è la media query. Dentro una media query il browser risolve le unità relative rispetto al valore iniziale della dimensione del carattere e non rispetto a quello che hai messo sull’elemento html: la specifica dice esplicitamente che le unità non si basano mai sui risultati delle dichiarazioni [2]. Un punto di rottura scritto 48em si comporta quindi in modo prevedibile anche in un progetto che cambia la dimensione base del carattere.
Il secondo punto sono i modelli di posta. L’unità em funziona in tutti i programmi del gruppo di test [3], mentre il rem si ferma al 69,05 per cento di supporto e non funziona in nessuna versione testata di Outlook, né su Windows né su macOS [4]. In un modello di posta decide quindi il programma di chi riceve.
Il terzo punto è un componente che deve scalare per intero insieme al suo testo. Dai a un pulsante font-size: 1.125em e scrivi riempimento e arrotondamento in em: una sola modifica della dimensione del testo fa crescere tutto il pulsante in proporzione.
In tutti gli altri casi – dimensioni del testo e scala delle spaziature di un intero sito – pesa di più la prevedibilità del rem. La tabella qui sotto elenca otto situazioni concrete, e la conversione in quel verso la fa il convertitore da pixel a rem.
PUBBLICITÀ
Quale unità scegliere in ciascuna situazione?
| Situazione | Unità | Perché |
|---|---|---|
| Dimensione del testo di titoli e paragrafi | rem | Il risultato resta uguale in tutto il documento, a prescindere dall’annidamento |
| Spazio attorno al testo di un pulsante | em | Il riempimento segue il testo del pulsante, una modifica scala tutto l’elemento |
| Rientro di un elenco annidato | em | Il rientro deve crescere insieme al testo di quel livello dell’elenco |
| Punto di rottura in una media query | em | Il browser conta dal valore iniziale della dimensione del carattere, non da html |
| Misure in un modello di posta | em | Supportato in tutti i programmi testati, mentre il rem cade in Outlook |
| Spessore del bordo e ombra | px | Un filetto deve restare un filetto qualunque sia la dimensione del testo |
| Scala delle spaziature nel design system | rem | Una modifica della dimensione base sposta tutto l’impianto in una volta |
| Larghezza massima di una colonna di testo | em | La lunghezza di riga si misura in caratteri, la larghezza segue il testo della colonna |
Otto situazioni che tornano in ogni progetto di interfaccia, con l’unità e il motivo della scelta.
Pixel ed em a confronto
| Caratteristica | px | em |
|---|---|---|
| Punto di riferimento | Nessuno, è un valore assoluto | Dimensione del carattere del genitore |
| Valore predefinito | 1 px = 1/96 di pollice | 1em = 16 px |
| Con l’annidamento | Sempre lo stesso valore | Si accumula a ogni livello |
| Reazione alle impostazioni di chi legge | Resta invariato | Scala insieme a loro |
| Dove viene indicato | Mockup, programmi di grafica, file immagine | Fogli di stile, modelli di posta |
| Uso abituale | Bordi, ombre, filetti | Spazio attorno al testo, rientro, punto di rottura |
PUBBLICITÀ
Quando ti servirà questa conversione?
Un modello di posta
Il rem cade in Outlook, quindi le misure relative si scrivono in em. Il convertitore trasforma i pixel del mockup in valori pronti.Un punto di rottura dell’impianto
Un 48em si comporta in modo prevedibile, perché dentro una media query il browser conta dalla dimensione predefinita del testo.Un componente con un solo parametro
Riempimento e arrotondamento di un pulsante scritti in em crescono insieme al suo testo: una dichiarazione cambia tutta la dimensione.
Converti Pixel in altre unità
Esplora altri convertitori di unità
pt in pxrem in pxem in pxcm in pxmm in pxcm in pollicipollici in cmmm in pollicipollici in mmmiglia in kmkm in migliametri in piedipiedi in metripollici in piedipiedi in pollicilibbre in onceonce in libbreml in onceonce in mllitri in gallonigalloni in litrikg in libbrelibbre in kgkg in grammigrammi in kgkg in stonestone in kgpollici in pxpiedi in pxpica in pxmetri in pxHEX in RGBRGB in CMYKbyte in KBKB in byteKB in MBMB in KBMB in GBGB in MBKB in GBGB in KBGB in TBTB in GBKB in TBTB in KBUnix in dataDEC in BINDEC in HEXMbps in MB/s
Fonti
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 – Units — W3C
- CSS unit: em — Can I email
- CSS unit: rem — Can I email
Tutti i valori delle tabelle sono stati calcolati dalle definizioni delle unità e verificati con il calcolo prima della pubblicazione. I dati storici e i nomi delle unità locali si basano sulle fonti elencate sopra.
Ultima revisione dei contenuti: · scritto e verificato dal team Arteon
Domande frequenti
Quanti em è 1 pixel?
Con il genitore predefinito di 16 px un pixel è 0,0625em. Dentro una scheda composta a 14 px lo stesso pixel dà circa 0,0714em, e in un titolo da 20 px dà 0,05em.
Come si convertono i px in em?
Dividi il numero di pixel per la dimensione del carattere del genitore. Con i 16 px predefiniti viene 24 ÷ 16 = 1,5em. Il convertitore qui sopra esegue quella divisione per qualsiasi genitore da 1 a 200 px.
Quanti em sono 24 px?
1,5em con un genitore di 16 px, circa 1,7143em con 14 px e 1,2em con 20 px. Il valore 1,5em è una dimensione tipica per un titolo di sezione.
Quanti em sono 14 px?
0,875em con il genitore predefinito di 16 px. Dentro una scheda il cui testo misura già 14 px, la stessa misura è esattamente 1em.
Quanti em sono 16 px?
1em con il genitore predefinito di 16 px. Con un genitore di 14 px viene circa 1,1429em, e con 20 px viene 0,8em.
Quanti em sono 12 px?
0,75em con un genitore di 16 px. È la dimensione del testo più piccola in uso corrente nelle interfacce: sotto quella soglia la lettura diventa faticosa.
Bisogna arrotondare il risultato in em?
Valori come 0,875 o 1,125em si scrivono tali e quali. Il browser li calcola con esattezza, mentre arrotondare a 0,88em sposterebbe la misura di una frazione di pixel. Dividendo per 14 escono decimali periodici e lì bastano quattro cifre.
Quale unità conviene in una media query?
L’em. Dentro una media query il browser risolve le unità relative rispetto al valore iniziale della dimensione del carattere e non rispetto al valore messo sull’elemento html, quindi un punto di rottura scritto 48em si comporta in modo prevedibile anche in un progetto che cambia la dimensione base del carattere.
L’em funziona nei modelli di posta?
Sì, in tutti i programmi del gruppo di test. L’unità rem si ferma al 69,05 per cento di supporto e non funziona in nessuna versione testata di Outlook, per questo le misure relative dei modelli di posta si scrivono in em.
Bisogna passare tutto il foglio di stile a em?
Lo spazio attorno al testo, i rientri degli elenchi e le larghezze di colonna sì, perché devono seguire il testo del loro contesto. Le dimensioni del testo e la scala delle spaziature di un intero sito riescono meglio in rem, e bordi, ombre e filetti restano in pixel.
Che differenza c’è fra em e rem a parità di misura?
La stessa dichiarazione 1,5em dà un risultato diverso a ogni livello di annidamento, perché conta dal genitore. La dichiarazione 1,5rem dà 24 pixel in tutto il documento, perché conta dall’elemento html. Per misure che devono essere uguali ovunque la scelta cade sul rem.
I programmi di grafica mostrano valori in em?
Figma, Photoshop e Illustrator contano in pixel o in punti e non hanno l’unità em. Una misura del mockup si converte a parte: con questo convertitore o leggendo il valore calcolato nella scheda Computed degli strumenti per sviluppatori.
Aiutaci a migliorare i nostri strumenti
Hai un’idea per una funzione, hai trovato un errore o vuoi proporre un altro strumento? Scrivici, rispondiamo entro 24 ore.