Converti tra px, rem, em, vw, vh e pt.
I risultati hanno carattere informativo. Verificali con altre fonti.
Annida 1,25em per quattro livelli e diventa 39px, non 20px
em è relativo al genitore, quindi annidarlo lo moltiplica. Quattro elementi impostati ciascuno a 1,25em finiscono a 2,441 volte la radice: 39,06px là dove chi ha scritto il codice quasi certamente intendeva 20px. rem è relativo alla radice e non si accumula mai, ed è tutta qui la differenza pratica fra le due unità.
Come funziona
- Converte fra px, rem, em, pt e percentuali al riferimento CSS di 96 dpi.
- Rende esplicito l'accumulo di em, perché è da lì che arrivano le sorprese.
- Mostra in cosa si trasforma un valore quando l'utente cambia la dimensione del carattere radice, che è esattamente ciò che fanno le impostazioni di accessibilità.
rem = px ÷ dimensione carattere radice (16px per impostazione predefinita) em = px ÷ dimensione carattere del genitore 1pt = 96 ÷ 72 = 1,3333px quindi 12pt = esattamente 16px em annidato si moltiplica: 1,25em dentro 1,25em = 1,5625 × radice
Esempio pratico
Lo stesso fattore 1,25 applicato come em e come rem, su quattro livelli di annidamento.
- livello 1 — em: 20,00px · rem: 20px
- livello 2 — em: 25,00px · rem: 20px
- livello 3 — em: 31,25px · rem: 20px
- livello 4 — em: 39,06px · rem: 20px
- 1,25⁴ = 2,4414
La catena di em quasi raddoppia la dimensione voluta entro il quarto livello, mentre ogni elemento in rem resta a 20px. Nessuna delle due unità è rotta: rispondono a domande diverse, e ricorrere a em quando si intendeva rem è uno dei bug di dimensionamento CSS più diffusi.
Come leggere il risultato
- Il fallimento classico sono gli elenchi annidati. Imposta ul { font-size: 0,875em } e ogni livello si rimpicciolisce di nuovo: 14,00px, poi 12,25px, poi 10,72px. Al terzo livello il testo è più piccolo del 33,0% rispetto alla radice, non del 12,5% che la regola sembra annunciare.
- 12pt equivale esattamente a 16px, ed è una coincidenza autentica che vale la pena conoscere. La dimensione predefinita del carattere del browser e il corpo standard di stampa cadono sullo stesso valore al riferimento CSS di 96 dpi, quindi pt e px coincidono in esattamente un punto utile e in nessun altro.
- rem è la scelta accessibile per la tipografia perché segue l'impostazione radice dell'utente. Chi ha portato il browser a 24px vede 1,5rem reso a 36px, mentre un 24px fisso resta 24px e lo ignora del tutto.
- em resta l'unità giusta quando vuoi proporzione rispetto al testo locale — per esempio il riempimento interno di un pulsante che deve scalare con la sua stessa etichetta. La regola pratica è rem per le dimensioni del carattere ed em per le spaziature che appartengono all'elemento.
Domande frequenti
- Devo usare rem o em?
- rem per le dimensioni del carattere, em per le spaziature che devono scalare con il testo proprio dell'elemento. rem non si accumula mai, quindi un componente spostato tre livelli più in basso viene reso identico; em si accumula di proposito, il che è utile per il riempimento e dannoso per la tipografia.
- Perché il mio testo annidato si rimpicciolisce?
- Perché em moltiplica a ogni livello. Una regola 0,875em applicata a tre elenchi annidati dà 14,00px, 12,25px e poi 10,72px. Cambia il font-size in rem e ogni livello viene reso alla stessa dimensione indipendentemente dalla profondità.