Design del Sito Web

REM vs. EM: Come Scegliere l’Unità CSS Giusta

Pubblicato: August 26, 2024 di Jennifer Le

Probabilmente non sogni la dimensione degli elementi CSS di notte, ma se stai costruendo un sito web o un’app, questo argomento merita sicuramente di essere considerato.

Mentre alcune unità CSS si integrano bene con il tuo design responsivo, altre potrebbero mostrarsi ribelli. Essere in grado di distinguere i diversi caratteri può risparmiarti grossi mal di testa in futuro.

Prendi in considerazione l’accoppiamento di REM ed EM. Quale dovresti usare e perché?

Rimani con noi per i prossimi paragrafi, e riveleremo tutto!

REM vs. EM in Pochissime Parole

Se stai cercando una risposta rapida, ecco la versione TL;DR:

REM: Questa unità si basa sull’elemento radice (solitamente il tag <html>). Indipendentemente da ciò che accade nella pagina, le tue dimensioni rimarranno consistenti.
EM: Questa unità cerca indicazioni dall’alto. Se l’elemento genitore cambia, anche le tue dimensioni si adegueranno.

Se vuoi ricordare la differenza, tieni presente che la “R” in REM sta per “Root”.

Confronto tra le unità REM e EM in CSS, mostrando come si relazionano rispettivamente agli elementi root e parent.

Nota per Nerd: Perché entrambe le unità terminano con “EM”? Questa non è un’abbreviazione. Ai tempi in cui tutto il testo era stampato, i tipografi usavano la larghezza di una M maiuscola come riferimento per la dimensione del testo. Piuttosto interessante, vero?

Allora, quale dovresti usare?

Beh, dipende.

Se desideri che il testo si adatti all’ambiente circostante, EM potrebbe essere l’opzione migliore. Ma se vuoi che le dimensioni rimangano consistenti in tutto il tuo sito web, dovresti passare a REM.

Perché?

EM: Più flessibile, ma può diventare confuso se non stai attento.
REM: Dimensionamento coerente, ottimo per il design reattivo.

Design Adattivo

Il design adattivo permette a un sito web di adattarsi alle dimensioni dello schermo del dispositivo su cui viene visualizzato. Il sito web apparirà quindi diversamente su dispositivi differenti.

Sei ancora confuso? Non preoccuparti, approfondiremo tra un attimo.

Ricorda solo questo per ora: REM è generalmente la scelta più sicura per la maggior parte dei siti web.

Articolo correlato

How to Learn CSS In 2024 (Fast & Free)

Capire REM e EM

Bene, entriamo un po’ nel dettaglio.

Sia REM che EM sono unità relative. Ciò significa che mantengono la stessa dimensione relativa a un determinato punto di riferimento.

Questo tipo di dimensionamento gioca un ruolo chiave nel design responsivo.

Le dimensioni assolute (ad esempio, px) rimangono sempre le stesse, il che significa che il testo può apparire minuscolo su un desktop e enorme su un telefono. Al contrario, le unità relative possono adattarsi a diversi dispositivi e layout.

In un contesto digitale, REM e EM sono ancora principalmente utilizzati per misurare il testo. Tuttavia, puoi anche utilizzare queste unità per:

Margini
Padding
Larghezza e altezza
Altezza della linea
Proprietà del bordo
Ombra del box
Posizionamento
Query dei media

In altre parole, REM ed EM sono utili ogni volta che desideri dimensioni flessibili all’interno del tuo design.

Bene, questo copre in gran parte il terreno comune tra queste due unità.

Ora, diamo un’occhiata più da vicino a ciò che rende ognuno di essi unico.

Conoscere REM

REM sta per “root em.” Quando utilizzi questa unità, stai definendo quanto grande dovrebbe essere qualcosa, rispetto alla dimensione del font del tuo elemento radice (solitamente il tuo tag <html>).

La maggior parte dei browser imposta per impostazione predefinita 16px per l’elemento radice. Tuttavia, è una buona idea definire la dimensione predefinita del tuo carattere utilizzando CSS.

Puoi farlo così:

html { font-size: 16px; /* La tua dimensione base del carattere */ }

Qualunque dimensione scegli diventa 1rem. Questo è il tuo nuovo punto di riferimento per l’intera pagina.

Qualsiasi figura che sia più grande o più piccola cambierà la dimensione del tuo elemento target, rispetto al tuo default scelto.

È un po’ complicato da spiegare chiaramente, quindi ecco un esempio semplice:

html { font-size: 16px; /* La dimensione base del tuo carattere */ } body { font-size: 1.2rem; /* 19.2px */ } h1 { font-size: 2.4rem; /* 38.4px */ }

In questo scenario, abbiamo definito la dimensione del carattere del tag <html> come 16px. Questa è la nostra base di 1rem.

Vogliamo che il testo del nostro corpo sia un po’ più grande di così. Quindi, impostiamo la dimensione del font del <body> a 1.2rem. Questo è il 120% del valore di base.

L’intestazione principale sulla nostra pagina deve essere molto più grande. Impostando la dimensione del font di <h1> a 2.4rem, possiamo rendere il titolo grande il 240% rispetto alla nostra linea di base.

