Guida completa: Quando utilizzare Em vs. Rem

Potrete essere giunti a patti con l'utilizzo flessibile delle unità di misura, ma potrebbe non ancora esservi chiaro quando utilizzare rem e quando utilizzare em. Questo tutorial vi aiuterà a capirlo!

Sia rem che em sono unità flessibili, scalabili, che vengono tradotte dal browser in valori in pixel, a seconda delle impostazioni di dimensione del carattere nel vostro design. Se utilizzate un valore di 1em o 1rem, ciò potrebbe essere tradotto nel browser come qualcosa tra 16px e 160px o qualsiasi altro valore.

D'altra parte valori in px vengono utilizzati dal browser così come sono, pertanto 1px viene sempre visualizzato come esattamente 1px.

Provate il dispositivo di scorrimento in questo esempio in CodePen per vedere come il valore di unità rem ed em può essere tradotto in valori in pixel differenti, mentre le unità px impostate in modo esplicito rimangono fisse nel formato:

La grande domanda

L'utilizzo delle unità em e rem garantisce flessibilità al nostro design, e la possibilità di aumentare e rimpicciolire gli elementi, invece di rimanere bloccati con misure fisse. Possiamo usare questa flessibilità per rendere i nostri designs più facili da regolare durante lo sviluppo, più responsive e per consentire agli utenti di controllare la scala generale dei siti per la massima leggibilità.

Entrambe le unità em e rem forniscono questa flessibilità e funzionano in modo simile, quindi la grande domanda è, quando dovremmo usare valori em e quando dovremmo usare valori rem?

Differenza cruciale

La differenza tra le unità em e rem consiste in come il browser determina il valore px nel quale vengono tradotte. Comprendere questa differenza è la chiave per determinare quando utilizzare ciascuna unità.

Abbiamo intenzione di iniziare a lavorare con le unità rem ed em dalle basi per assicurarci che conosciate ogni minimo dettaglio. Poi ci sposteremo sul perché si dovrebbero usare le unità em o le unità rem.

Infine vedremo un'applicazione pratica su esattamente quali elementi di un design tipico è necessario utilizzare ogni tipo di unità.

Come le unità rem vengono tradotte in Pixel

Quando si utilizzano unità rem, la dimensione in pixel in cui vengono tradotte dipende dalla dimensione del carattere dell'elemento principale della pagina, ovvero l'elemento html. Quella dimensione di carattere viene moltiplicata per qualsiasi numero stiate usando con le unità rem.

Ad esempio, con una dimensione di carattere dell'elemento principale di 16px, 10rem sarebbe pari a 160px, cioè 10 x 16 = 160.

Come le unità em vengono tradotte in Pixel

Quando si utilizzano unità em, il valore in pixel finale è una moltiplicazione della dimensione del font sull'elemento cui si applica lo stile.

Ad esempio, se un div ha una dimensione di carattere di 18px, 10em sarebbe pari a 180px, cioè 10 x 18 = 180.

Importante da sapere:

Si tratta di un equivoco piuttosto diffuso che le unità em siano relative alla dimensione di carattere dell'elemento padre. Infatti, secondo le specifiche W3, sono relative alla dimensione carattere "dell'elemento su cui vengono utilizzate".

Le dimensioni del carattere dell'elemento padre possono influenzare i valori em, ma quando ciò accade è unicamente a causa dell'ereditarietà. Diamo un'occhiata al perché e vediamolo in azione.

L'effetto dell'ereditarietà sulle unità em

Lavorare con le unità em può risultare complicato quando si tratta di ereditarietà, perché ogni elemento eredita automaticamente la dimensione del carattere dell'elemento padre. L'effetto dell'ereditarietà può essere sottoposto a override solo impostando in modo esplicito una dimensione di carattere con un'unità non soggetta a ereditarietà, ad esempio px o vw.

La dimensione del carattere dell'elemento su cui vengono utilizzate le unità em determina la loro dimensione. Ma tale elemento può avere ereditato una dimensione del carattere da suo padre, che ha ereditato una dimensione del carattere da suo padre e così via. In questo modo è possibile per qualsiasi valore di em essere affetto dalla dimensione del carattere di uno qualsiasi dei suoi genitori.

