Come i browser calcolano le unità rem

Siamo onesti per un attimo: definire le dimensioni in CSS un tempo era un vero mal di testa. Creavi un sito web bellissimo sul tuo computer, ma non appena qualcuno lo guardava da uno smartphone o ingrandiva la pagina, l’intero layout andava in pezzi.

Ed ecco che entra in gioco l’unità rem. Se ti sei cimentato un po’ nel web design, probabilmente l’avrai vista ovunque. Ma cos’è esattamente un rem e, cosa ancora più importante, come diavolo fa il browser a capire a quale dimensione corrisponde effettivamente sullo schermo?

Non preoccuparsi, non serve una laurea in matematica. Prendi un caffè e analizziamo insieme come i browser calcolano le unità rem con alcuni semplici esempi pratici.

Cosa significa esattamente REM?

rem sta per “root em”.

Se vuoi approfondire la storia delle misure tipografiche, Wikipedia offre un’analisi affascinante dell’unità em e delle sue origini fisiche nelle vecchie macchine da stampa

Ma per il web design moderno, tutto ciò che devi davvero capire è la parte “root” (radice).

Immagina un albero. La radice è la base che nutre tutto il resto. In un documento HTML, la radice è il tag <html>. Quindi, un’unità rem non fa altro che guardare la dimensione del carattere del tag <html> (la radice) e usarla come base di partenza.

L’analogia della “ricetta base”

Pensa al rem come al proporzionare una ricetta base in cucina.

Diciamo che la ricetta base di tua nonna produce esattamente 16 biscotti con gocce di cioccolato.

Se vuoi raddoppiare la dose, moltiplichi la ricetta per 2. Ottieni così 32 biscotti.
Se ne vuoi solo mezza porzione, la moltiplichi per 0.5. E ottieni 8 biscotti.

rem funzionano esattamente allo stesso modo. La dimensione del carattere radice predefinita del browser è solitamente di 16px (la nostra ricetta base).

Quindi, quando scrivi 2rem nel tuo CSS, il browser fa un rapido calcolo:
16px (base) × 2 (valore rem) = 32px.

È davvero così semplice!

Vediamo alcuni semplici esempi

Ipotizziamo che il tuo sito web utilizzi la dimensione del carattere predefinita del browser di 16px per la radice. Ecco come il browser traduce in pixel i tuoi rem nel CSS:

Testo del paragrafo (1rem): 16px × 1 = 16px
Un titolo grande (2.5rem): 16px × 2.5 = 40px
Testo piccolo del footer (0.875rem): 16px × 0.875 = 14px

Ma cosa succede se modifichi la dimensione della radice?

Mettiamo il caso che tu decida che 16px sia troppo piccolo, quindi scrivi questo nel tuo CSS:

html {
  font-size: 20px;
}

All’istante, il browser aggiorna i calcoli per l’intero sito web. Ha sostituito la ricetta base. Ora, quegli stessi valori rem equivalgono a qualcosa di completamente diverso:

1rem ora è 20px (20 × 1)
2.5rem ora è 50px (20 × 2.5)
0.875rem ora è 17.5px (20 × 0.875)

Cambiando solo una riga di codice, l’intero sito web si adatta perfettamente. Magico, vero?

REM vs EM: il problema delle matrioske

Forse ti starai chiedendo: “Perché non usare semplicemente em?”

Mentre il rem fa riferimento all’elemento root (radice), le normali unità em fanno riferimento alla dimensione del carattere del loro elemento padre (parent). Sembra fantastico, finché non inizi ad annidare gli elementi uno dentro l’altro, come una lista dentro un <div> che a sua volta si trova all’interno di un altro <div>.

Usare le unità em è un po’ come giocare con le matrioske. Se un elemento padre è 1.2em, il figlio è 1.2em e il nipote è 1.2em, il browser li moltiplica tutti insieme (1.2 × 1.2 × 1.2). All’improvviso ti ritrovi con un testo gigantesco senza capire il perché!

Poiché il rem sempre fa riferimento all’unico elemento radice, non avrai mai questo effetto valanga cumulativo. È prevedibile, sicuro e ti evita di strapparti i capelli.

Perché i browser (e gli utenti) amano i REM

Potresti pensare: “Se 1rem corrisponde a 16px, perché non scrivo direttamente 16px risparmiandomi i calcoli?”

La risposta è accessibilità.

Non tutti hanno una vista perfetta. Molte persone modificano le impostazioni del browser impostando la dimensione predefinita dei caratteri da 16px a 20px o persino a 24px per poter leggere comodamente.

Se hai creato il tuo sito usando esclusivamente i px, il testo rimarrà rigidamente bloccato. Le preferenze dell’utente verranno ignorate, rendendo difficile la lettura dei tuoi contenuti.
Se invece hai creato il sito usando i rem, il browser dirà: “Ah! L’utente ha modificato la dimensione radice a 24px!”. Ricalcolerà quindi i valori in rem sulla base di questo nuovo valore di riferimento di 24px, e l’intero sito si adatterà magnificamente per venire incontro alle sue esigenze.

Guida rapida ai REM

Per evitarti di fare calcoli ogni volta che scrivi del codice CSS, ecco una pratica guida rapida basata sullo standard predefinito di 16px. Salvala pure tra i preferiti!

I calcoli del browser	Cosa scrivi (in `rem`)	Cosa vuoi ottenere (in pixel)
`16 × 0.75`	0.75rem	12px
16 × 0.875	0.875rem	14px
16 × 1	`1rem` (Base)	16px
16 × 1.125	1.125rem	18px
16 × 1.25	1.25rem	20px
16 × 1.5	1.5rem	24px
16 × 2	2rem	32px
16 × 3	3rem	48px
16 × 4	4rem	64px

(Consiglio da professionista: se vuoi calcolarlo da solo, ti basta prendere la dimensione in pixel desiderata e dividerla per 16. Ad esempio: 24px ÷ 16 = 1.5rem).

Se preferisci evitare del tutto i calcoli e risparmiare tempo, puoi sempre usare il nostro convertitore da rem a pixel gratuito per calcolare istantaneamente le dimensioni esatte!

In conclusione

Ecco fatto! I browser calcolano le unità rem semplicemente moltiplicando il valore in rem per la dimensione del carattere radice. È semplicemente una ricetta scalabile che mantiene pulito il tuo codice, previene gli incubi legati al ridimensionamento e rende il web un posto molto più accessibile per chiunque provi a leggere i tuoi contenuti.

Ci sono elementi specifici sul tuo sito per i quali trovi difficile passare da px a rem? Fammelo sapere e potremo fare i calcoli insieme!