Blog

CSS – perchè usare il rem come unità di misura della font-size

Il linguaggio CSS è, ad oggi, un requisito fondamentale per coloro che aspirano a diventare front end web developer. Come, ormai, sappiamo bene (ma è sempre bene ribadirlo!!) insieme al linguaggio JavaScript  e al linguaggio HTML è necessario per realizzare il front end di un’applicazione web

CSS cos’è?

Il linguaggio CSS è un linguaggio di stile; CSS è l’acronimo di Cascading Style Sheets e questo linguaggio viene usato per definire, appunto, l’aspetto di un documento HTML o XML. Il linguaggio è composto da una serie di regole che ci permettono di modificare i cosiddetti “fogli stile”, i quali descrivono la presentazione estetica della pagina web, tra cui layout, font, immagini, colori e via discorrendo. 

Quando si tratta di font e formattazione è facile cadere in errori di dimensioni generiche per le scritte presenti all’interno della nostra pagina web. CSS mette a disposizione le unità relative (relative units) come soluzione al problema, per fornire uno specifico unico stile ad una pagina web.

Alcune di queste, em e rem, sostituiscono l’unità di misura generica e universale px (pixel). Le unità relative sono fondamentali perché al giorno d'oggi le dimensioni dello schermo sono disponibili in diverse dimensioni e forme. Se usiamo px, la dimensione dell'elemento rimane costante indipendentemente dalla dimensione dello schermo. Quindi l'uso di unità relative come em e rem è considerata una good practice

Le unità CSS sono quindi classificate in due modi: unità assolute e relative. %, em, rem, vh e vw sono tutte unità relative.

Parlando di em e rem, il primo si riferisce alla dimensione dell'elemento corrente. Se la dimensione dell'elemento corrente/genitore non è impostata, di solito l'impostazione predefinita è la dimensione nel CSS del browser. Circa 16px.

L'em non è solo per la dimensione del carattere. È un'unità relativa che puoi usare per impostare i valori di proprietà come font-size, margin, padding, width, height e line-height di un elemento.

Il rem è la radice em. Puoi usare rem ovunque riesci ad usare em.

Quindi quando rem è una scelta migliore rispetto a em?

Se, inavvertitamente, applichi di nuovo una dimensione del carattere di 0.5em, la dimensione si riduce a 1/4 dell'originale. Questo per le caratteristiche base del linguaggio CSS.

Nota: questo accade solo se usi unità relative. Applicare una regola che includa le unità assolute, non influenzerà il risultato finale.

 1. <!DOCTYPE html>
 2. <html lang="it">
 3. <head>
 4.     <meta charset="UTF-8">
 5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7.     <title> Ti mostro la differenza tra em e rem!</title>
 8. </head>
 9. <body>
10.  
11. <h1> La differenza tra em e rem nella grandezza del font di un elemento </h1>
12. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
13.
14. <a href="#">Clicca qui!</a>
15.  
16. </p>
17.  
18. </body>
19. </html>

20.  

CSS: 

1. @media all and (max-width:768px){
 2.  
 3. h1{
 4. font-size:0.50em;
 5. }
 6. p {
 7. font-size:0.50em;
 8. }
 9. a {
10. font-size:0.50em;
11. }
12. }

 

Questo codice CSS ridurrà il “Clicca qui!” più piccolo di ¼ rispetto alla grandezza originale. Praticamente diventa illeggibile, specialmente su un display di un dispositivo mobile. Questo accade perché il tag a è innestato all’interno di p nel codice HTML. Gli stili ,quindi, si sovrappongono è la grandezza del font progressivamente si riduce.

 1. @media all and (max-width:768px){
 2. h1{
 3. font-size: 0.50em;
 4. }
 5. p { 
 6. font-size:0.50em;
 7. }
 8. a {
 9. font-size:0.50rem;
10. }
11. }

In questo modo invece, usando rem la grandezza dell’elemento “Clicca qui!” non si ridurrà, adeguandosi alla grandezza degli altri elementi.

Questo è il motivo per cui in certe situazioni utilizzare rem diventa più utile nel settare la grandezza del font di una pagina web. 

Se vuoi esercitarti con il linguaggio CSS, puoi esercitarti con i nostri esercizi CSS e, se vuoi approfondire più aspetti di questo linguaggio di stile e delle unità di misura di cui abbiamo parlato, non perderti la nostra guida html e css in italiano!

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Il settore tech è appannaggio esclusivo della popolazione maschile? Questo preconcetto è abbastanza diffuso, ma come stanno davvero le cose? Oggigiorno il mondo tech, non solo in Italia, è in gran …
Offrire agli utenti di un sito o di un’applicazione un’esperienza di utilizzo positiva è cruciale per creare un prodotto che soddisfi le aspettative del committente. Ecco perché, tra le mansion…
Valutare in modo accurato i tempi di lavoro è un fattore importante per mantenere alta la produttività del team e completare progetti nei tempi prestabiliti. È utile, inoltre, per tenere aggiornati…

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.