Unità CSS spiegate: px, rem, em, vh — e quando usare ognuna
Scegliere l'unità CSS sbagliata causa layout che si rompono su diverse dimensioni di schermo, font che ignorano le preferenze degli utenti e spaziature che sembrano incoerenti. Ecco una guida pratica per scegliere l'unità giusta ogni volta.
Perché le unità CSS sono importanti
CSS ha più di una dozzina di unità di lunghezza, ma la maggior parte degli sviluppatori ne usa cinque nella pratica: px, rem, em, %, e le unità della viewport vh e vw. Scegliere quella sbagliata non è sempre ovvio — il layout potrebbe sembrare perfetto sul tuo schermo e rompersi su quello di qualcun altro, oppure superare un QA visivo ma fallire un audit di accessibilità perché ignora la preferenza dell'utente sulla dimensione del carattere nel browser.
Questa guida spiega cosa misura effettivamente ogni unità, ti fornisce una regola decisionale concreta per ogni situazione e copre gli errori che si presentano ripetutamente nelle revisioni del codice.
px — Pixel Assoluti
Un CSS px corrisponde a un pixel indipendente dal dispositivo, non necessariamente a un pixel fisico dello schermo. Su un display retina 2x, un px CSS viene reso utilizzando 2 pixel fisici. Ciò significa che il px è coerente tra gli schermi in termini di dimensione visiva, ma è assoluto — non scala con nulla.
Quando usare px:
- Bordi:
border: 1px solid— un bordo da 1px dovrebbe sempre apparire come una linea sottile, indipendentemente dal contesto - Ombre e contorni delle scatole (box shadows and outlines): dettagli di precisione che non dovrebbero scalare
- Breakpoint delle media query:
@media (min-width: 768px) - Elementi decorativi a dimensione fissa (icone con una dimensione definita, divisori)
Quando non usare px: dimensioni del font, padding e margin. Un utente che imposta la dimensione del font del proprio browser a 20px perché ha difficoltà a leggere testi piccoli non trarrà alcun vantaggio dal tuo layout se tutto è hardcoded in px. La sua preferenza verrà completamente ignorata.
rem — Root Em
rem sta per "root em." È sempre relativo alla font-size dell'elemento <html>, mai al genitore. Questo lo rende prevedibile in modi che <em non è.
Di default, la maggior parte dei browser imposta la dimensione del font radice a 16px. Quindi:
1rem = 16px | 1.5rem = 24px | 0.875rem = 14px
Quando usare rem:
- Dimensioni del font — rem rispetta la preferenza dell'utente nel browser
- Spaziatura che dovrebbe scalare coerentemente con la dimensione del carattere (padding, margin, gap)
- Dimensionamento dei componenti quando vuoi che tutto si scali insieme
Il trucco del 62.5%: Alcuni sviluppatori impostano html { font-size: 62.5%; } per rendere 1rem uguale a 10px (poiché il 62.5% di 16px = 10px). Questo semplifica i calcoli mentali: <1.4rem = 14px. Il compromesso è che sovrascrive la preferenza di base dell'utente a meno che tu non lo usi con attenzione — fallo solo se comprendi le implicazioni sull'accessibilità e sovrascrivi a livello di componente.
em — Relativo al Genitore
<em è relativo alla dimensione del font calcolata dell'elemento corrente (o al genitore, quando applicato allo stesso font-size). Questo lo rende utile per componenti che devono scalare proporzionalmente alla propria dimensione del testo.
Caso d'uso classico: padding dei pulsanti. Se scrivi <padding: 0.5em 1em, il padding del pulsante scala automaticamente quando cambi la dimensione del font del pulsante — i pulsanti piccoli ottengono un padding minore, quelli grandi uno maggiore.
.btn { font-size: 1rem; padding: 0.5em 1em; }
.btn-lg { font-size: 1.25rem; /* il padding scala automaticamente */ }
Il problema dell'accumulo (compounding): Quando annidi elementi con dimensioni del font in em, esse si moltiplicano. Un genitore a <1.2em e un figlio a <1.2em danno al figlio una dimensione effettiva di <1.44em. Ecco perché rem è preferito per le dimensioni del font nella maggior parte dei casi — rem fa sempre riferimento alla radice, quindi l'annidamento non si accumula.
Quando usare em: padding, margin e line-height su componenti dove vuoi che le dimensioni seguano la dimensione del font del componente stesso. Evita em per la dimensione del font nei componenti annidati.
% — Percentuale
La percentuale è sempre relativa alla dimensione corrispondente dell'elemento genitore. Le percentuali di larghezza sono relative alla larghezza del genitore; le percentuali di altezza sono relative all'altezza del genitore (con riserve).
È particolarmente utile per layout fluidi: <width: 100% significa "occupare tutta la larghezza disponibile". Usato con max-width, crea contenitori responsivi:
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
Per la dimensione del font, la percentuale si comporta come em — si moltiplica con il genitore. Usa rem invece per risultati più prevedibili.
vh, vw — Unità di Viewport
<1vh = 1% dell'altezza della viewport. <1vw = 1% della larghezza della viewport. Questi non dipendono da alcun elemento — si riferiscono sempre alla dimensione della finestra del browser.
Quando usare le unità di viewport:
- Sezioni a schermo intero: <
height: 100vhper un hero che riempie esattamente lo schermo - Tipografia fluida: <
font-size: clamp(1rem, 2.5vw, 2rem)per testo che scala fluidamente tra diverse dimensioni di schermo senza media queries - Immagini o video a larghezza intera: <
width: 100vwper uscire da un contenitore
Il problema della barra del browser mobile: Sui browser mobili, la barra degli indirizzi appare e scompare mentre scorri, cambiando l'altezza della viewport. <100vh può causare il taglio del contenuto o creare barre di scorrimento. CSS ha aggiunto <dvh (dynamic viewport height), <svh (small — barra degli indirizzi visibile) e <lvh (large — barra degli indirizzi nascosta) per gestire questo. Il supporto del browser per dvh è buono nel 2024+. Usa <height: 100dvh per layout a schermo intero su dispositivi mobili.
Guida decisionale delle unità CSS
| Cosa stai dimensionando | Usa questo | Perché |
|---|---|---|
| Dimensione font corpo / globale | rem | Rispetta la preferenza dell'utente, nessun accumulo |
| Dimensione font del componente | rem | Coerente, prevedibile |
| Padding / margin del componente | em o <rem> | em se vuoi che segua la dimensione del font; rem per coerenza |
| Bordi, ombre (box-shadows) | px | Non dovrebbero mai scalare |
| Breakpoint delle media query | px o <em> | px per semplicità; em affinché i breakpoint scalino con le preferenze del font |
| Larghezza fluida del contenitore | <% + <max-width> | Prende lo spazio disponibile, si blocca al massimo |
| Sezione hero a schermo intero | <100dvh> | Tiene conto delle barre dei browser mobili |
| Tipografia fluida | <clamp() con rem + vw | Scala fluidamente tra i breakpoint |
Gli errori più comuni
1. Usare px per tutte le dimensioni del font. Questo compromette l'accessibilità. Gli utenti che aumentano la dimensione di base del carattere nel loro browser troveranno il tuo testo invariato. Usa rem per le dimensioni del font in modo che l'interfaccia rispetti tale preferenza.
2. Usare em per le dimensioni del font nei componenti annidati. Il problema dell'accumulo si manifesta qui. Un menu all'interno di una scheda all'interno di un modale può finire con un accumulo di 3 volte. Usa rem per le dimensioni del font.
3. Usare vh per i layout a schermo intero senza fallback dvh. Su mobile, la barra degli indirizzi causa spostamenti del layout. Usa <min-height: 100svh o <height: 100dvh>.
4. Dimenticare che l'altezza in % richiede un genitore con altezza esplicita. <height: 100% su un figlio non ha effetto se il genitore ha <height: auto>. Usa invece <vh o Flexbox.
Formula di conversione da px a rem
La dimensione del font radice predefinita è 16px. La formula per convertire:
Esempio: <
24px ÷ 16 = 1.5rem
Se lavori con uno strumento di design che fornisce pixel, il nostro Convertitore da PX a REM gestisce i calcoli istantaneamente. Incolla qualsiasi valore px (o una lista di valori) e ottieni l'equivalente rem, con supporto per dimensioni radice personalizzate.
Converti px in rem istantaneamente
Incolla qualsiasi valore in pixel e ottieni l'equivalente in rem. Supporta dimensioni del font base personalizzate.