Perché dovresti davvero smettere di usare i pixel per il web design (e passare ai Rem)
Siamo onesti per un secondo: il web design un tempo era incredibilmente facile. In passato, tutti fissavano gli stessi identici e ingombranti monitor desktop. Potevi semplicemente impostare una dimensione del font di 16px per un paragrafo, definire una larghezza fissa per il contenitore principale e considerare finito il lavoro.
Ma le cose sono cambiate. Parecchio. Ora cerchiamo di far apparire bene i siti su telefoni tascabili, monitor ultrawide giganteschi, tablet e persino frigoriferi intelligenti. Il web non è più un poster statico; è una creatura fluida e vivente. E se ti affidi ancora esclusivamente ai pixel (px) per costruirlo? In pratica, stai cercando di mettere una camicia di forza all’acqua.
È ora di parlare di unità relative. Onestamente, abbandonare i px in favore dei rem è una delle migliori abitudini che si possano adottare. Ti salva la salute mentale, rende il codice più pulito e, cosa più importante, è molto meglio per i tuoi utenti.
Il problema dei pixel (ovvero l’approccio “cemento”)
Per capire perché il rem è così fantastico, dobbiamo prima guardare perché i pixel sono diventati un problema per il web design moderno.
Pensa ai pixel come a una colata di cemento. Una volta asciutto, non puoi più muoverlo. Se dici a un browser che un’intestazione è di 24px, rimarrà di 24px, a prescindere da tutto. I pixel sono fondamentalmente i “maniaci del controllo” del mondo CSS. Non gli importa se l’utente sta strizzando gli occhi davanti allo schermo, e non gli importa certo se qualcuno è andato appositamente nelle impostazioni del browser per aumentare la dimensione predefinita dei caratteri a causa di problemi di vista.
Il pixel non si schioda. Dice: “No, il designer ha detto 24 pixel, quindi avrai esattamente 24 pixel”.
Questa rigidità è un incubo per l’accessibilità. Quando forziamo dimensioni assolute, togliamo agli utenti la possibilità di controllare come fruiscono dei nostri contenuti.
Arriva il REM: il tuo termostato intelligente CSS
Se i pixel sono cemento colato, il rem è come un termostato intelligente per tutta la casa.
Rem sta per “Root Em”. Non ti annoierò con la storia tecnica, ma tutto ciò che devi sapere è che l’unità rem basa la sua dimensione interamente sulla radice del documento (il tag <html>). Di default, quasi ogni browser imposta la dimensione del carattere radice a 16px.
Quindi, se imposti il testo del paragrafo a 1rem, il browser lo traduce in 16px. Se imposti l’intestazione a 2rem, il browser fa semplicemente il calcolo: 2 x 16 = 32px.
La magia del ridimensionamento nel mondo reale
Ecco dove l’analogia del termostato intelligente acquista davvero senso.
Mettiamo che un utente visiti il tuo sito, ma abbia problemi di vista. È andato nelle impostazioni del browser e ha cambiato la dimensione del font predefinita dallo standard 16px a qualcosa di più grande, come 24px.
- Se hai costruito il sito con i Pixel: Il tuo codice li ignora completamente. Il tuo testo da 16px rimane esattamente di 16px. L’utente deve ingrandire la pagina in modo scomodo, il che rompe il tuo layout accuratamente progettato e lo costringe a scorrere orizzontalmente solo per leggere una singola frase. È incredibilmente frustrante.
- Se hai costruito il sito con i Rem: Il tuo sito rispetta davvero l’utente. Poiché il testo è impostato su
1rem, il browser guarda il nuovo valore predefinito (24px) e dice: “Ottimo, ora 1rem è uguale a 24px”. Tutto nel tuo sito — font, padding, margini — si ingrandisce in modo perfetto e proporzionale.
Non hai dovuto scrivere una sola riga extra di CSS. Il layout si è semplicemente adattato alle necessità dell’utente.
Perché devi fare il passaggio tipo… ieri
Passare dai px ai rem non è solo una moda passeggera per sviluppatori. È un cambiamento fondamentale nel modo in cui gestiamo l’esperienza utente.
- È una grande vittoria per l’accessibilità (A11y): Il web dovrebbe funzionare per tutti. Usando i rem, ti assicuri che gli utenti ipovedenti che si affidano a impostazioni personalizzate del browser possano effettivamente leggere i tuoi contenuti senza dover combattere contro i tuoi CSS.
- Il responsive design diventa molto più semplice: Vuoi ridurre la tipografia dell’intero sito per il mobile? Se hai usato i pixel, saresti costretto a scrivere decine di media query per cambiare ogni singola dimensione del font. Con i rem, basta cambiare la dimensione del font radice una sola volta e tutto il resto si ridimensiona automaticamente. Onestamente, sembra quasi di barare.
- A prova di futuro: Lanciano continuamente nuovi dispositivi con dimensioni dello schermo insolite. Le unità relative assicurano che il tuo design sia flessibile e “respiri” invece di spezzarsi sotto pressione.
Il promemoria su “Cosa usare e quando”
Senti, non devi buttare via i pixel del tutto. Hanno ancora un piccolo spazio nel design moderno. Ecco una guida rapida e senza fronzoli per affrontare la transizione:
Usa rem per:
- Dimensioni dei caratteri (Intestazioni, paragrafi, pulsanti)
- Spaziatura (Margini e padding)
- Larghezze e altezze dei principali contenitori del layout
Usa px per:
- Piccoli dettagli precisi che non dovrebbero mai e poi mai ingrandirsi. Pensa ai bordi da 1px attorno a una scheda o a una leggera ombra (box-shadow).
I Calcoli d’Oro:
- 1rem = 16px (Default del browser)
- 1.5rem = 24px
- 2rem = 32px
(Consiglio extra: se odi fare calcoli a mente, salva tra i preferiti uno strumento di conversione da Px a Rem e lascia che faccia il lavoro sporco per te!)
Adottare i rem significa rinunciare a un briciolo di controllo assoluto per poter costruire un’esperienza infinitamente superiore, flessibile e accessibile per le persone che usano effettivamente il tuo sito. Il cemento si sta comunque crepando: è ora di iniziare a costruire cose che scorrono.