Rem vs em: quando usare l’una o l’altra per un design responsive efficace

Quando si lavora con linguaggi di programmazione e markup, spesso ci sono diverse strade per raggiungere lo stesso obiettivo. La chiave sta nel saper scegliere il metodo migliore per risolvere il problema, evitando soluzioni che potrebbero complicarti la vita durante la programmazione del layout del tuo sito.

Nel caso del CSS e del design responsive, le unità relative come rem ed em offrono un livello di flessibilità superiore rispetto ai tradizionali px. Queste unità ti permettono di costruire layout più adattabili e facili da mantenere, migliorando la pulizia e la coerenza del design fin dall’inizio.

In questo articolo ti guiderò attraverso le differenze tra rem vs em, analizzandone i pro e i contro, per aiutarti a sfruttare al meglio le potenzialità di queste due unità di misura.

Unità em

L’unità em storicamente venne adottata in principio dal mondo della tipografia è permette di impostare la dimensione di un carattere in relazione alle dimensioni del carattere dell’elemento genitore.

Per aiutarti a comprendere meglio qui sotto riportato un esempio.

.elemento-principale {
  font-size: 12px;
}
.figlio {
  font-size: 1.5em;
}

Considerando questa situazione, il valore dell’elemento .figlio verrà determinato in base al valore dell’elemento principale. In questo caso specifico il valore dell’elemento principale è di 12px, pertanto il valore dell’elemento figlio sarà il risultato della moltiplicazione tra i due elementi.

Se moltiplichiamo infatti 12px * 1.5em otterremo un risultato di 18px. Quindi l’elemento figlio avrà come dimensione 18px, ma se cambiamo il valore dell’elemento principale cambierà automaticamente anche quello dell’elemento figlio.

Se non viene specificato nessun valore dall’elemento genitore, automaticamente verrà cercato nell’intero DOM un valore di riferimento assegnato ad un testo. Se non è stata assegnata nessuna dimensione per il testo allora verrà automaticamente impostato all’elemento un valore di 16px (che è il valore standard del testo nei browser moderni).

Il valore em può essere assegnato a diverse proprietà CSS. Può essere utilizzato per definire il padding, la dimensione del testo, i margini, l’altezza di un elemento o la sua larghezza ma ricorda che em tiene sempre conto del valore font-size.

Uno dei problemi più comuni nell’utilizzare l’unità em si verifica quando inseriamo più elementi figli in cascata. In questo caso, em assume il valore in relazione al suo elemento genitore, come mostrato nella seguente situazione.

See the Pen
Untitled by Giacomo Lanzi (@giacomolanzi)
on CodePen.

Come potrai capire anche tu, questa pratica potrebbe causare alcuni problemi nella struttura del tuo sito WordPress. Come soluzione a questo tipo di situazione è stata introdotta l’unità rem.

Unità rem

L’unità rem, a differenza dell’em, prende come valore di riferimento la dimensione del carattere dell’elemento root, ossia il valore assegnato alle dimensioni del carattere nella radice del documento. La radice del documento è l’elemento html. A volte, invece che assegnare i valori di default all’elemento html, si usa l’elemento body.

Analogamente per come avviene nell’unità em, anche al rem viene assegnato un valore di 16px nel caso in cui non venisse indicato alcun valore di riferimento.

Qui in basso trovi un esempio che ti aiuterà a capire il funzionamento di rem.

See the Pen
Untitled by Giacomo Lanzi (@giacomolanzi)
on CodePen.

Come puoi notare, l’unità rem sarà sempre in relazione alla dimensione del carattere dell’elemento radice e questo ti permette di risolvere il problema, che abbiamo visto poco fa, causato da em.

Una tabella che potrebbe aiutare a capire

Nella tabella qui sotto vedi l’andamento della dimensione dell’elemento testo con applicata una dimensione em o rem. Il presupposto è che l’elemento html abbia un font-size di 16px e che si annidino elementi impostando font-size per ognuno di 1 em o 1 rem. Come cambia il valore calcolato in px?

Livello di nidificazione	em (px)	rem (px)
1	16	16
2	24	16
3	36	16

Rem vs Em: quale usare?

Tra questi due elementi non è possibile scegliere quale sia il migliore, entrambi possono essere usati in modo simile, dipende dalle preferenze personali, in fin dei conti.

In ogni caso è consigliato utilizzarli al posto della tradizionale unità di misura px, che ormai viene sempre meno utilizzata.

Unità px

L’unità px viene sempre usata nella progettazione di layout. Tuttavia utilizzare i px per progettare la struttura e il design di un sito Web è un metodo ormai deprecato, quando sviluppiamo le interfacce.

Il valore px è un valore costante, lo svantaggio nell’adoperare quest’unità sta nel fatto che bisogna attribuire ad ogni elemento un valore in px, e questo richiede un enorme sforzo di tempo e calcoli che si potrebbero facilmente evitare utilizzando altre unità di misura. Inoltre, nel caso in cui un elemento dovesse cambiare di dimensione in futuro, tutti gli elementi da cui dipende graficamente andrebbero modificati.

I design moderni hanno bisogno di flessibilità per adattarsi ad ogni dispositivo e ad ogni risoluzione dello schermo. Utilizzare un valore statico come px non è una buona pratica da adottare, ci sono altre soluzioni più vantaggiose che ti aiuteranno nella progettazione del tuo layout.

Unità vh e vw

Queste due unità di misura sono state introdotte con l’avvento del CSS3 e possono rivelarsi particolarmente utili ed efficaci nella progettazione di un layout responsive.

VH (Viewport Height) e VW (Viewport Width) si basano esclusivamente alla relazione del Viewport, ovvero alla dimensione della finestra del browser dell’utente che sta visitando il sito Web. Quando le dimensioni della finestra del browser cambiano, cambia automaticamente anche il valore di questi due elementi.

Questo è molto utile perché ti permette di evitare di scrivere delle media query per definire le dimensioni da adottare per ogni dispositivo e risoluzione.

Questi due valori vengono rappresentati in percentuale, ad esempio, assegnando ad un elemento il valore di 100vw, la sua larghezza corrisponderà al 100% delle dimensioni della finestra dell’utente. Se l’utente usa una finestra di 1024*768, il 100% corrisponderà esattamente a 1024px. Se assegniamo a vw il valore 1, le sue dimensioni dell’elemento saranno di 102.4px.

Queste due unità di misura permettono quindi di poter costruire un layout in maniera molto più fluida e semplice, dandoci la possibilità di proporzionare gli elementi in base alle dimensioni dello schermo dell’utente, offrendoli una miglior user experience.

Il mio consiglio è quello di usare le misure relative al viewport per definire le dimensioni dei box e delle sezioni nelle pagine.

See the Pen
Untitled by Giacomo Lanzi (@giacomolanzi)
on CodePen.

Conclusioni

In questo articolo abbiamo visto le principali unità di misura, analizzando nel dettaglio le differenze tra rem vs em.

Quando progettiamo il layout di un sito web, bisogna scegliere accuratamente quali unità di misura utilizzare, in modo da garantire al tuo sito web una compatibilità completa con ogni dispositivo.

Se ti interessa approfondire questo discorso sulla progettazione di un layout in modo professionale, segui il mio corso incentrato sulla costruzione di un sito WordPress da zero.

Iscriviti alla newsletter per ricevere sconti per i corsi e ai partner affiliati a Plan B Project!