Converti em in pixel con qualsiasi dimensione del genitore

L’em diventa pixel con una sola moltiplicazione: il valore in em per la dimensione del carattere del genitore. Con l’impostazione predefinita del browser quel genitore ha 16 px, quindi 1em dà 16 pixel e 1,5em ne dà 24. L’unità si riferisce alla dimensione del testo dell’elemento che la contiene [1].

La conversione serve quando leggi il foglio di stile di qualcun altro e vuoi sapere quanto misura davvero una spaziatura scritta come 0,75em. La risposta dipende dal punto del documento in cui quella spaziatura si trova, ed è proprio questo a distinguere l’em dalle altre unità relative.

Il genitore non deve per forza misurare 16 px. Dentro una scheda o una tabella ne ha spesso 14, in un titolo di sezione 20 o più, per questo il campo accetta qualsiasi valore da 1 a 200.

Più sotto trovi una tabella con 26 valori su tre dimensioni del genitore, la tabella dell’accumulo per annidamento e la regola su quando usare em e quando rem. Il percorso inverso lo copre il convertitore da pixel a em.

La formula contiene una sola operazione: pixel = em × dimensione carattere del genitore. Quella dimensione è la font-size dell’elemento dentro cui sta il tuo, e se nessuno l’ha cambiata il browser usa 16 px.

Esempio con una spaziatura da 1,25em: con un genitore di 16 px viene 1,25 × 16 = 20 pixel. Lo stesso valore dentro una scheda composta a 14 px dà 17,5 pixel, e in un titolo da 20 px sale a 25.

Una regola merita attenzione. Nella proprietà font-size l’em si riferisce al genitore, ma in ogni altra proprietà dello stesso elemento – in padding, margin o width – si riferisce alla dimensione del carattere di quell’elemento [2]. Un elemento con font-size: 1.5em e padding: 1em con un genitore di 16 px ha testo da 24 px e altrettanti 24 px di riempimento.

L’unità rem si calcola allo stesso modo, ma conta sempre dall’elemento html e dà quindi lo stesso risultato in tutto il documento: è il compito del convertitore da rem a pixel. Quegli stessi 16 pixel valgono 12 punti tipografici in composizione, cosa di cui si occupa il convertitore da punti a pixel.

L’em si misura rispetto al genitore, e il genitore ha a sua volta un genitore. Quando la stessa dichiarazione font-size: 1.25em si ripete su livelli di annidamento successivi, ogni livello moltiplica il risultato del precedente. Dopo sei livelli, da 16 pixel se ne ottengono più di 61.

Lo vedi soprattutto negli elenchi annidati, nei menu con sottomenu e nei thread di commenti, perché lì la struttura crea i livelli da sola. La tabella qui sotto mostra ogni passaggio insieme al calcolo, così l’origine di ogni cifra resta visibile.

Da qui la regola pratica: l’em va bene dove un valore deve seguire la dimensione del testo del contesto più vicino – lo spazio attorno al testo di un pulsante, il rientro di un elenco, la larghezza di un campo. Per le dimensioni del testo di un intero sito va meglio il rem, perché conta dalla radice del documento e dà sempre lo stesso valore a qualsiasi profondità.

Se cerchi proprio quella prevedibilità, il calcolo lo fa il convertitore da rem a pixel, e una misura del mockup scritta in rem la risolve il convertitore da pixel a rem.