Diamo un'occhiata a un esempio. Sentitevi liberi di provare in CodePen finché affrontiamo questo argomento. Andando avanti, è possibile utilizzare Chrome Developer Tools o Firebug per Firefox per controllare come vengono calcolati i valori in pixel delle nostre unità em.

Esempio di ereditarietà in em

Se abbiamo una pagina con una dimensione del carattere di 16px (solitamente il valore predefinito) e un div figlio all'interno di esso con padding di 1.5em, quel div erediterà la dimensione del carattere di 16px dall'elemento principale. Quindi il suo padding risulterà di 24px, cioè 1.5 x 16 = 24.

Quindi cosa succede se inseriamo un altro div che include il primo e impostiamo il suo font-size a 1.25em?

Il nostro div erediterà la dimensione del carattere di 16px e lo moltiplicherà per il proprio font-size di 1.25em. Ciò porterà il div ad avere una dimensione pari a 20px, cioè 1,25 x 16 = 20.

Ora il nostro div originale non erediterà direttamente dall'elemento principale, ma erediterà una dimensione pari a 20px dal suo nuovo div padre. Il suo valore in padding di 1.5em ora equivale a 30px, cioè 1,5 x 20 = 30.

Questo effetto di ridimensionamento può essere ulteriormente aggravato se aggiungiamo una dimensione di carattere em basato sul nostro div originale, diciamo 1.2em.

Il div eredita la dimensione del carattere di 20px dal padre, poi lo moltiplica per 1.2em, dandogli una nuova dimensione di 24px, cioè 1,2 x 20 = 24.

Il padding di 1.5em del div ora cambierà dimensioni nuovamente con la nuova dimensione del carattere, questa volta di 36px, cioè 1,5 x 24 = 36.

