Approfondimento tecnico sulle unità CSS (px, em, rem, %, vh, vw): calcolo, contesto, performance

Le unità CSS determinano come browser e dispositivi interpretano dimensioni, spaziature e tipografia. In contesti professionali, una scelta accurata tra px, em, rem, %, vh, vw influisce su layout, accessibilità, performance e prevenzione del layout shift.

Questa guida è rivolta a frontend developer e web designer esperti, ma include spiegazioni intermedie per chiarire concetti tecnici come device pixel ratio, root em calculation, fluid typography e viewport resizing.

Obiettivi dell’articolo

• Comprendere come il browser calcola le unità
• Vedere i pro e i contro in diversi scenari
• Conoscere tecniche avanzate (clamp(), scaling, media queries)
• Fornire esempi commentati e best practice professionali

1. Filosofia: Unità assolute vs relative

1.1 Unità assolute

Le unità come cm, in, pt e pc sono pensate per la stampa. In CSS il px è considerato un’unità assoluta: rappresenta un pixel logico del dispositivo. Nei display ad alta densità, un pixel CSS non coincide con un pixel fisico: il browser applica una mappatura tramite il device pixel ratio (DPR).

Esempio: su un display Retina con DPR=2, un pixel CSS occupa due pixel fisici in larghezza e in altezza.

DPR indica quanti pixel fisici compongono un pixel logico CSS. Il browser gestisce questo rapporto in automatico.

1.2 Unità relative

Le unità relative si adattano al contesto: dimensione del font del genitore, root element, viewport o contenitore. Sono fondamentali per il responsive design perché reagiscono ai cambiamenti di dimensione e alle preferenze dell’utente. Esempi: em, rem, %, vh, vw, vmin, vmax, ch, ex.

2. px – Pixel CSS

Come funziona

Il px è un’unità fissa in CSS. Rappresenta un pixel logico indipendentemente dalla densità dello schermo. Nei moderni browser è scalato in base al DPR.

Quando usarlo

• Elementi che richiedono precisione visiva come icone, bordi, ombre
• Elementi grafici raster con dimensioni fisse
• Componenti che non devono adattarsi al font-size dell’utente

Pro e contro

Pro: Prevedibilità e precisione.

Contro: Non scala con lo zoom utente e non è responsive.

3. % – Percentuale

Come funziona

La percentuale è relativa alla dimensione dell’elemento genitore. Ad esempio, width: 80% calcola la larghezza come 80% di quella del contenitore.

Nota importante: per proprietà verticali come padding-top e padding-bottom (il “Rientro” sopra e sotto, in italiano), la percentuale è calcolata rispetto alla larghezza del contenitore, non all’altezza.

Quando usarla

• Layout fluidi
• Immagini che si ridimensionano in base al contenitore
• Spaziature proporzionali

Pro e contro

Pro: Flessibilità nei layout.

Contro: Dipendenza dal contesto, può portare a calcoli non intuitivi.

4. em – Element Relative Unit

Come funziona

1em corrisponde alla dimensione del font dell’elemento corrente. Se un genitore ha font-size di 20px, 1em equivale a 20px per i figli diretti.

Effetto collaterale

Con il nesting, i valori in em si moltiplicano, creando l’effetto compounding.

Esempio: se un genitore ha font-size 20px e un figlio ha font-size 1.2em, il risultato è 24px. Ma se quel figlio è a sua volta genitore di un altro elemento con font-size 1.2em, quest’ultimo avrà 28.8px.

Quando usarlo

Spaziatura interna ai componenti Tipografia che deve scalare proporzionalmente al font locale

5. rem – Root EM

Come funziona

1rem corrisponde alla dimensione del font dell’elemento radice html. Di default è 16px nella maggior parte dei browser.

Vantaggi

• Coerenza tipografica su tutto il sito
• Scalabilità centralizzata: modificando font-size in html si ridimensionano tutte le unità rem

Quando usarlo

• Font principali del sito
• Spaziatura globale
• Sistemi di design con baseline coerente

6. vh, vw, vmin, vmax – Viewport Units

Come funzionano

• 1vh = 1% dell’altezza del viewport
• 1vw = 1% della larghezza del viewport
• vmin e vmax si riferiscono alla dimensione minore o maggiore del viewport

Quando usarli