Finirai con qualcosa del genere:

Diagramma del dimensionamento dei caratteri in unità REM. HTML a 16px, h1 a 2.4rem (38.4px), e body a 1.2rem (19.2px) con testo di esempio.

Perché Usare REM?

Quali sono i vantaggi di questo sistema?

In CSS, le unità REM offrono alcuni vantaggi molto validi:

Coerenza Reale: Tutto si scala proporzionalmente a partire dalla dimensione radice, quindi il tuo design apparirà sempre esattamente come lo hai immaginato su qualsiasi dispositivo.
Reattività: La scalatura proporzionata significa che il tuo sito web o app può adattarsi a una vasta gamma di dispositivi.
Manutenzione Facile: Quando tutti i tuoi stili si basano sulla stessa impostazione radice, è facile apportare modifiche generali all’occorrenza — Non devi visitare ogni singolo elemento e cambiare la dimensione del font manualmente. Questo ti fa anche risparmiare moltissimo tempo.
Grande Accessibilità: Effettivamente molte persone cambiano la dimensione del font predefinito dei loro browser per rendere i testi più facili da leggere. Utilizzando le dimensioni in REM, il tuo design può adattarsi a queste preferenze degli utenti.

Certo, non è tutto sole e arcobaleni. Ci sono alcuni svantaggi:

Wildcard di terze parti: Se il tuo sito include contenuti incorporati, potresti scoprire che testo e altri elementi non seguono le tue regole REM.
Calcoli complicati: Capire esattamente quanto sarà grande 1.2rem richiede un po’ di matematica.
Grande potere, maggiore responsabilità: Quando puoi modificare così facilmente la dimensione del testo in tutto il tuo sito web, devi fare attenzione con le modifiche per evitare disastri di design su tutto il sito!

Come regola generale, REM dovrebbe essere la tua scelta principale per la maggior parte dei progetti. È più facile da gestire rispetto alla dimensione EM e i risultati sono più prevedibili.

Tuttavia, ci sono momenti in cui EM è utile.

Per Conoscere EM

EM è un cliente complicato. Questa unità si basa sulla dimensione del font del suo elemento genitore — come un camaleonte che si adatta al suo ambiente.

La confusione inizia quando cominci a nidificare. La maggior parte degli elementi eredita la dimensione predefinita del carattere dal proprio genitore. Ma se anche il genitore utilizza dimensioni in EM? Potresti facilmente ritrovarti in un groviglio di proporzionalità.

Ecco un esempio semplice:

Immagina di avere una pagina che contiene un <div>. All’interno di quel box, abbiamo un tag <p> che contiene del testo.

<html> <div> <p>Del testo qui.</p> </div> </html>

Ora, dai un’occhiata al CSS per questo frammento HTML:

html { font-size: 16px; /* Dimensione predefinita iniziale */ } div { font-size: 1.2em; /* 19.2px */ } p { font-size: 1.2em; /* 23.04px */ }

Abbiamo iniziato definendo la dimensione del font predefinita per l’intera pagina. Finora tutto bene.

Successivamente, abbiamo detto che il contenuto di <div> dovrebbe essere 1.2em. In altre parole, il nostro testo dovrebbe essere il 120% dell’elemento genitore predefinito.

Per concludere, noi impostiamo anche la dimensione del carattere <p> a 1.2em.

Diagramma del dimensionamento dei font in unità EM che mostra elementi di testo nidificati e le loro dimensioni relative in base agli elementi genitori.

Aspetta un attimo! C’è un aumento significativo nella dimensione del testo, misurata in pixel.

Perché?

L’elemento <p> ha guardato la dimensione del font del suo elemento genitore <div> (19.2px) e l’ha presa come predefinita. E poiché abbiamo richiesto 1.2em, otteniamo un testo che è il 120% della dimensione predefinita.

Questi tipi di errori sono facili da commettere quando lavori con l’unità EM.

EM È Ottimo per Dimensioni Specifiche

Oltre agli svantaggi, l’unità EM può essere davvero utile per dimensionare componenti specifici.

Immagina di voler creare un pulsante che occupi sempre all’incirca la stessa quantità di spazio all’interno dell’elemento padre.

Il tuo codice HTML potrebbe essere:

<button class='button'>Cliccami</button>

Per stilizzare il tuo pulsante, potresti usare unità EM per font-size e padding.

Il CSS potrebbe sembrare qualcosa del genere:

.button { font-size: 1em; /* Dimensione relativa alla dimensione del testo del genitore */ padding: 0.5em 1em; /* Il padding scala con la dimensione del font */ }

Il codice sopra ci fornisce un semplice pulsante con un po’ di spazio intorno al testo.

Dimensionamento EM per componenti dell'interfaccia utente, mostrando come il padding del pulsante si adatti alla dimensione del font genitore mantenendo proporzioni consistenti.

Se la dimensione del font dell’elemento padre aumenta, anche la dimensione del font e il padding del pulsante si adegueranno di conseguenza.

In questo modo, potrai mantenere lo stesso equilibrio visivo tra gli elementi all’interno del parent, anche se cambi dispositivo o livello di zoom.

