Converti i rem in pixel con qualsiasi base

Il rem diventa pixel con una sola moltiplicazione: il valore in rem per la dimensione del carattere base. Con l’impostazione predefinita del browser quella base vale 16 px, quindi 1rem dà 16 pixel e 1,5rem ne dà 24. L’unità si riferisce alla dimensione del testo dell’elemento html, la radice del documento, da cui il nome root em [1].

La conversione serve quando lavori su un mockup. Il grafico consegna misure in pixel, il foglio di stile le conserva in rem e a te serve un numero per verificare se un titolo da 1,875rem corrisponde davvero ai 30 pixel del progetto.

La base può assumere un valore diverso da 16 px. La tecnica del 62,5% la fissa a 10 px e chi legge può alzarla nelle impostazioni del browser, per questo il campo accetta qualsiasi valore da 1 a 100.

Più sotto trovi una tabella con 26 valori su tre basi, la scala tipografica completa di Tailwind CSS e la spiegazione del motivo per cui 16 resta solo un valore predefinito. Il percorso inverso lo copre il convertitore da pixel a rem.

La formula contiene una sola operazione: pixel = rem × dimensione carattere base. La dimensione del carattere base è quella impostata sull’elemento html, e se nessuno l’ha cambiata il browser usa 16 px.

Esempio con una spaziatura da 1,25rem: con base 16 px viene 1,25 × 16 = 20 pixel. Lo stesso valore con base 10 px dà 12,5 pixel, e per chi ha impostato 20 px nel browser sale a 25.

La tecnica del 62,5% consiste nello scrivere html { font-size: 62.5% }, che porta la base a 10 px, perché il 62,5% di 16 è esattamente 10. Il calcolo si fa allora a mente: 2,4rem sono 24 pixel. Arriva con una condizione: al testo del body va restituita una dimensione leggibile, di solito 1.6rem, altrimenti tutta la pagina resta composta in corpo dieci.

L’unità em si calcola allo stesso modo, solo che si riferisce all’elemento genitore invece che alla radice del documento: quel calcolo lo fa il convertitore da em a pixel. Quegli stessi 16 pixel valgono 12 punti tipografici in composizione, cosa di cui si occupa il convertitore da punti a pixel.

La cifra 16 arriva dal browser e non dalla specifica CSS. È la dimensione del testo che un browser assegna a un documento, e chi legge la cambia nelle impostazioni del proprio programma. Chi ha una vista più debole ci mette 20 o 24 px e si aspetta che la pagina lo segua.

Qui sta tutta la differenza fra il rem e il pixel. Un elemento scritto font-size: 24px resta alto 24 pixel qualunque sia la scelta di chi legge. Lo stesso elemento scritto 1.5rem cresce con la base: a 20 px dà 30 pixel, a 24 px ne dà 36.

Il criterio WCAG 1.4.4 chiede che il testo si possa ingrandire fino al 200% senza perdita di contenuto né di funzionalità [2]. Un impianto costruito sul rem lo soddisfa da solo, perché scala insieme all’impostazione di chi legge.

In Italia quel criterio ha una base normativa. La legge 4/2004, la cosiddetta legge Stanca, obbliga la pubblica amministrazione e rimanda alla norma UNI CEI EN 301 549, cioè alle WCAG; il decreto legislativo 82/2022 recepisce l’European Accessibility Act e affida ad AgID la vigilanza [3]. Un foglio di stile già scritto in rem copre il criterio 1.4.4 prima ancora che l’audit cominci.

Da qui la divisione pratica: dimensioni del testo, spaziature e larghezze di colonna in rem, e il pixel dove una misura deve restare fissa a prescindere dal testo, come bordi, ombre e filetti.