• Hero section fullscreen
• Tipografia fluida basata sul viewport

Attenzione su mobile

Su mobile, la barra di navigazione del browser può modificare le dimensioni effettive del viewport, causando layout shift. In questi casi, si possono usare calcoli con env(safe-area-inset-bottom) o fallback in px/rem.

7. Altre unità utili: ch ed ex

• ch: larghezza del carattere “0” nel font corrente
• ex: altezza della “x” minuscola nel font corrente

Utili in contesti tipografici avanzati per colonne e campi input.

Tabella comparativa estesa

Unità	Tipo	Base di calcolo	Forza	Limite principale	Uso consigliato
px	Assoluta	Pixel CSS (mapped da DPR)	Precisione esatta	Non adattabile a preferenze utente/layout	Bordi, ombre, icone, pixel grafica
%	Relativa	Dimensione del genitore	Fluidità layout, flexible grid	Orientamento/contesto variabile	Layout responsivi, immagini, container fluidi
em	Relativa	Font-size del genitore	Scalabilità locale	Effetto compounding	Padding, spaziature contesti modulari
rem	Relativa	Font-size elemento root html	Coerenza globale	Meno flessibile nei componenti isolati	Font globali, spaziatura sistema design
vh/vw	Relativa	Percentuale viewport	Adattabilità fullscreen	Problemi su mobile browser UI	Hero section, layout fluidi full viewport
vmin/vmax	Relativa	Min/max dimensione viewport	Layout proporzionali complessi	Supporto meno diffuso	Sistemi tipografici complessi, centering retina
ch	Relativa	Larghezza del carattere “0”	Precisione tipografica	Variabile in base al font	Griglie colonna testuali, input numerici
ex	Relativa	Altezza della x minuscola	Allineamento tipografico	Font-specific	Tipografia fine-tuning

Best practice tecniche

• Prediligi unità relative per il responsive design
• Usa rem per la tipografia globale e em per componenti modulari
• Combina % con max-width per layout fluidi controllati
• Per la fluid typography usa clamp() per gestire min e max font-size
• Evita unità assolute nei font per garantire accessibilità

Esempi di codice avanzati

Tipografia globale scalabile

html { font-size: 16px; } body { font-size: 1rem; }

Fluid typography

h1 { font-size: clamp(1.5rem, 2vw + 1rem, 3rem); }

Layout a griglia fluido

.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2%; }

Checklist delle best practice

• Imposta la base tipografica usando html { font-size: … } e costruisci tutto il sito su rem per coerenza globale.
• Usa em solo all’interno di componenti modulari quando vuoi che spaziature o font scalino rispetto al contesto locale, evitando nesting profondo non controllato.
• Preferisci unità relative (%, rem, em, vh, vw) per layout e tipografia responsive; limita l’uso di px a elementi dove serve precisione assoluta (bordi, icone, ombre).
• Combina clamp() con unità viewport e rem per realizzare una tipografia fluida che abbia limiti min/max sicuri: font-size: clamp(min, preferito viewport-based, max); Per layout fluidi, usa % e max-width insieme (es. width: 90%; max-width: 1200px;) per mantenere controllo su breakpoints.
• Considera l’impatto del device pixel ratio: aspettati che px si mappi su più pixel fisici su schermi ad alta densità, ma non usarlo per font-base accessibili.
• Gestisci i potenziali layout shift su mobile evitando 100vh quando la UI del browser può cambiare: fallback con media query o padding adattivo.
• Imposta sempre width/height su immagini e contenuti media per ridurre il Cumulative Layout Shift (CLS).
• Non fissare le dimensioni dei font in px; consenti agli utenti di scalare via impostazioni browser (usa rem e percentuali).
• Usa combinazioni intelligenti: rem per struttura globale, em per micro-layout, % per contenitori, vh/vw per sezioni full viewport.
• Verifica su diversi viewport e dispositivi (inclusi mobile con barre UI dinamiche) che le unità reagiscano come previsto e non generino overflow o scaling inatteso.
• Documenta la scala tipografica nel design system (es. 1rem = base, 1.25rem = sottotitolo, 2rem = titolo) e usala in modo consistente.
• Usa commenti nel CSS per chiarire perché è stata scelta una specifica unità in contesti non ovvi (es. “uso rem qui per mantenere coerenza con la scala tipografica globale”).

FAQ