Perché Usare EM?

Data tutta la confusione, perché dovresti usare EM?

Beh, offre alcuni vantaggi:

Scalabilità Contestuale: Gli elementi si ridimensionano in base alla dimensione del loro elemento genitore, offrendoti un controllo più sfumato sulle dimensioni in tutto il tuo design.
Design basato su componenti: Le unità EM sono ottime per creare componenti autocontenuti e riutilizzabili che mantengono le stesse proporzioni.
Controllo Preciso: Puoi regolare le dimensioni ad ogni livello della struttura del documento, senza dover apportare modifiche generali.
Responsività: Come le unità REM, le unità EM permettono al tuo design di adattarsi a diverse dimensioni di schermo e preferenze degli utenti.

Come abbiamo visto, ci sono anche alcuni svantaggi:

Effetti Compositi: Gli elementi nidificati possono portare a dimensioni inaspettate, poiché i valori EM iniziano ad accumularsi.
Sfide nella Manutenzione: Cambiare la dimensione del font di un elemento padre influisce su tutti gli elementi figli, il che può portare a conseguenze non intenzionali — come testo del corpo enorme e titoli minuscoli.
Complessità nei Progetti di Grandi Dimensioni: Man mano che il tuo progetto cresce, tenere traccia di tutte le dimensioni relative può diventare una sfida.

In sintesi, EM può essere incredibilmente utile per i design basati su componenti e quando hai bisogno di un controllo preciso sulle relazioni tra gli elementi. È più flessibile del dimensionamento basato su pixel, ma richiede una pianificazione più attenta rispetto a REM.

REM o EM: Qual Dei Due Utilizzare?

Beh, queste erano molte informazioni interessanti. Tuttavia, se stai costruendo qualcosa, devi solo sapere quale unità CSS utilizzare.

Ecco il nostro verdetto:

REM è la scelta migliore per la maggior parte dei progetti perché è più scalabile e offre un maggiore controllo.
EM può essere uno strumento prezioso per scenari specifici che coinvolgono stili nidificati.

È anche importante notare che sia REM che EM sono generalmente migliori per il design moderno rispetto a unità assolute come px.

Sono anche più pratici per dimensionare il testo rispetto ad altre unità relative, come le unità del viewport (vh/vw) e la percentuale (%).

Diamo un’occhiata a REM vs. EM da un punto di vista ad alta quota:

Funzionalità	REM	EM
Ereditarietà	Consistente con l’elemento radice	Relativo all’elemento genitore
Scalabilità	Eccellente	Più limitata
Complessità	Inferiore, grazie alla coerenza	Superiore, a causa delle dimensioni contestuali
Manutenzione	Semplice — le modifiche alla dimensione radice si propagano	Può essere più complicato con elementi annidati
Accessibilità	Funziona bene con le preferenze dell’utente	Potrebbe richiedere aggiustamenti
Migliore per	Spaziatura globale e layout	Scalabilità specifica del componente

REM E EM: Domande Frequenti Sulla Dimensione Dei Caratteri

La guida dovrebbe aver chiarito gran parte della confusione riguardante queste unità molto simili.

Ma se hai ancora domande, ecco cosa devi sapere!

Dovrei usare REM o EM per il design responsive?

REM è generalmente la scelta migliore per i design responsivi in quanto ti permette di creare layout coerenti e scalabili che si adattano a diverse dimensioni di schermo.

L’unica eccezione si verifica quando vuoi creare unità discrete, dove tutti gli elementi mantengono lo stesso rapporto di dimensione.

Come posso evitare la complessità quando uso le unità EM?

Per evitare complessità con le unità EM, cerca di limitare l’annidamento degli elementi. Usa REM per le dimensioni globali e EM per piccoli aggiustamenti all’interno di componenti specifici.

C’è una dimensione di base consigliata per il REM?

Mentre non esiste una regola rigida, una dimensione comune della base per il REM è 16px. Tuttavia, puoi scegliere qualsiasi valore che si adatti alle tue preferenze di design e requisiti di accessibilità.

Approfondisci CSS

Vuoi saperne di più sul design digitale? Abbiamo molte ottime risorse di apprendimento per CSS:

Il Design Reattivo È Importante

L’unità CSS è un componente che viene spesso trascurato, come abbiamo menzionato all’inizio di questa guida.

Tuttavia, se vuoi creare un sito web o un’app che appaia bene su ogni dispositivo e funzioni per ogni utente, è importante considerare i dettagli del design.

Il dibattito tra REM o EM alla fine non ha molta importanza — L’essenziale è che il tuo sito sia accessibile, reattivo e facile da usare!

Ricorda solo che una bella interfaccia non significa nulla se il tuo sito o app non si carica. Quando si tratta di offrire ai tuoi utenti la migliore esperienza, considera di aggiornare il tuo hosting con DreamHost.

Offriamo una garanzia di uptime del 100% su tutti i nostri piani di hosting condiviso, con server ottimizzati e ottime funzionalità di sicurezza. Iscriviti oggi per vedere la differenza con i tuoi occhi!