px, rem, em, vh — quando usare ogni unità CSS

Guida pratica alla scelta della giusta unità CSS per ogni situazione: layout, tipografia, spaziatura e design responsivo.

5 min di lettura CSS Accessibilità

Scegliere l'unità CSS sbagliata è uno degli errori più comuni nello sviluppo front-end. Usa px ovunque e la tua tipografia si rompe quando gli utenti ingrandiscono il browser. Usa em con leggerezza e il padding si accumula in modo inaspettato. La buona notizia: una volta capito perché esiste ogni unità, la scelta giusta diventa ovvia.

Questa guida copre px, rem, em, vh, vw — le cinque unità che userai nel 95% dei progetti — con regole pratiche, esempi di codice e una prospettiva orientata all'accessibilità. Alla fine, una tabella di conversione e una guida decisionale da aggiungere ai preferiti.

Unità assolute vs relative

Le unità CSS si dividono in due grandi categorie. Le unità assolute hanno una dimensione fissa che non cambia in base al contesto. Le unità relative derivano la loro dimensione da un riferimento: un elemento padre, la dimensione del font radice o le dimensioni del viewport.

Unità	Tipo	Relativa a
`px`	Assoluta	Pixel CSS (indipendente dal dispositivo)
`pt`, `cm`	Assoluta	Misura fisica (uso stampa)
`rem`	Relativa	Font-size di `<html>`
`em`	Relativa	Font-size dell'elemento corrente
`%`	Relativa	Dimensione dell'elemento padre
`vh`, `vw`	Relativa	Altezza / larghezza del viewport
`dvh`, `dvw`	Relativa	Viewport dinamico (considera l'UI del browser)

Per il design su schermo, preferisci unità relative per tipografia e spaziatura. Le unità assolute si riservano agli elementi che non devono mai scalare: bordi, contorni e dettagli decorativi.

px — precisione pixel

Un pixel CSS non è un pixel fisico dello schermo. È un'unità indipendente dal dispositivo definita in modo che un pixel CSS corrisponda approssimativamente a 1/96 di pollice. Sui display ad alta densità (Retina), un pixel CSS corrisponde a 2 o 3 pixel fisici — ma dal punto di vista CSS rimane sempre 1px.

Quando usare px

Bordi e contorni: border: 1px solid — non devono mai scalare
Box shadow: box-shadow: 0 2px 8px rgba(0,0,0,.15)
Dimensioni icone quando abbinate a un sistema di icone a dimensione fissa
Breakpoint media query (anche se em è più sicuro — vedi Guida decisionale)

Quando NON usare px

font-size — sovrascrive il default del browser dell'utente, violando WCAG 1.4.4
line-height — preferisci senza unità (1.5) o rem
padding e margin quando vuoi che scalino con la dimensione del font

Regola di accessibilità: se un utente imposta il browser al 200% della dimensione del testo, i font in px lo ignorano. I font in rem lo rispettano. Non è opzionale — è un requisito WCAG 2.1 Livello AA.

Tool gratuito Convertitore Unità CSS Converti px, rem, em, vh e altro — incolla un valore e ottieni tutti gli equivalenti istantaneamente

rem — scala relativa alla radice

rem significa root em. È sempre relativo al font-size impostato sull'elemento <html>. Il default del browser è 16px, quindi 1rem = 16px a meno che non lo modifichi.

/* Default: 1rem = 16px */
h1 { font-size: 2rem; }    /* 32px */
p  { font-size: 1rem; }    /* 16px */
.small { font-size: .75rem; } /* 12px */

Poiché rem è ancorato alla radice, non si accumula quando gli elementi sono annidati — a differenza di em. Questo lo rende la scelta predefinita per font-size e spaziatura in tutto il progetto.

Il trucco del 62.5%

Impostare html { font-size: 62.5%; } fa sì che 1rem = 10px, semplificando i calcoli mentali (1.6rem = 16px). Oggi è considerato un anti-pattern perché:

Sovrascrive la preferenza di font-size del browser dell'utente prima che il CSS venga caricato
I componenti di terze parti che si basano sui 16px di default vengono renderizzati in modo errato
I moderni strumenti CSS (custom properties, clamp()) eliminano la necessità della matematica in base 10

Usa rem con la radice predefinita di 16px. Dividi per 16 mentalmente o usa un convertitore px-to-rem.

em — dimensione relativa al contesto

em è relativo al font-size dell'elemento corrente. Se non è impostato nessun font-size sull'elemento, viene ereditato dal genitore — ecco perché em può accumularsi quando gli elementi sono annidati.

/* Esempio di accumulo */
.parent { font-size: 1.2em; }  /* 19.2px se il genitore è 16px */
.child  { font-size: 1.2em; }  /* 23.04px — 1.2 × 19.2px */

Quando em è la scelta giusta

Em è l'unità giusta quando vuoi che la spaziatura o la dimensione si scalino proporzionalmente con il font-size del componente stesso, non con la radice globale:

.btn {
  font-size: 1rem;
  padding: .5em 1.2em;  /* scala con il font-size del btn */
}
.btn-large {
  font-size: 1.25rem;
  /* il padding scala automaticamente */
}

Quando evitare em

Font-size globali — usa rem per evitare accumuli nel DOM
Dimensioni di layout — usa rem, % o unità viewport

Tool gratuito Convertitore px in rem Converti qualsiasi valore in pixel in rem con un clic, con font-size radice regolabile

vh e vw — unità viewport

vh (altezza viewport) e vw (larghezza viewport) corrispondono ciascuno all'1% della dimensione corrispondente del viewport. Sono ideali per layout che devono riempire o essere proporzionali allo schermo.

.hero {
  height: 100vh;
  width: 100vw;
}

Il problema di 100vh su mobile

Sui browser mobile, la barra degli indirizzi e il chrome di navigazione occupano spazio visibile — ma non vengono sottratti da 100vh. Questo fa sì che un elemento 100vh sia più alto dello schermo visibile, causando una scrollbar indesiderata.

La soluzione moderna: dvh

L'unità dvh (dynamic viewport height) è stata introdotta per risolvere questo problema. Si aggiorna quando l'interfaccia del browser appare e scompare:

.hero {
  height: 100vh;   /* fallback per browser più vecchi */
  height: 100dvh;  /* dinamico — considera il chrome collassabile */
}

Includi sempre il fallback vh. Le altre unità viewport utili includono svh, lvh, vmin e vmax.

Tabella di conversione rapida (base 16px)

Quando conosci il valore in pixel ma hai bisogno dell'equivalente in rem, dividi per 16. Questa tabella copre le dimensioni più comuni:

px	rem	em (1:1)
8	`0.5rem`	`0.5em`
12	`0.75rem`	`0.75em`
14	`0.875rem`	`0.875em`
16	`1rem`	`1em`
18	`1.125rem`	`1.125em`
20	`1.25rem`	`1.25em`
24	`1.5rem`	`1.5em`
32	`2rem`	`2em`
48	`3rem`	`3em`
64	`4rem`	`4em`

Devi convertire un intero foglio di stile? Usa il Convertitore di Unità CSS.

Guida decisionale

In caso di dubbio, usa questa tabella come riferimento rapido:

Proprietà / Caso d'uso	Unità consigliata
Font size	`rem`
Padding / margin (globale)	`rem`
Padding interno a un componente	`em`
Bordi, contorni, box shadow	`px`
Colonne / larghezze layout	`%` o `fr` (CSS Grid)
Sezioni hero / full-screen	`dvh` con fallback `vh`
Breakpoint media query	`em` (più accessibile) o `rem`
Line-height	Senza unità (`1.5`) o `rem`
Font size responsivo (fluido)	`clamp()` con valori rem

La tipografia fluida con clamp() è un pattern potente. Usa il Generatore Font Size Clamp per costruire questi valori visivamente.

Tool gratuito Generatore Font Size Clamp Crea tipografia responsive fluida con clamp() — imposta min, max e range fluido visivamente

Domande frequenti

Qual è la differenza tra unità CSS assolute e relative?+

Le unità assolute (px, pt, cm) hanno una dimensione fissa che non cambia in base al contesto. Le unità relative (rem, em, %, vh) si scalano in base a un riferimento — la dimensione del font radice, l'elemento padre o il viewport. Per design responsivi e accessibili, le unità relative sono generalmente preferite per tipografia e spaziatura.

Perché dovrei usare rem invece di px per le dimensioni del font?+

Quando gli utenti impostano una dimensione del font predefinita più grande nel browser (un'esigenza di accessibilità), le dimensioni basate su rem si scalano di conseguenza. Le dimensioni in px rimangono fisse e ignorano le preferenze dell'utente. Usare rem per font-size rispetta le impostazioni dell'utente ed è richiesto per superare WCAG 1.4.4 (Ridimensionamento del testo).

Quando dovrei usare em invece di rem?+

Usa em quando vuoi che la spaziatura o la dimensione si scalino relativamente al font-size del componente stesso, non alla radice globale. Il padding di un pulsante impostato in em crescerà proporzionalmente se il font-size del pulsante aumenta, mantenendo un peso visivo coerente.

Cos'è il trucco del 62.5% e dovrei usarlo?+

Impostare html { font-size: 62.5% } fa sì che 1rem = 10px, semplificando i calcoli mentali (1.6rem = 16px). È considerato un anti-pattern perché sovrascrive il default del browser dell'utente e può rompere componenti di terze parti che si basano sulla base di 16px.

Perché 100vh si comporta in modo inaspettato su mobile?+

Sui browser mobile, la barra degli indirizzi e il chrome dell'interfaccia occupano spazio nel viewport ma non vengono sottratti da 100vh. Questo causa l'estensione degli elementi 100vh oltre l'area visibile. La soluzione moderna è usare 100dvh (altezza viewport dinamica), che tiene conto dell'UI del browser collassabile. Aggiungi un fallback: height: 100vh; height: 100dvh.

Quale unità CSS è migliore per i breakpoint delle media query?+

La comunità è divisa: px è più semplice da leggere, ma i breakpoint in em e rem si attivano correttamente quando l'utente ha cambiato la dimensione del font radice. Usare em (es. @media (max-width: 48em)) è l'approccio più robusto per l'accessibilità.

Come converto rapidamente px in rem?+

Dividi il valore in px per 16 (la dimensione del font radice predefinita): 24px ÷ 16 = 1.5rem. Se usi una dimensione radice diversa, dividi per quel valore. Uno strumento di conversione può automatizzare questo per interi fogli di stile.