{"id":72698,"date":"2024-08-26T07:00:00","date_gmt":"2024-08-26T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=72698"},"modified":"2025-06-11T13:19:15","modified_gmt":"2025-06-11T20:19:15","slug":"rem-vs-em-come-scegliere-l8217unita-css-giusta-it","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/","title":{"rendered":"REM vs. EM: Come Scegliere l&#8217;Unit\u00e0 CSS Giusta"},"content":{"rendered":"\n<p>Probabilmente non sogni la dimensione degli elementi CSS di notte, ma se stai <a href=\"https:\/\/www.dreamhost.com\/website-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">costruendo un sito web<\/a> o un&#8217;app, questo argomento merita sicuramente di essere considerato.<\/p>\n\n\n<p>Mentre alcune unit\u00e0 CSS si integrano bene con il tuo design responsivo, altre potrebbero mostrarsi ribelli. Essere in grado di distinguere i diversi caratteri pu\u00f2 risparmiarti grossi mal di testa in futuro.<\/p>\n\n\n<p>Prendi in considerazione l&#8217;accoppiamento di REM ed EM. Quale dovresti usare e perch\u00e9?<\/p>\n\n\n<p>Rimani con noi per i prossimi paragrafi, e riveleremo tutto!<\/p>\n\n\n<h2 id=\"h-rem-vs-em-in-a-nutshell\" class=\"wp-block-heading\">REM vs. EM in Pochissime Parole<\/h2>\n\n\n<p>Se stai cercando una risposta rapida, <strong>ecco la versione TL;DR<\/strong>:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>REM:<\/strong> Questa unit\u00e0 si basa sull&#8217;elemento radice (solitamente il tag <code>&lt;html&gt;<\/code>). Indipendentemente da ci\u00f2 che accade nella pagina, le tue dimensioni rimarranno consistenti.<\/li>\n\n\n\n<li><strong>EM:<\/strong> Questa unit\u00e0 cerca indicazioni dall&#8217;alto. Se l&#8217;elemento genitore cambia, anche le tue dimensioni si adegueranno.<\/li>\n\n\n<\/ul>\n\n\n<p>Se vuoi ricordare la differenza, tieni presente che la &#8220;R&#8221; in REM sta per &#8220;Root&#8221;.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1119\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css.webp\" alt=\"Confronto tra le unit\u00e0 REM e EM in CSS, mostrando come si relazionano rispettivamente agli elementi root e parent.\" class=\"wp-image-48908 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-300x210.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1024x716.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-768x537.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1536x1074.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-600x420.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1200x839.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-730x511.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1460x1021.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-784x548.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1568x1097.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-877x613.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1119;\" \/><\/figure>\n\n\n<p><strong><em>Nota per Nerd<\/em><\/strong><em>: Perch\u00e9 entrambe le unit\u00e0 terminano con &#8220;EM&#8221;? Questa non \u00e8 un&#8217;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?<\/em><\/p>\n\n\n<p><strong>Allora, quale dovresti usare?<\/strong><\/p>\n\n\n<p>Beh, dipende.&nbsp;<\/p>\n\n\n<p>Se desideri che il testo si adatti all&#8217;ambiente circostante, EM potrebbe essere l&#8217;opzione migliore. Ma se vuoi che le dimensioni rimangano consistenti in tutto il tuo sito web, dovresti passare a REM.<\/p>\n\n\n<p>Perch\u00e9?<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>EM:<\/strong> Pi\u00f9 flessibile, ma pu\u00f2 diventare confuso se non stai attento.<\/li>\n\n\n\n<li><strong>REM:<\/strong> Dimensionamento coerente, ottimo per il design reattivo.<\/li>\n\n\n<\/ul>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Design Adattivo<\/h3>\n    <p>Il design adattivo permette a un sito web di adattarsi alle dimensioni dello schermo del dispositivo su cui viene visualizzato. Il sito web apparir\u00e0 quindi diversamente su dispositivi differenti.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/responsive-design\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi di pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<p>Sei ancora confuso? Non preoccuparti, approfondiremo tra un attimo.<\/p>\n\n\n<p>Ricorda solo questo per ora: <strong>REM \u00e8 generalmente la scelta pi\u00f9 sicura per la maggior parte dei siti web<\/strong>.<\/p>\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tHow to Learn CSS In 2026 (Fast &amp; Free)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/learn-css\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n<h2 id=\"h2_understanding-rem-and-em\" class=\"wp-block-heading\">Capire REM e EM<\/h2>\n\n\n<p>Bene, entriamo un po&#8217; nel dettaglio.<\/p>\n\n\n<p><strong>Sia REM che EM sono unit\u00e0 relative. Ci\u00f2 significa che mantengono la stessa dimensione <em>relativa<\/em> a un determinato punto di riferimento.<\/strong><\/p>\n\n\n<p>Questo tipo di <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">dimensionamento gioca un ruolo chiave nel design responsivo<\/a>.<\/p>\n\n\n<p>Le dimensioni assolute (ad esempio, px) rimangono sempre le stesse, il che significa che il testo pu\u00f2 apparire minuscolo su un desktop e enorme su un telefono. Al contrario, le unit\u00e0 relative possono adattarsi a diversi dispositivi e layout.<\/p>\n\n\n<p>In un contesto digitale, REM e EM sono ancora principalmente utilizzati per misurare il testo. Tuttavia, puoi anche utilizzare queste unit\u00e0 per:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Margini<\/li>\n\n\n\n<li>Padding<\/li>\n\n\n\n<li>Larghezza e altezza<\/li>\n\n\n\n<li>Altezza della linea<\/li>\n\n\n\n<li>Propriet\u00e0 del bordo<\/li>\n\n\n\n<li>Ombra del box<\/li>\n\n\n\n<li>Posizionamento<\/li>\n\n\n\n<li>Query dei media<\/li>\n\n\n<\/ul>\n\n\n<p>In altre parole, REM ed EM sono utili ogni volta che desideri dimensioni flessibili all&#8217;interno del tuo design.<\/p>\n\n\n<p>Bene, questo copre in gran parte il terreno comune tra queste due unit\u00e0.<\/p>\n\n\n<p>Ora, diamo un&#8217;occhiata pi\u00f9 da vicino a ci\u00f2 che rende ognuno di essi unico.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h2_getting-to-know-rem\" class=\"wp-block-heading\">Conoscere REM<\/h2>\n\n\n<p>REM sta per &#8220;root em.&#8221; Quando utilizzi questa unit\u00e0, stai definendo quanto grande dovrebbe essere qualcosa, rispetto alla dimensione del font del tuo elemento radice (solitamente il tuo tag <code>&lt;html&gt;<\/code>).<\/p>\n\n\n<p>La maggior parte dei browser imposta per impostazione predefinita <code>16px<\/code> per l&#8217;elemento radice. Tuttavia, \u00e8 una buona idea definire la dimensione predefinita del tuo carattere <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">utilizzando CSS<\/a>.<\/p>\n\n\n<p>Puoi farlo cos\u00ec:<\/p>\n\n\n<p><code>html { font-size: 16px; \/* La tua dimensione base del carattere *\/ }<\/code><\/p>\n\n\n<p>Qualunque dimensione scegli diventa <code>1rem<\/code>. Questo \u00e8 il tuo nuovo punto di riferimento per l&#8217;intera pagina.<\/p>\n\n\n<p>Qualsiasi figura che sia pi\u00f9 grande o pi\u00f9 piccola cambier\u00e0 la dimensione del tuo elemento target, rispetto al tuo default scelto.<\/p>\n\n\n<p>\u00c8 un po&#8217; complicato da spiegare chiaramente, quindi ecco un esempio semplice:<\/p>\n\n\n<p><code>html { font-size: 16px; \/* La dimensione base del tuo carattere *\/ }<br>body { font-size: 1.2rem; \/* 19.2px *\/ }<br>h1 { font-size: 2.4rem; \/* 38.4px *\/ }<\/code><\/p>\n\n\n<p>In questo scenario, abbiamo definito la dimensione del carattere del tag <code>&lt;html&gt;<\/code> come <code>16px<\/code>. Questa \u00e8 la nostra base di <code>1rem<\/code>.<\/p>\n\n\n<p>Vogliamo che il testo del nostro corpo sia un po&#8217; pi\u00f9 grande di cos\u00ec. Quindi, impostiamo la dimensione del font del <code>&lt;body&gt;<\/code> a <code>1.2rem<\/code>. Questo \u00e8 il 120% del valore di base.<\/p>\n\n\n<p>L&#8217;intestazione principale sulla nostra pagina deve essere molto pi\u00f9 grande. Impostando la dimensione del font di <code>&lt;h1&gt;<\/code> a <code>2.4rem<\/code>, possiamo rendere il titolo grande il 240% rispetto alla nostra linea di base.<\/p>\n\n\n<p>Finirai con qualcosa del genere:<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1133\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem.webp\" alt=\"Diagramma del dimensionamento dei caratteri in unit\u00e0 REM. HTML a 16px, h1 a 2.4rem (38.4px), e body a 1.2rem (19.2px) con testo di esempio.\" class=\"wp-image-48911 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1024x725.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-768x544.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1536x1088.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-600x425.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1200x850.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-730x517.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1460x1034.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-784x555.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1568x1110.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-877x621.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1133;\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\">Perch\u00e9 Usare REM?<\/h3>\n\n\n<p>Quali sono i vantaggi di questo sistema?<\/p>\n\n\n<p>In CSS, le unit\u00e0 REM offrono alcuni vantaggi molto validi:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Coerenza Reale:<\/strong> Tutto si scala proporzionalmente a partire dalla dimensione radice, quindi il tuo design apparir\u00e0 sempre esattamente come lo hai immaginato su qualsiasi dispositivo.<\/li>\n\n\n\n<li><strong>Reattivit\u00e0:<\/strong> La scalatura proporzionata significa che il tuo sito web o app pu\u00f2 adattarsi a una vasta gamma di dispositivi.<\/li>\n\n\n\n<li><strong>Manutenzione Facile:<\/strong> Quando tutti i tuoi stili si basano sulla stessa impostazione radice, \u00e8 facile apportare modifiche generali all&#8217;occorrenza \u2014 Non devi visitare ogni singolo elemento e cambiare la dimensione del font manualmente. Questo ti fa anche risparmiare <em>moltissimo<\/em> tempo.<\/li>\n\n\n\n<li><strong>Grande Accessibilit\u00e0:<\/strong> Effettivamente <a href=\"https:\/\/medium.com\/@vamptvo\/pixels-vs-ems-users-do-change-font-size-5cfb20831773\" target=\"_blank\" rel=\"noreferrer noopener\">molte persone<\/a> cambiano la dimensione del font predefinito dei loro browser per rendere i testi pi\u00f9 facili da leggere. Utilizzando le dimensioni in REM, il tuo design pu\u00f2 adattarsi a queste preferenze degli utenti.<\/li>\n\n\n<\/ul>\n\n\n<p>Certo, non \u00e8 tutto sole e arcobaleni. Ci sono alcuni svantaggi:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wildcard di terze parti:<\/strong> Se il tuo sito include contenuti incorporati, potresti scoprire che testo e altri elementi non seguono le tue regole REM.<\/li>\n\n\n\n<li><strong>Calcoli complicati: <\/strong>Capire esattamente quanto sar\u00e0 grande 1.2rem richiede un po&#8217; di matematica.<\/li>\n\n\n\n<li><strong>Grande potere, maggiore responsabilit\u00e0: <\/strong>Quando puoi modificare cos\u00ec 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!<\/li>\n\n\n<\/ul>\n\n\n<p>Come regola generale, <strong>REM dovrebbe essere la tua scelta principale per la maggior parte dei progetti<\/strong>. \u00c8 pi\u00f9 facile da gestire rispetto alla dimensione EM e i risultati sono pi\u00f9 prevedibili.<\/p>\n\n\n<p>Tuttavia, ci sono momenti in cui EM \u00e8 utile.<\/p>\n\n\n<h2 id=\"h2_getting-to-know-em\" class=\"wp-block-heading\">Per Conoscere EM<\/h2>\n\n\n<p>EM \u00e8 un cliente complicato. Questa unit\u00e0 si basa sulla dimensione del font del suo elemento genitore \u2014 come un camaleonte che si adatta al suo ambiente.<\/p>\n\n\n<p>La confusione inizia quando cominci a nidificare. La maggior parte degli elementi <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">eredita la dimensione predefinita del carattere dal proprio genitore<\/a>. Ma se anche il genitore utilizza dimensioni in EM? Potresti facilmente ritrovarti in un groviglio di proporzionalit\u00e0.<\/p>\n\n\n<p>Ecco un esempio semplice:<\/p>\n\n\n<p>Immagina di avere una pagina che contiene un <code>&lt;div&gt;<\/code>. All&#8217;interno di quel box, abbiamo un tag <code>&lt;p&gt;<\/code> che contiene del testo.<\/p>\n\n\n<p><code>&lt;html&gt;<br>    &lt;div&gt;<br>        &lt;p&gt;Del testo qui.&lt;\/p&gt;<br>    &lt;\/div&gt;<br>&lt;\/html&gt;<\/code><\/p>\n\n\n<p>Ora, dai un&#8217;occhiata al CSS per questo frammento HTML:<\/p>\n\n\n<p><code>html { font-size: 16px; \/* Dimensione predefinita iniziale *\/ }<br>div { font-size: 1.2em; \/* 19.2px *\/ }<br>p { font-size: 1.2em; \/* 23.04px *\/ }<\/code><\/p>\n\n\n<p>Abbiamo iniziato definendo la dimensione del font predefinita per l&#8217;intera pagina. Finora tutto bene.<\/p>\n\n\n<p>Successivamente, abbiamo detto che il contenuto di <code>&lt;div&gt;<\/code> dovrebbe essere <code>1.2em<\/code>. In altre parole, il nostro testo dovrebbe essere il 120% dell&#8217;elemento genitore predefinito.<\/p>\n\n\n<p>Per concludere, noi impostiamo anche la dimensione del carattere <code>&lt;p&gt;<\/code><strong> <\/strong>a <code>1.2em<\/code>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1133\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em.webp\" alt=\"Diagramma del dimensionamento dei font in unit\u00e0 EM che mostra elementi di testo nidificati e le loro dimensioni relative in base agli elementi genitori.\" class=\"wp-image-48913 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1024x725.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-768x544.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1536x1088.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-600x425.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1200x850.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-730x517.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1460x1034.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-784x555.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1568x1110.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-877x621.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1133;\" \/><\/figure>\n\n\n<p>Aspetta un attimo! C&#8217;\u00e8 un aumento significativo nella dimensione del testo, misurata in pixel.<\/p>\n\n\n<p>Perch\u00e9?<\/p>\n\n\n<p>L&#8217;elemento <code>&lt;p&gt;<\/code> ha guardato la dimensione del font del suo elemento genitore <code>&lt;div&gt; (19.2px)<\/code> e l&#8217;ha presa come predefinita. E poich\u00e9 abbiamo richiesto <code>1.2em<\/code>, otteniamo un testo che \u00e8 il 120% della dimensione predefinita.<\/p>\n\n\n<p>Questi tipi di errori sono facili da commettere quando lavori con l&#8217;unit\u00e0 EM.<\/p>\n\n\n<h3 class=\"wp-block-heading\">EM \u00c8 Ottimo per Dimensioni Specifiche<\/h3>\n\n\n<p>Oltre agli svantaggi, l&#8217;unit\u00e0 EM pu\u00f2 essere davvero utile per dimensionare componenti specifici.<\/p>\n\n\n<p>Immagina di voler creare un pulsante che occupi sempre all&#8217;incirca la stessa quantit\u00e0 di spazio all&#8217;interno dell&#8217;elemento padre.<\/p>\n\n\n<p>Il tuo codice HTML potrebbe essere:<\/p>\n\n\n<p><code>&lt;button class='button'&gt;Cliccami&lt;\/button&gt;<\/code><\/p>\n\n\n<p>Per stilizzare il tuo pulsante, potresti usare unit\u00e0 EM per <code>font-size<\/code> e <code>padding<\/code>.<\/p>\n\n\n<p>Il CSS potrebbe sembrare qualcosa del genere:<\/p>\n\n\n<p><code>.button {<br>&nbsp;&nbsp;&nbsp;&nbsp;font-size: 1em; \/* Dimensione relativa alla dimensione del testo del genitore *\/<br>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0.5em 1em; \/* Il padding scala con la dimensione del font *\/<br>}<\/code><\/p>\n\n\n<p>Il codice sopra ci fornisce un semplice pulsante con un po&#8217; di spazio intorno al testo.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1133\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components.webp\" alt=\"Dimensionamento EM per componenti dell'interfaccia utente, mostrando come il padding del pulsante si adatti alla dimensione del font genitore mantenendo proporzioni consistenti.\" class=\"wp-image-48915 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1024x725.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-768x544.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1536x1088.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-600x425.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1200x850.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-730x517.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1460x1034.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-784x555.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1568x1110.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-877x621.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1133;\" \/><\/figure>\n\n\n<p>Se la dimensione del font dell&#8217;elemento padre aumenta, anche la dimensione del font e il padding del pulsante si adegueranno di conseguenza.<\/p>\n\n\n<p>In questo modo, potrai mantenere lo stesso equilibrio visivo tra gli elementi all&#8217;interno del parent, anche se cambi dispositivo o livello di zoom.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Perch\u00e9 Usare EM?<\/h3>\n\n\n<p>Data tutta la confusione, perch\u00e9 dovresti usare EM?<\/p>\n\n\n<p>Beh, offre alcuni vantaggi:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scalabilit\u00e0 Contestuale:<\/strong> Gli elementi si ridimensionano in base alla dimensione del loro elemento genitore, offrendoti un controllo pi\u00f9 sfumato sulle dimensioni in tutto il tuo design.<\/li>\n\n\n\n<li><strong>Design basato su componenti:<\/strong> Le unit\u00e0 EM sono ottime per creare componenti autocontenuti e riutilizzabili che mantengono le stesse proporzioni.<\/li>\n\n\n\n<li><strong>Controllo Preciso:<\/strong> Puoi regolare le dimensioni ad ogni livello della struttura del documento, senza dover apportare modifiche generali.<\/li>\n\n\n\n<li><strong>Responsivit\u00e0:<\/strong> Come le unit\u00e0 REM, le unit\u00e0 EM permettono al tuo design di <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-optimize-your-site-for-mobile\/\" target=\"_blank\" rel=\"noreferrer noopener\">adattarsi a diverse dimensioni di schermo<\/a> e preferenze degli utenti.<\/li>\n\n\n<\/ul>\n\n\n<p>Come abbiamo visto, ci sono anche alcuni svantaggi:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effetti Compositi<\/strong>: Gli elementi nidificati possono portare a dimensioni inaspettate, poich\u00e9 i valori EM iniziano ad accumularsi.<\/li>\n\n\n\n<li><strong>Sfide nella Manutenzione<\/strong>: Cambiare la dimensione del font di un elemento padre influisce su tutti gli elementi figli, il che pu\u00f2 portare a conseguenze non intenzionali \u2014 come testo del corpo enorme e titoli minuscoli.<\/li>\n\n\n\n<li><strong>Complessit\u00e0 nei Progetti di Grandi Dimensioni<\/strong>: Man mano che il tuo progetto cresce, tenere traccia di tutte le dimensioni relative pu\u00f2 diventare una sfida.<\/li>\n\n\n<\/ul>\n\n\n<p>In sintesi, EM pu\u00f2 essere incredibilmente utile per i design basati su componenti e quando hai bisogno di un controllo preciso sulle relazioni tra gli elementi. \u00c8 pi\u00f9 flessibile del dimensionamento basato su pixel, ma richiede una pianificazione pi\u00f9 attenta rispetto a REM.<\/p>\n\n\n<h2 id=\"h-rem-or-em-which-should-you-use\" class=\"wp-block-heading\">REM o EM: Qual Dei Due Utilizzare?<\/h2>\n\n\n<p>Beh, queste erano molte informazioni interessanti. Tuttavia, se stai costruendo qualcosa, devi solo sapere quale unit\u00e0 CSS utilizzare.<\/p>\n\n\n<p>Ecco il nostro verdetto:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>REM \u00e8 la scelta migliore per la maggior parte dei progetti<\/strong> perch\u00e9 \u00e8 pi\u00f9 scalabile e offre un maggiore controllo.<\/li>\n\n\n\n<li><strong>EM pu\u00f2 essere uno strumento prezioso per scenari specifici<\/strong> che coinvolgono stili nidificati.<\/li>\n\n\n<\/ul>\n\n\n<p>\u00c8 anche importante notare che sia REM che EM sono generalmente <a href=\"https:\/\/www.dreamhost.com\/blog\/time-for-website-redesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">migliori per il design moderno<\/a> rispetto a unit\u00e0 assolute come <code>px<\/code>.<\/p>\n\n\n<p>Sono anche pi\u00f9 pratici per dimensionare il testo rispetto ad altre unit\u00e0 relative, come le unit\u00e0 del viewport (<code>vh\/vw<\/code>) e la percentuale (<strong>%<\/strong>).<\/p>\n\n\n<p><strong>Diamo un&#8217;occhiata a REM vs. EM da un punto di vista ad alta quota:<\/strong><\/p>\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Funzionalit\u00e0<\/strong><\/td><td><strong>REM<\/strong><\/td><td><strong>EM<\/strong><\/td><\/tr><tr><td>Ereditariet\u00e0<\/td><td>Consistente con l&#8217;elemento radice<\/td><td>Relativo all&#8217;elemento genitore<\/td><\/tr><tr><td>Scalabilit\u00e0<\/td><td>Eccellente<\/td><td>Pi\u00f9 limitata<\/td><\/tr><tr><td>Complessit\u00e0<\/td><td>Inferiore, grazie alla coerenza<\/td><td>Superiore, a causa delle dimensioni contestuali<\/td><\/tr><tr><td>Manutenzione<\/td><td>Semplice \u2014 le modifiche alla dimensione radice si propagano<\/td><td>Pu\u00f2 essere pi\u00f9 complicato con elementi annidati<\/td><\/tr><tr><td>Accessibilit\u00e0<\/td><td>Funziona bene con le preferenze dell&#8217;utente<\/td><td>Potrebbe richiedere aggiustamenti<\/td><\/tr><tr><td>Migliore per<\/td><td>Spaziatura globale e layout<\/td><td>Scalabilit\u00e0 specifica del componente<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h2 id=\"h2_rem-and-em-font-sizing-faqs\" class=\"wp-block-heading\">REM E EM: Domande Frequenti Sulla Dimensione Dei Caratteri<\/h2>\n\n\n<p>La guida dovrebbe aver chiarito gran parte della confusione riguardante queste unit\u00e0 molto simili.<\/p>\n\n\n<p>Ma se hai ancora domande, ecco cosa devi sapere!<\/p>\n\n\n<h3 class=\"wp-block-heading\">Dovrei usare REM o EM per il design responsive?<\/h3>\n\n\n<p>REM \u00e8 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.<\/p>\n\n\n<p>L&#8217;unica eccezione si verifica quando vuoi creare unit\u00e0 discrete, dove tutti gli elementi mantengono lo stesso rapporto di dimensione.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Come posso evitare la complessit\u00e0 quando uso le unit\u00e0 EM?<\/h3>\n\n\n<p>Per evitare complessit\u00e0 con le unit\u00e0 EM, cerca di limitare l&#8217;annidamento degli elementi. Usa REM per le dimensioni globali e EM per piccoli aggiustamenti all&#8217;interno di componenti specifici.<\/p>\n\n\n<h3 class=\"wp-block-heading\">C&#8217;\u00e8 una dimensione di base consigliata per il REM?<\/h3>\n\n\n<p>Mentre non esiste una regola rigida, una dimensione comune della base per il REM \u00e8 <code>16px<\/code>. Tuttavia, puoi scegliere qualsiasi valore che si adatti alle tue preferenze di design e <a href=\"https:\/\/www.dreamhost.com\/blog\/make-your-website-accessible\/\" target=\"_blank\" rel=\"noreferrer noopener\">requisiti di accessibilit\u00e0<\/a>.<\/p>\n\n\n<h2 id=\"h2_dive-deeper-into-css\" class=\"wp-block-heading\">Approfondisci CSS<\/h2>\n\n\n<p>Vuoi saperne di pi\u00f9 sul design digitale? Abbiamo molte ottime risorse di apprendimento per CSS:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/css-transform\" target=\"_blank\" rel=\"noreferrer noopener\">Conoscere la Propriet\u00e0 di Trasformazione CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/tailwind-vs-bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\">Tailwind vs. Bootstrap: Quale Framework CSS Ti Serve?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/tailwind-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Il Tuo Primo Approccio Completo a Tailwind CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/css-frameworks\/\" target=\"_blank\" rel=\"noreferrer noopener\">16 Framework CSS Popolari Che Ti Aiuteranno a Risparmiare Tempo (Con Stile)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Animazioni CSS: Migliora il Tuo Sito Web Con Queste 17 Opzioni<\/a><\/li>\n\n\n<\/ul>\n\n\n<h2 id=\"h2_responsive-design-matters\" class=\"wp-block-heading\">Il Design Reattivo \u00c8 Importante<\/h2>\n\n\n<p>L&#8217;unit\u00e0 CSS \u00e8 un componente che viene spesso trascurato, come abbiamo menzionato all&#8217;inizio di questa guida.<\/p>\n\n\n<p>Tuttavia, se vuoi creare un sito web o un&#8217;app che appaia bene su ogni dispositivo e funzioni per ogni utente, \u00e8 importante considerare i dettagli del design.<\/p>\n\n\n<p>Il dibattito tra REM o EM alla fine non ha molta importanza \u2014 L&#8217;essenziale \u00e8 che il tuo sito sia accessibile, reattivo e facile da usare!<\/p>\n\n\n<p>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.<\/p>\n\n\n<p>Offriamo una <strong>garanzia di uptime del 100%<\/strong> su tutti i nostri <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">piani di hosting condiviso<\/a>, con server ottimizzati e ottime funzionalit\u00e0 di sicurezza. <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">Iscriviti oggi<\/a> per vedere la differenza con i tuoi occhi!<\/p>\n\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-dedicated-hosting-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-dedicated-hosting.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/hosting\/dedicated\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Dedicated Hosting<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tUltimate in Power, Security, and Control\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tDedicated servers from DreamHost use the best hardware\r\nand software available to ensure your site is always up, and always fast.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/hosting\/dedicated\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Confuso tra REM e EM? Scopri la differenza tra queste unit\u00e0 CSS nella nostra guida super concisa.<\/p>\n","protected":false},"author":1075,"featured_media":48901,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Confuso su REM ed EM? Scopri la differenza tra queste unit\u00e0 CSS nella nostra guida super concisa.","toc_headlines":"[[\"h-rem-vs-em-in-a-nutshell\",\"REM vs. EM in Pochissime Parole\"],[\"h2_understanding-rem-and-em\",\"Capire REM e EM\"],[\"h2_getting-to-know-rem\",\"Conoscere REM\"],[\"h2_getting-to-know-em\",\"Per Conoscere EM\"],[\"h-rem-or-em-which-should-you-use\",\"REM o EM: Qual Dei Due Utilizzare?\"],[\"h2_rem-and-em-font-sizing-faqs\",\"REM E EM: Domande Frequenti Sulla Dimensione Dei Caratteri\"],[\"h2_dive-deeper-into-css\",\"Approfondisci CSS\"],[\"h2_responsive-design-matters\",\"Il Design Reattivo \u00c8 Importante\"]]","hide_toc":false,"footnotes":""},"categories":[15068],"tags":[],"class_list":["post-72698","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-it"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>REM vs. EM: Come Scegliere l&#039;Unit\u00e0 CSS Giusta - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Confuso su REM ed EM? Scopri la differenza tra queste unit\u00e0 CSS nella nostra guida super concisa.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"REM vs. EM: Come Scegliere l&#039;Unit\u00e0 CSS Giusta\" \/>\n<meta property=\"og:description\" content=\"Confuso su REM ed EM? Scopri la differenza tra queste unit\u00e0 CSS nella nostra guida super concisa.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-26T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T20:19:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Jennifer Le\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jennifer Le\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"REM vs. EM: Come Scegliere l'Unit\u00e0 CSS Giusta - DreamHost Blog","description":"Confuso su REM ed EM? Scopri la differenza tra queste unit\u00e0 CSS nella nostra guida super concisa.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/","og_locale":"en_US","og_type":"article","og_title":"REM vs. EM: Come Scegliere l'Unit\u00e0 CSS Giusta","og_description":"Confuso su REM ed EM? Scopri la differenza tra queste unit\u00e0 CSS nella nostra guida super concisa.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-08-26T14:00:00+00:00","article_modified_time":"2025-06-11T20:19:15+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","type":"image\/webp"}],"author":"Jennifer Le","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jennifer Le","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"REM vs. EM: Come Scegliere l&#8217;Unit\u00e0 CSS Giusta","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-06-11T20:19:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/"},"wordCount":2021,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","articleSection":["Design del Sito Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/","name":"REM vs. EM: Come Scegliere l'Unit\u00e0 CSS Giusta - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-06-11T20:19:15+00:00","description":"Confuso su REM ed EM? Scopri la differenza tra queste unit\u00e0 CSS nella nostra guida super concisa.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","width":1460,"height":1095,"caption":"REM vs. EM: How To Choose the Right CSS Unit"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/rem-vs-em-come-scegliere-l8217unita-css-giusta-it\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"REM vs. EM: Come Scegliere l&#8217;Unit\u00e0 CSS Giusta"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf","name":"Jennifer Le","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","caption":"Jennifer Le"},"description":"Jennifer is Designer II at DreamHost and is responsible for branding, design, and UX\/UI. In her free time, she enjoys crafting, cooking, and camping. Follow Jennifer on LinkedIn: https:\/\/www.linkedin.com\/in\/nhijenniferle\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jenniferle\/"}]}},"lang":"it","translations":{"it":72698,"en":48900,"es":48882,"pl":52124,"de":54730,"uk":54758,"pt":54800,"ru":54868,"fr":69547,"nl":69573},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/72698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1075"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=72698"}],"version-history":[{"count":5,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/72698\/revisions"}],"predecessor-version":[{"id":72748,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/72698\/revisions\/72748"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/48901"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=72698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=72698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=72698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}