Infine, per illustrare ulteriormente che l'unità em è relativa alla dimensione di carattere dell'elemento su cui viene usata, (non l'elemento padre), vediamo cosa succede al nostro padding di 1.5em se abbiamo impostato in modo esplicito il div in modo da utilizzare una dimensione pari a 14px, un valore non soggetto a ereditarietà.

Ora, il nostro padding è sceso a 21px, cioè 1.5 x 14 = 21. Non è influenzata dalla dimensione di carattere dell'elemento padre.

Con tutto questo potenziale per la complessità, si può capire perché sia importante saper utilizzare l'unità em in modo gestibile.

L'effetto delle impostazioni del Browser sul font size dell'elemento HTML

Per impostazione predefinita i browsers di solito hanno una dimensione di carattere di 16px, ma può essere modificata dall'utente in qualsiasi valore tra 9px e 72px .

Importante da sapere:

L'elemento html eredita la dimensione del font dalle impostazioni del browser, a meno che non venga sottoposto a override con un valore fisso impostato in modo esplicito.

Quindi mentre la dimensione del carattere nell'elemento html è quello che determina direttamente i valori rem, quella dimensione del carattere può provenire dalle impostazioni del browser.

Così le impostazioni di dimensione di carattere del browser possono influenzare il valore di ogni unità rem utilizzata in un design, come anche ogni unità em tramite ereditarietà.

Effetto delle impostazioni del browser quando nessun Font Size HTML è impostato

A meno che non sottoposto a override, sarà l'elemento html ad ereditare qualunque tipo di impostazione predefinita abbia il browser come dimensione di carattere. Ad esempio, prendiamo un sito dove nessuna proprietà font-size è impostata sull'elemento html.

Se un utente ha il browser impostato alla dimensione di carattere predefinita di 16px, la dimensione di carattere principale sarà 16px. In Chrome Developer Tools si può vedere ciò che ha ereditato un elemento selezionando Show inherited properties nella tab Computed.

In questo caso 10rem equivale a 160px, cioè 10 x 16 = 160.

Se l'utente aumenta la dimensione del font del browser fino a 18px, la dimensione del carattere principale diventerà 18px. Ora 10rem si tradurrà in 180px, cioè 10 x 18 = 180.

Effetto delle impostazioni del browser con le unità em sul Font Size HTML

Quando una dimensione di carattere basata su em è impostata sull'elemento html, il valore in pixel in cui si traduce sarà un multiplo dell'impostazione di dimensione di carattere del browser.

Ad esempio, se l'elemento html del sito avesse una proprietà font-size impostata a 1.25em, la dimensione del carattere principale sarebbe 1,25 volte l'impostazione del font-size del browser.

Se la dimensione del carattere del browser fosse impostata a 16px, la dimensione del carattere principale sarebbe 20px, cioè 1,25 x 16 = 20.

In questo caso 10rem sarebbe uguale a 200px, cioè 10 x 20 = 200.

Tuttavia, se la dimensione del carattere del browser fosse impostata a 20px, la dimensione di carattere principale si tradurrebbe in 25px, cioè 1,25 x 20 = 25.

Ora 10rem sarebbe uguale a 250px, cioè 10 x 25 = 250.

Riassumendo le differenze tra em e rem

Tutto ciò che abbiamo visto porta a ciò che segue:

• La traduzione di unità rem in valori pixel è determinata dalla dimensione del carattere dell'elemento html. Questa dimensione del carattere è influenzata per ereditarietà dall'impostazione di dimensione di carattere del browser a meno che non sottoposta a override in modo esplicito con un'unità non soggetta ad ereditarietà.

• La traduzione di unità em in valori in pixel è determinata dalla dimensione del carattere dell'elemento su cui vengono usate. Questa dimensione del carattere è influenzata per ereditarietà da elementi padre a meno che non sottoposta a override in modo esplicito con un'unità non soggetta ad ereditarietà.

Perché usare unità rem:

Il più grande vantaggio che offrono le unità rem non consiste solo nel fatto forniscono un dimensionamento coerente indipendentemente dall'ereditarietà dell'elemento. Piuttosto, ci forniscono un metodo per fare in modo che le impostazioni utente della dimensione di carattere influenzino ogni singolo aspetto del layout di un sito utilizzando unità rem dove eravamo abituati a utilizzare unità px.

Per questo motivo lo scopo principale dell'utilizzo di unità rem dovrebbe essere quello di assicurare che qualsiasi impostazione un utente abbia sul proprio browser, il layout si regolerà per adattare la dimensione del testo all'interno di esso.

Un sito può essere progettato concentrandosi inizialmente sulla dimensione di carattere predefinita e più comune del browser di 16px.

Ma utilizzando unità rem, se un utente aumenterà la dimensione del carattere, verrà mantenuta l'integrità del layout, e il testo non verrà schiacciato in uno spazio fisso pensato per un testo più piccolo.

E se l'utente ridurrà la dimensione del carattere, l'intero layout si ridimensionerà, e non si verrà lasciati con una minuscola parte di testo in un deserto di spazi vuoti.

Gli utenti modificano le impostazioni di dimensione del carattere per ogni tipo di ragione, dalla vista sforzata alla scelta di impostazioni ottimali per i dispositivi che possono essere notevolmente differenti in dimensione e distanza di visione. Scegliere queste impostazioni consente una migliore esperienza utente.

Importante da sapere:

Alcuni progettisti utilizzano layout basati su rem in combinazione con un'impostazione fissa di font-size in unità px sull'elemento html. Ciò avviene generalmente in modo che un cambiamento di dimensione del carattere nell'elemento html possa far aumentare o diminuire complessivamente il design.

Sconsigliamo vivamente questo approccio perché esegue l'override della dimensione di carattere dell'elemento html ereditata dalle impostazioni del browser dell'utente. Quindi ciò impedisce alle impostazioni di avere qualsiasi effetto e rimuove la possibilità dell'utente di ottimizzare la miglior visibilità.

Se si desidera modificare la dimensione del carattere nell'elemento html, fatelo con un valore di em o rem in modo che la dimensione del carattere principale sia un multiplo delle impostazioni di dimensione del carattere del browser dell'utente.

Ciò vi permetterà di ridimensionare il vostro design modificando la dimensione di carattere dell'elemento html, ma manterrete l'effetto delle impostazioni del browser dell'utente.

Perché usare unità em

Il valore aggiunto che offrono le unità em consiste nel fatto che permettono valori di dimensionamento determinati da una dimensione di carattere diversa da quella dell'elemento html.

Per questo motivo, lo scopo principale delle unità em dovrebbe essere quello di consentire scalabilità all'interno del contesto di un elemento di design specifico.

Ad esempio, è possibile impostare padding, margin e line-height intorno a una voce di menu di navigazione per utilizzare valori em.

In questo modo se si modifica la dimensione del carattere del menu la spaziatura attorno alle voci di menu verrà ridimensionata proporzionalmente, indipendentemente dal resto del layout.

Nella sezione precedente sull'ereditarietà avete visto quanto velocemente tener traccia delle unità em possa sfuggire di mano. Per questo motivo, consigliamo di utilizzare solo unità em se si identifica una ben definita necessità.

Applicazione pratica

Potrebbe esserci qualche dibattito tra web designers e siamo sicuri che persone diverse hanno diversi approcci preferiti, tuttavia la nostra raccomandazione è la seguente.

Usate unità em per:

Qualsiasi ridimensionamento che dovesse scalare a seconda della dimensione del carattere di un elemento diverso dall'elemento principale.

In linea generale, l'unico motivo che avrete per utilizzare unità em sarà per ridimensionare un elemento che non ha ridimensionamento di carattere predefinito.

Secondo il nostro esempio precedente, componenti di design come voci di menu, pulsanti, e intestazioni avranno dimensioni di carattere esplicitamente dichiarato. Se venissero modificate queste dimensioni di carattere, vorrete che l'intero componente scali proporzionalmente.

Questa linea guida si applica alle impostazioni delle proprietà comuni margin, padding, width, height e line-height, quando utilizzata su elementi con font-size non predefinito.

Raccomandiamo, quando si utilizzano unità em, che la dimensione del carattere dell'elemento su cui vengono utilizzate sia impostato in unità rem per preservare la scalabilità, evitando confusione legata all'ereditarietà.

In genere non utilizzate unità em per le dimensioni di carattere

È abbastanza comune vedere unità em utilizzate per il ridimensionamento, in particolare nelle intestazioni, tuttavia vorremmo far presente che i designs sono più gestibili se le unità rem sono utilizzate per la dimensione dei caratteri.

Il motivo per cui le intestazioni spesso utilizzano unità em consiste nel fatto che sono una scelta migliore delle unità px, essendo relative alle dimensioni di testo normale. Tuttavia le unità rem possono raggiungere questo obiettivo altrettanto bene. Se viene apportata qualsiasi regolazione della dimensione del carattere all'elemento html, le dimensioni dell'intestazione scaleranno anch'esse.

Provate a cambiare la dimensione del carattere di em sull'elemento html in questo CodePen per vedere voi stessi:

Più spesso che no, non vogliamo che le dimensioni dei nostri font scalino a seconda di elementi diversi da quello principale, con solo poche eccezioni.

Un esempio dove potremmo desiderare una dimensione di carattere in em potrebbe essere un menu drop down, dove abbiamo voci di secondo livello del menu con dimensioni che dipendono dalle dimensioni del carattere del primo livello. Un altro esempio potrebbe essere un'icona utilizzata all'interno di un pulsante, dove la dimensione dell'icona dovrebbe fare riferimento alla dimensione del testo del pulsante.

Tuttavia la maggior parte di elementi in un web design non tenderanno ad avere questo tipo di requisito, così generalmente vorrete utilizzare unità rem per il font sizing, utilizzando unità em solo dove richiesto.

Utilizzate unità rem per:

Qualsiasi ridimensionamento che non necessita di unità em per i motivi descritti sopra, e che dovrebbe scalare a seconda delle impostazioni di dimensione del carattere del browser.

Ciò conta per quasi tutto in un design standard incluse la maggior parte delle altezze, larghezze, padding, margini, larghezze bordo, dimensioni dei caratteri, ombre, praticamente quasi ogni parte del layout.

In poche parole, tutto ciò che può essere reso scalabile con unità rem, dovrebbe esserlo.

Suggerimento

Durante la creazione di layout è spesso più facile pensare in pixel ma usare unità rem.

È possibile avere automaticamente pixel calcolati in rem tramite un preprocessore come Stylus / Sass / Less, o un postprocessor come PostCSS con il plugin PXtoRem.

In alternativa, è possibile utilizzare PXtoEM per eseguire manualmente le conversioni.

Utilizzate sempre Media Queries rem

Importante, quando si utilizzano unità rem per creare un design scalabile in modo uniforme, le media queries dovrebbero essere in unità rem. Questo farà sì che qualunque misura di font abbia il browser di un utente, le media queries risponderanno e modificheranno il layout.

Ad esempio, se un utente ridimensiona il testo troppo grande, potrebbe essere necessario ridimensionare il layout da due colonne a una singola colonna, proprio come potrebbe essere visualizzato su un più piccolo dispositivo mobile.

Se i breakpoints sono a larghezze in pixel fissi, solo una diversa dimensione del viewport può attivarli. Tuttavia con i breakpoints basati su rem risponderanno a tipi diversi di dimensione di carattere.

Non utilizzate em o rem per:

Larghezze di Layout Multi Colonna

Larghezze di colonne in un layout dovrebbero essere basate su % così potranno adattarsi fluidamente a dimensioni del viewport imprevedibili.

Tuttavia singole colonne dovrebbero ancora incorporare valori rem tramite un'impostazione max-width.

Per esempio:

1

.container {

2

    width: 100%;

3

    max-width: 75rem;

4

}

Ciò mantiene la colonna flessibile e scalabile, ma impedisce di farla diventare troppo ampia per il testo all'interno in modo che rimanga comodamente leggibile.

Quando un elemento dovrebbe essere rigorosamente non scalabile

In un tipico web design non ci saranno molte parti del layout che non possano essere progettate per la scalabilità. Tuttavia occasionalmente si incontrano elementi che realmente necessitano l'utilizzo di valori espliciti fissi ai fini di prevenire il ridimensionamento.

La precondizione per impiegare i valori di ridimensionamento fisso dovrebbe essere che se l'elemento in questione scalasse si spezzerebbe. Ciò non accade spesso, quindi prima di essere tentati dall'utilizzo delle unità px, chiedetevi se non sia assolutamente indispensabile.

Riassumendo

Facciamo un riassunto rapido di ciò che abbiamo visto:

• Le unità rem ed em sono calcolate in valori in pixel dal browser, basandosi sulle dimensioni di carattere nel vostro design.
• Le unità em si basano sulla dimensione del carattere dell'elemento su cui vengono usate.
• Le unità rem si basano sulla dimensione del carattere dell'elemento html.
• Le unità em possono essere influenzate dall'eredità di dimensioni carattere di elementi padre

• Le unità rem possono essere influenzate dall'eredità di dimensioni carattere delle impostazioni del browser.

• Utilizzate unità em per il dimensionamento che dovrebbe scalare a seconda delle dimensioni del carattere di un elemento diverso dal principale.
• Utilizzate unità rem per il dimensionamento che non ha bisogno di unità em, e che dovrebbe scalare a seconda delle impostazioni di dimensione carattere del browser.
• Utilizzate unità rem a meno che non siate sicuri di aver bisogno di unità em, anche per le dimensioni dei caratteri.
• Utilizzate unità rem per le media queries
• Non utilizzate em o rem in larghezze di layout multi colonna - usate invece %.
• Non utilizzate em o rem se il ridimensionamento inevitabilmente causerebbe la rottura di un elemento del layout.

Speriamo ora abbiate un quadro completo e concreto su come funzionino le unità em e rem e sappiate come sfruttarle al meglio nei vostri designs.

Vi incoraggiamo a provare le linee guida contenute in questo tutorial per voi stessi e a godere della completa scalabilità e reattività dei layouts che vi consentiranno di creare.