PX vs REM vs EM | Quale unità CSS dovresti usare?
Siamo onesti per un secondo: capire come dimensionare gli elementi in CSS può sembrare come imparare una lingua completamente diversa. Ti siedi per dare uno stile a una semplice pagina web e improvvisamente ti ritrovi davanti a un minestrone di unità di misura.
“Questo paragrafo dovrebbe essere di 16px? O 1rem? Aspetta, cos’è esattamente un em?”
Se ti è capitato di tirare a indovinare le unità finché il layout non sembrava finalmente corretto, non sei affatto solo. È fondamentalmente un rito di passaggio per ogni sviluppatore frontend. Ma una volta capito come funzionano davvero queste tre unità dietro le quinte, il CSS smette di sembrare magia oscura e inizia a sembrare un toolkit prevedibile.
Analizziamo px, em e rem senza troppi tecnicismi, usando alcune analogie del mondo reale per far quadrare tutto.
Pixel (px): Il righello testardo
Pensa a un pixel come a un abito su misura realizzato con un tessuto che non si allunga mai. Se dici a un pulsante di avere una larghezza di 200px e una dimensione del testo di 16px, è esattamente quello che otterrai. Fine della storia. È un’unità assoluta.
Ai pixel non importa onestamente se stai visualizzando il sito su un enorme monitor 4K, su un minuscolo smartphone di cinque anni fa, o se l’utente ha aumentato la dimensione del carattere predefinita del browser perché ha dimenticato gli occhiali da lettura. Un pixel è un pixel.
Il lato positivo: sono prevedibili. Sai esattamente cosa otterrai, il che li rende incredibilmente facili da gestire quando costruisci layout precisi. Il lato negativo: sono terribili per l’accessibilità. Se codifichi le dimensioni dei caratteri in pixel e un utente ipovedente prova a ingrandire la dimensione del carattere predefinita del browser, il tuo testo da 16px si rifiuterà ostinatamente di crescere.
Em (em): Il gioco del telefono
Se i pixel sono rigidi, le unità em sono l’esatto opposto. (Curiosità: il nome deriva da una tradizionale misura tipografica originariamente basata sulla larghezza della lettera maiuscola “M”!). Un em è un’unità relativa, il che significa che basa la sua dimensione su ciò che lo circonda, nello specifico, sul suo elemento genitore diretto.
Pensa alle unità em come al gioco del telefono, o forse come alle matrioske russe. Se un contenitore genitore ha una dimensione del carattere di 16px e dai a un elemento figlio una dimensione del carattere di 2em, il figlio sarà il doppio della dimensione del genitore (quindi, 32px).
Sembra fantastico, vero? Finché non inizi ad annidarli.
Diciamo che hai una lista, dentro una lista, dentro una lista. Se imposti tutti i tag li a 1.5em, la prima lista è 1,5 volte la dimensione normale. La lista annidata è 1,5 volte quella dimensione. La terza lista è 1,5 volte quella dimensione. Improvvisamente, il tuo testo sta urlando all’utente con lettere enormi che riempiono lo schermo. Questo è noto come “problema di composizione” (compounding problem), ed è il motivo per cui molti sviluppatori scappano urlando dalle unità em.
Poiché i calcoli possono diventare stranamente complicati quando annidi gli elementi, non vorrai davvero calcolare questa roba a mente. Fatti un enorme favore e salva tra i preferiti un convertitore da pixel a em per salvaguardare la tua sanità mentale quando le cose si fanno difficili.
Rem (rem): Sincronizzare l’orologio sul Greenwich Mean Time
L’unità rem è stata inventata specificamente per risolvere l’incubo della composizione degli em.
“Rem” sta per Root Em (em della radice). Invece di guardare il suo genitore immediato per capire quanto dovrebbe essere grande, un rem guarda fino alla cima della pagina web: la “radice” (l’elemento <html>).
Pensa alle unità rem come a impostare il tuo orologio su uno standard globale come il Greenwich Mean Time. Non importa dove ti trovi nel mondo (o dove il tuo elemento è annidato nell’albero HTML); tutti fanno riferimento allo stesso identico orologio.
Per impostazione predefinita, la maggior parte dei browser imposta la dimensione del carattere della radice a 16px. Quindi, 1rem equivale a 16px. 2rem equivale a 32px. 0.5rem equivale a 8px. Se non hai voglia di fare calcoli mentali ogni volta che devi tradurre un file di design in codice, usa un pratico convertitore da pixel a rem per velocizzare il tuo flusso di lavoro.
La magia assoluta dei rem: se un utente va nelle impostazioni del browser e cambia la dimensione del testo predefinita a 24px perché ha bisogno di un testo più grande, l’intero sito si adatta automaticamente in modo armonioso e proporzionale. Perché? Perché tutto ciò che è costruito con i rem si basa su quel numero radice!
Quindi, quale dovresti usare davvero?
Ecco il segreto: non devi sceglierne solo una e abbandonare le altre. I migliori sviluppatori le usano tutte e tre, ma per compiti molto specifici.
Ecco come dovresti approcciarti:
1. Usa rem come predefinito per quasi tutto.
Dimensioni dei caratteri, margini, padding, larghezze massime: usa rem. Rende il tuo sito incredibilmente accessibile e assicura che tutto scali proporzionalmente se l’utente modifica le impostazioni del browser. È lo standard di riferimento indiscusso per il web design moderno.
2. Usa px per le cose che non devono mai scalare.
Se stai mettendo un sottile bordo di 1px attorno a una card, probabilmente non vuoi che quel bordo diventi un blocco goffo da 3px solo perché l’utente ha aumentato la dimensione del carattere. Usa px per bordi, ombre (box-shadow) e occasionalmente per il posizionamento preciso in layout complessi.
3. Usa em per componenti modulari.
Usa em quando vuoi che la spaziatura scali specificamente con la dimensione del carattere di quel preciso elemento. Ad esempio, immagina un pulsante. Vuoi che il padding attorno al testo sembri sempre proporzionato, che si tratti di un pulsante gigante “Acquista ora” o di un minuscolo pulsante “Invia”. Se imposti il padding del pulsante in em, ti basterà cambiare la dimensione del carattere del pulsante e il padding crescerà o si ridurrà automaticamente per adattarsi perfettamente.