Em e Rem

Secondo Wikipedia in inglese, la em è una unità nel campo della tipografia uguale alla dimensione specificata in punti. Per esempio, una em in un carattere in corpo 16 punti è pari a 16 punti. Il nome deriva dal fatto che secondo le proporzioni in uso ai tempi dei caratteri mobili in metallo, la lettera M maiuscola era larga quanto l’altezza del corpo del carattere; in pratica la lettera era inserita in un quadrato. Esisteva il trattino largo una em o lo spazio largo una em.

Al giorno d’oggi le esigenze sono completamente cambiate: sono cambiate le proporzioni delle lettere e persino il modo in cui si misura il corpo del carattere. Ma il concetto di em è sopravvissuto trovando una nuova collocazione, quella delle pagine web. Per impaginare un testo in maniera più dinamica, visto che la visualizzazione di una pagina non dipende soltanto dal server che la trasmette ma anche dalle impostazioni del dispositivo che la riceve, nonché per semplificarne la manutenzione e la modifica, non si usa fornire le informazioni in maniera assoluta, ma in maniera relativa, tramite i cosiddetti Css o fogli di stile a cascata. In pratica si fissa una grandezza di default per un testo di un certo tipo, e poi si esprimono tutte le grandezze in relazione a quello (il default è 15). Quindi se voglio che un titolo sia grande il doppio rispetto al testo sottostante posso impostarlo a grandezza 2em, cioè 2 volte la em: se la grandezza di base è 15, il titolo verrà in grandezza 30. Em è quindi sinonimo del corpo di riferimento. Per cui quando il programmatore della pagina vuole variare la grandezza del testo mantenendo invariate le proporzioni, non deve andare ad eseguire i calcoli e ritoccare tutte le impostazioni: gli basta intervenire sulla grandezza di base, passandola da 15 a 16 ad esempio, e automaticamente i titoli verranno fuori in grandezza 32, ossia il doppio del testo, esattamente come prima (e in automatico verranno cambiate tutte le altre dimensioni nella pagina impostate con lo stesso sistema).

Questo sistema può causare qualche problema in caso di blocchi annidati in altri blocchi, perché em non va a pescare la grandezza di riferimento all’inizio del codice, ma attinge a quella del livello direttamente soprastante. Per cui c’è il rischio di perdere il controllo sulla grandezza dei caratteri: se un tipo di blocco che imposta la grandezza al doppio della em viene messo dentro un elemento dello stesso tipo ecco che siamo arrivati al quadruplo della grandezza iniziale. E non era quello che il programmatore voleva. Per cui è stata ideata una nuova grandezza, che si chiama rem, ossia root-em, la em della radice, o del livello di riferimento. Se dentro un elemento in cui il testo è a 2rem ce ne metto un altro che pure ha il testo a 2rem, entrambi i testi sono della stessa dimensione (il testo del secondo elemento non è il doppio rispetto al precedente, ma il doppio rispetto al valore di riferimento, che è uguale per entrambi). Sul sito Digital Ocean c’è una spiegazione chiara con tanto di esempi di codice (tutta in inglese).

L’articolo di Wikipedia in Italiano è un po’ più confuso inizialmente: si parla vagamente di “una unità di misura utilizzata nel campo della tipografia” e si dice che “l’unità è definita in funzione di uno specifico tipo di carattere, quindi è di lunghezza variabile”. Subito dopo l’articolo spiega che il concetto si è modificato nel corso del tempo, in maniera tale da essere utilizzato anche per quei font che non prevedono l’alfabeto latino ma ad esempio solo l’arabo o il cinese. Infine si va a dare la definizione riguardante l’uso corrente, che non fa riferimento alla larghezza della lettera, ma all’altezza. In questo modo la em non viene propriamente a coincidere col “blocco che sarebbe necessario per contenere ognuna delle lettere del set di caratteri considerata individualmente”: “È leggermente più ampia della distanza tra il punto più basso della lettera più discendente e il punto più alto della lettera più ascendente, talvolta includendo l’altezza aggiuntiva dei segni diacritici”. Insomma, nel discorso riguardante la em rientrerebbe quel fenomeno che abbiamo già osservato, in base al quale 10 righe di Times New Roman occupano in verticale uno spazio diverso rispetto a 10 righe in Arial nella stessa grandezza. Il corpo sarebbe lo stesso, ma la em sarebbe diversa. Dicono loro.

Sopra l’articolo c’è già un disclaimer che dice che le fonti non sono sufficienti. Del resto questo dettaglio è totalmente inutile nell’uso comune: al programmatore interessa soltanto che le em serve per impostare la grandezza di un testo in proporzione alla grandezza di un altro testo, comunque questa sia calcolata.

Nei Css la em non viene usata soltanto per impostare le grandezze dei caratteri, ma anche qualsiasi altra dimensione possa essere importante per l’impaginazione: l’interlinea, il margine, la larghezza della colonna, eccetera. Spesso il numero che viene fornito contiene anche i decimali: esempio la dimensione di un testo impostata a 1.5em significa che le lettere sono grandi una volta e mezzo rispetto alla grandezza di riferimento, qualunque sia.