Come convertire i pixel in rem in CSS (Guida semplice)

Hai mai creato un sito web splendido, perfetto al pixel, solo per renderti conto che sembra completamente rotto nel momento in cui un utente aumenta la dimensione del carattere predefinita del browser? Sì, è successo anche a me. È di solito quello il momento esatto in cui noi sviluppatori impariamo a nostre spese che codificare tutto in pixel (px) è la ricetta per un incubo dell’accessibilità.

Ed è qui che entra in gioco l’unità rem.

Se sei abituato a pensare rigorosamente in pixel, passare ai rem può sembrare un po’ come cercare di imparare una lingua straniera al volo. Ma non preoccuparti: una volta capito il concetto, in realtà ti semplifica di molto la vita come sviluppatore.

Vediamo come convertire i px in rem senza bisogno di una laurea in matematica.

Perché parliamo di Rem?

Pensa ai pixel come a una misura assoluta. Immagina di costruire una casa e dire al tuo appaltatore: “Rendi questa finestra larga esattamente 40 pollici”. Quella finestra sarà larga 40 pollici, qualunque cosa accada al resto della casa. Questo è un pixel.

Ora, pensa ai rem come a una misura relativa. Invece di usare pollici fissi, dici all’appaltatore: “Rendi questa finestra esattamente 3 volte la larghezza dei nostri mattoni standard della fondazione”. Se in seguito decidessi di usare mattoni più grandi, la finestra si ridimensionerebbe automaticamente in modo proporzionale.

In CSS, rem sta per “root em”. Significa semplicemente “relativo alla dimensione del carattere dell’elemento HTML radice (root)”. Poiché gli utenti possono (e lo fanno) andare nelle impostazioni del browser per cambiare la dimensione del carattere predefinita per migliorare la leggibilità, usare i rem significa che l’intero sito web si adatterà perfettamente alle loro preferenze. Il layout non si romperà e il testo rimarrà perfettamente leggibile. Un vantaggio per tutti.

La matematica standard: come convertire

Ecco la regola d’oro da memorizzare: Per impostazione predefinita, quasi tutti i moderni browser web impostano la dimensione del carattere radice a 16px.

Questo significa che, a meno che tu non lo sovrascriva specificamente nel tuo CSS, 1rem equivale a 16px.

Per convertire qualsiasi valore in pixel che hai in mente in un valore rem, usa semplicemente questa formula di base:

Valore pixel desiderato ÷ Valore pixel di base (16) = Valore rem

Diciamo che stai guardando un design su Figma e hai bisogno che un titolo sia di 24px. Dividi semplicemente 24 per 16.

24 ÷ 16 = 1.5
Quindi, nel tuo CSS, scriverai: font-size: 1.5rem;

Ti serve una didascalia più piccola da 14px?

14 ÷ 16 = 0.875
Quindi, scriverai: font-size: 0.875rem;

Senti, lo capisco. Fare divisioni a mente mentre sei immerso nel codice è una seccatura. Se preferisci saltare del tutto la ginnastica mentale, ti consiglio vivamente di tenere aperta in una scheda uno strumento come questo Convertitore da pixel a rem. Ti basta inserire i pixel e farà il lavoro pesante per te all’istante.

Il “Trucco del 62.5%” (per rendere la matematica semplicissima)

Ora, se non vuoi usare un calcolatore per ogni singola riga di CSS, gli sviluppatori hanno ideato un piccolo trucco intelligente chiamato Trucco del 62.5%.

Ecco come funziona. Imposti la dimensione del carattere dell’elemento html al 62.5% all’inizio del tuo foglio di stile:

html {
  font-size: 62.5%;
}

Perché il 62.5%? Perché il 62.5% del valore predefinito di 16px è esattamente 10px.

In questo modo, hai essenzialmente ridefinito il tuo “mattone standard” affinché sia esattamente di 10px. Improvvisamente, la matematica diventa ridicolmente semplice. Invece di dividere per 16, dividi semplicemente per 10 (il che significa solo spostare il punto decimale di una posizione a sinistra).

Vuoi 24px? Scrivi semplicemente 2.4rem.
Vuoi 14px? Scrivi semplicemente 1.4rem.
Vuoi 36px? Scrivi semplicemente 3.6rem.

Sembra una magia. Tieni solo presente che se stai lavorando su un progetto esistente dove la dimensione del carattere radice non è stata toccata, dovrai comunque affidarti alla matematica standard della divisione per 16.

Tabella di conversione rapida da px a rem

Sia che tu stia dividendo per 16 manualmente o che tu abbia solo bisogno di una guida di riferimento rapida da tenere sul secondo monitor, ecco una tabella per le dimensioni dei caratteri più comuni (assumendo la dimensione predefinita del browser di 16px):

Cosa desideri (px)	Cosa scrivi (rem)	Calcolo effettuato
10px	`0.625rem`	10 ÷ 16
12px	`0.75rem`	12 ÷ 16
14px	`0.875rem`	14 ÷ 16
16px	`1rem`	16 ÷ 16 (Base)
18px	`1.125rem`	18 ÷ 16
20px	`1.25rem`	20 ÷ 16
24px	`1.5rem`	24 ÷ 16
32px	`2rem`	32 ÷ 16
36px	`2.25rem`	36 ÷ 16
48px	`3rem`	48 ÷ 16
64px	`4rem`	64 ÷ 16

Un ultimo consiglio prima di andare

Non devi usare i rem per ogni singola cosa. Sono fantastici per le dimensioni dei caratteri, i margini, il padding e le larghezze del layout. Tuttavia, per piccoli elementi decorativi come un sottile bordo da 1px (border: 1px solid black), va benissimo — ed è solitamente preferibile — continuare a usare i pixel standard!

Vai e programma responsabilmente. I tuoi utenti (e la loro vista) ti ringrazieranno.