{"id":48900,"date":"2024-08-26T07:00:00","date_gmt":"2024-08-26T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=48900"},"modified":"2025-05-26T06:32:42","modified_gmt":"2025-05-26T13:32:42","slug":"rem-vs-em","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/","title":{"rendered":"REM vs. EM: How To Choose the Right CSS Unit"},"content":{"rendered":"\n<p>You probably don&#8217;t dream about CSS element sizing at night, but if you&#8217;re <a href=\"https:\/\/www.dreamhost.com\/website-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">building a website<\/a> or an app, this topic is definitely worth thinking about.<\/p>\n\n\n\n<p>While some CSS units play nicely with your responsive design, others might show a rebellious streak. Being able to tell the different characters can save you some major headaches down the line.<\/p>\n\n\n\n<p>Take the pairing of REM and EM. Which should you use, and why?<\/p>\n\n\n\n<p>Stick with us for the next few paragraphs, and we shall reveal all!<\/p>\n\n\n\n<h2 id=\"h-rem-vs-em-in-a-nutshell\" class=\"wp-block-heading\">REM vs. EM in a Nutshell<\/h2>\n\n\n\n<p>If you&#8217;re looking for a quick answer, <strong>here&#8217;s the TL;DR version<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>REM:<\/strong> This unit is based on the root element (usually the <code>&lt;html&gt;<\/code> tag.) No matter what else happens on the page, your sizing will stay consistent.<\/li>\n\n\n\n<li><strong>EM:<\/strong> This unit looks up for guidance. If the parent element changes, your sizing will follow suit.<\/li>\n<\/ul>\n\n\n\n<p>If you want to remember the difference, keep in mind that the &#8220;R&#8221; in REM stands for &#8220;root.&#8221;<\/p>\n\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=\"Comparison of REM vs. EM units in CSS, showing how they relate to root and parent elements respectively.\" 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\n<p><strong><em>Nerd Note<\/em><\/strong><em>: Why do both units end with \u201cEM\u201d? This isn\u2019t an abbreviation. Back when all text was printed, typographers used the width of a capital M as a benchmark for text sizing. Pretty nifty, right?<\/em><\/p>\n\n\n\n<p><strong>So, which one should you use?<\/strong><\/p>\n\n\n\n<p>Well, that depends.&nbsp;<\/p>\n\n\n\n<p>If you want text to adjust to its surroundings, EM might be the better option. But if you want sizing to stay consistent across your whole website, you should switch to REM.<\/p>\n\n\n\n<p>Why?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>EM:<\/strong> More flexible, but can get messy if you\u2019re not careful.<\/li>\n\n\n\n<li><strong>REM:<\/strong> Consistent sizing, great for responsive design.<\/li>\n<\/ul>\n\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>Responsive Design<\/h3>\n    <p>Responsive design enables a website to adapt to the screen size of the device it is being viewed on. The website will therefore look differently on different devices.<\/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                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<p>Still confused? Don\u2019t worry, we\u2019ll dive deeper in a second.<\/p>\n\n\n\n<p>Just remember this for now: <strong>REM is usually the safer bet for most websites<\/strong>.<\/p>\n\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\n<h2 id=\"h2_understanding-rem-and-em\" class=\"wp-block-heading\">Understanding REM and EM<\/h2>\n\n\n\n<p>Alright, let\u2019s get into the weeds a little bit.<\/p>\n\n\n\n<p><strong>Both REM and EM are relative units. That means they maintain the same size <em>relative<\/em> to a specific yardstick.<\/strong><\/p>\n\n\n\n<p>This type of <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">sizing plays a key role in responsive design<\/a>.<\/p>\n\n\n\n<p>Absolute sizes (e.g., px) always stay the same, meaning text can appear tiny on a desktop and huge on a phone. In contrast, relative units can adapt to different devices and layouts.<\/p>\n\n\n\n<p>In a digital context, REM and EM are still primarily used to measure text. However, you can also use these units for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Margins<\/li>\n\n\n\n<li>Padding<\/li>\n\n\n\n<li>Width and height<\/li>\n\n\n\n<li>Line height<\/li>\n\n\n\n<li>Border properties<\/li>\n\n\n\n<li>Box shadow<\/li>\n\n\n\n<li>Positioning<\/li>\n\n\n\n<li>Media queries<\/li>\n<\/ul>\n\n\n\n<p>In other words, REM and EM are useful whenever you want flexible sizing within your design.<\/p>\n\n\n\n<p>Right, that largely covers the common ground between these two units.<\/p>\n\n\n\n<p>Now, let\u2019s take a closer look at what makes each of them unique.<\/p>\n\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\n<h2 id=\"h2_getting-to-know-rem\" class=\"wp-block-heading\">Getting To Know REM<\/h2>\n\n\n\n<p>REM stands for \u201croot em.\u201d When you use this unit, you\u2019re defining how big something should be, relative to the font size of your root element (usually your <code>&lt;html&gt;<\/code> tag.)<\/p>\n\n\n\n<p>Most browsers default to <code>16px<\/code> for the root element. However, it\u2019s a good idea to define your default font size <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">using CSS<\/a>.<\/p>\n\n\n\n<p>You can do it like this:<\/p>\n\n\n\n<p><code>html { font-size: 16px; \/* Your base font size *\/ }<\/code><\/p>\n\n\n\n<p>Whatever size you choose becomes <code>1rem<\/code>. This is your new baseline for the entire page.<\/p>\n\n\n\n<p>Any figure that\u2019s bigger or smaller will change the size of your target element, relative to your chosen default.<\/p>\n\n\n\n<p>It\u2019s a bit complicated to explain clearly, so here is an easy example:<\/p>\n\n\n\n<p><code>html { font-size: 16px; \/* Your base font size *\/ }<br>body { font-size: 1.2rem; \/* 19.2px *\/ }<br>h1 { font-size: 2.4rem; \/* 38.4px *\/ }<\/code><\/p>\n\n\n\n<p>In this scenario, we\u2019ve defined the font size of the <code>&lt;html&gt;<\/code> tag as <code>16px<\/code>. This is our baseline of <code>1rem<\/code>.<\/p>\n\n\n\n<p>We want our body text to be a little bigger than that. So, we set the <code>&lt;body&gt;<\/code> font size to <code>1.2rem<\/code>. That\u2019s 120% of the baseline.<\/p>\n\n\n\n<p>The main header on our page needs to be way bigger. By setting the <code>&lt;h1&gt;<\/code> font size to <code>2.4rem<\/code>, we can make the headline 240% the size of our baseline.<\/p>\n\n\n\n<p>You&#8217;ll end up with something like this:<\/p>\n\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=\"Diagram of font sizing in REM units. HTML at 16px, h1 at 2.4rem (38.4px), and body at 1.2rem (19.2px) with example text.\" 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\n<h3 class=\"wp-block-heading\">Why Use REM?<\/h3>\n\n\n\n<p>What are the advantages of this system?<\/p>\n\n\n\n<p>In CSS, REM units offer some pretty good benefits:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>True consistency:<\/strong> Everything scales proportionally based on the root size, so your design will always look exactly how you intended on any device.<\/li>\n\n\n\n<li><strong>Responsiveness:<\/strong> Proportionate scaling means your website or app can adapt to a wide range of devices.<\/li>\n\n\n\n<li><strong>Easy maintenance:<\/strong> When all your styles are based on the same root setting, it\u2019s easy to make sweeping changes as needed \u2014 You don\u2019t need to visit every single element and change the font size manually. This also saves you a <em>lot<\/em> of time.<\/li>\n\n\n\n<li><strong>Great accessibility:<\/strong> Quite <a href=\"https:\/\/medium.com\/@vamptvo\/pixels-vs-ems-users-do-change-font-size-5cfb20831773\" target=\"_blank\" rel=\"noreferrer noopener\">a lot of people<\/a> actually change the default font size of their browsers to make text easier to read. By using REM sizing, your design can adapt to these user preferences.<\/li>\n<\/ul>\n\n\n\n<p>Of course, it\u2019s not all sunshine and rainbows. There are some drawbacks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Third-party wildcards:<\/strong> If your site includes embedded content, you might find that text and other elements don\u2019t follow your REM rules.<\/li>\n\n\n\n<li><strong>Tricky calculations: <\/strong>Figuring out exactly how big 1.2rem is going to be requires some math.<\/li>\n\n\n\n<li><strong>Great power, greater responsibility: <\/strong>When you can alter the size of text across your website so easily, you need to be careful with edits to avoid site-wide design disasters!<\/li>\n<\/ul>\n\n\n\n<p>As a general rule, <strong>REM should be your go-to for most projects<\/strong>. It&#8217;s easier to handle than EM sizing, and the results are more predictable.<\/p>\n\n\n\n<p>However, there are times when EM is useful.<\/p>\n\n\n\n<h2 id=\"h2_getting-to-know-em\" class=\"wp-block-heading\">Getting To Know EM<\/h2>\n\n\n\n<p>EM is a tricky customer. This unit is based on the font size of its parent element \u2014 like a chameleon adapting to its surroundings.<\/p>\n\n\n\n<p>The confusion begins when you start nesting. Most elements <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">inherit their default font size from their parent<\/a>. But what if the parent also uses EM sizing? You could end up with a tangled mess of proportionality pretty easily.<\/p>\n\n\n\n<p>Here\u2019s a simple example:<\/p>\n\n\n\n<p>Say you have a page that contains a <code>&lt;div&gt;<\/code>. Inside that box, we have a <code>&lt;p&gt;<\/code> tag containing some text.<\/p>\n\n\n\n<p><code>&lt;html&gt;<br>    &lt;div&gt;<br>        &lt;p&gt;Some text here.&lt;\/p&gt;<br>    &lt;\/div&gt;<br>&lt;\/html&gt;<\/code><\/p>\n\n\n\n<p>Now, take a look at the CSS for this HTML snippet:<\/p>\n\n\n\n<p><code>html { font-size: 16px; \/* Starting default size *\/ }<br>div { font-size: 1.2em; \/* 19.2px *\/ }<br>p { font-size: 1.2em; \/* 23.04px *\/ }<\/code><\/p>\n\n\n\n<p>We started by defining the default font size for the whole page. So far, so good.<\/p>\n\n\n\n<p>Next, we said that <code>&lt;div&gt;<\/code> content should be <code>1.2em<\/code>. In other words, our text should be 120% of the parent element default.<\/p>\n\n\n\n<p>To finish up, we also make the <code>&lt;p&gt;<\/code><strong> <\/strong>font size <code>1.2em<\/code>.<\/p>\n\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=\"Font sizing in EM units diagram showing nested text elements and their relative sizes based on parent elements.\" 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\n<p>Now wait a minute! There is a significant increase in the text&#8217;s size, as measured in pixels.<\/p>\n\n\n\n<p>Why\u2019s that?<\/p>\n\n\n\n<p>The <code>&lt;p&gt;<\/code> element has looked at the font size of its parent <code>&lt;div&gt; (19.2px)<\/code> and taken that as the default. And because we asked for <code>1.2em<\/code>, we get text that is 120% of the default size.<\/p>\n\n\n\n<p>These kinds of errors are easy to make when you work with the EM unit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">EM Is Great for Specific Sizing<\/h3>\n\n\n\n<p>Aside from the drawbacks, the EM unit can be really useful for sizing specific components.<\/p>\n\n\n\n<p>Say you want to create a button that always takes up roughly the same amount of space within its parent element.<\/p>\n\n\n\n<p>Your HTML code might be:<\/p>\n\n\n\n<p><code>&lt;button class='button'&gt;Click Me&lt;\/button&gt;<\/code><\/p>\n\n\n\n<p>To style your button, you could use EM units for <code>font-size<\/code> and <code>padding<\/code>.<\/p>\n\n\n\n<p>The CSS would look something like this:<\/p>\n\n\n\n<p><code>.button {<br>&nbsp;&nbsp;&nbsp;&nbsp;font-size: 1em; \/* Size relative to the parent text size *\/<br>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0.5em 1em; \/* Padding scales with the font size *\/<br>}<\/code><\/p>\n\n\n\n<p>The code above gives us a simple button with a little bit of padding around the text.<\/p>\n\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=\"EM sizing for UI components, showing button padding scales with parent font size while maintaining consistent proportions.\" 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\n<p>If the parent element\u2019s font size scales upward, the font size and padding of the button will follow suit.<\/p>\n\n\n\n<p>In this way, you&#8217;ll be able to maintain the same visual balance between elements within the parent, even if you change devices or zoom level.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Use EM?<\/h3>\n\n\n\n<p>Given all the confusion, why would you use EM at all?<\/p>\n\n\n\n<p>Well, it does come with some benefits:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Contextual scaling:<\/strong> Elements scale based on their parent&#8217;s size, giving you more nuanced control over sizing throughout your design.<\/li>\n\n\n\n<li><strong>Component-based design: <\/strong>EM units are great for creating self-contained, reusable components that maintain the same proportions.<\/li>\n\n\n\n<li><strong>Precise control<\/strong>: You can fine-tune sizes at each document structure level, without making wholesale changes.<\/li>\n\n\n\n<li><strong>Responsiveness<\/strong>: Like REM, EM units allow your design to <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-optimize-your-site-for-mobile\/\" target=\"_blank\" rel=\"noreferrer noopener\">adapt to different screen sizes<\/a> and user preferences.<\/li>\n<\/ul>\n\n\n\n<p>As we\u2019ve seen, there are also some drawbacks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Compounding effects<\/strong>: Nested elements can lead to unexpected sizes, as EM values start to stack up.<\/li>\n\n\n\n<li><strong>Maintenance challenges<\/strong>: Changing a parent element font size affects all child elements, which can lead to unintended consequences \u2014 such as huge body text and tiny titles.<\/li>\n\n\n\n<li><strong>Complexity in large projects<\/strong>: As your project grows, keeping track of all the relative sizes can become challenging.<\/li>\n<\/ul>\n\n\n\n<p>In summary, EM can be incredibly useful for component-based designs and when you need precise control over element relationships. It&#8217;s more flexible than pixel-based sizing, but requires more careful planning than REM.<\/p>\n\n\n\n<h2 id=\"h-rem-or-em-which-should-you-use\" class=\"wp-block-heading\">REM or EM: Which Should You Use?<\/h2>\n\n\n\n<p>Well, that was a lot of interesting information. However, if you&#8217;re building something, you just need to know which CSS unit to use.<\/p>\n\n\n\n<p>Here\u2019s our verdict:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>REM is the better choice for most projects<\/strong> because it\u2019s more scalable, and provides better control.<\/li>\n\n\n\n<li><strong>EM can be a valuable tool for specific scenarios<\/strong> involving nested styles.<\/li>\n<\/ul>\n\n\n\n<p>It\u2019s also worth noting that both REM and EM are generally <a href=\"https:\/\/www.dreamhost.com\/blog\/time-for-website-redesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">better for modern design<\/a> than absolute units like <code>px<\/code>.<\/p>\n\n\n\n<p>They\u2019re also more practical for sizing text in comparison to other relative units, such as viewport units (<code>vh\/vw<\/code>) and percentage (<strong>%<\/strong>).<\/p>\n\n\n\n<p><strong>Let\u2019s look at REM vs. EM from an eagle\u2019s eye view:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Feature<\/strong><\/td><td><strong>REM<\/strong><\/td><td><strong>EM<\/strong><\/td><\/tr><tr><td>Inheritance<\/td><td>Consistent with root element<\/td><td>Relative to parent element<\/td><\/tr><tr><td>Scalability<\/td><td>Excellent<\/td><td>More limited<\/td><\/tr><tr><td>Complexity<\/td><td>Lower, due to consistency<\/td><td>Higher, due to contextual sizing<\/td><\/tr><tr><td>Maintenance<\/td><td>Easy \u2014 changes to root size cascade<\/td><td>Can be trickier with nested elements<\/td><\/tr><tr><td>Accessibility<\/td><td>Works well with user preferences<\/td><td>May require adjustments<\/td><\/tr><tr><td>Best for<\/td><td>Global spacing and layout<\/td><td>Component-specific scaling<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"h2_rem-and-em-font-sizing-faqs\" class=\"wp-block-heading\">REM and EM: Font Sizing FAQS<\/h2>\n\n\n\n<p>The guide should have cleared up most of the confusion surrounding these very similar units.<\/p>\n\n\n\n<p>But if you still have questions, here&#8217;s what you need to know!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Should I use REM or EM for responsive design?<\/h3>\n\n\n\n<p>REM is generally the better choice for responsive designs as it allows you to create consistent and scalable layouts that adapt to different screen sizes.<\/p>\n\n\n\n<p>The only exception is when you want to create discrete units, where all the elements maintain the same size ratio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How can I avoid complexity when using EM units?<\/h3>\n\n\n\n<p>To avoid complexity with EM units, try to limit the nesting of elements. Use REM for global sizing and EM for minor adjustments within specific components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Is there a recommended base font size for REM?<\/h3>\n\n\n\n<p>While there&#8217;s no strict rule, a common base font size for REM is <code>16px<\/code>. However, you can choose any value that suits your design preferences and <a href=\"https:\/\/www.dreamhost.com\/blog\/make-your-website-accessible\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessibility requirements<\/a>.<\/p>\n\n\n\n<h2 id=\"h2_dive-deeper-into-css\" class=\"wp-block-heading\">Dive Deeper Into CSS<\/h2>\n\n\n\n<p>Want to learn more about digital design? We&#8217;ve got lots of great CSS learning resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/css-transform\" target=\"_blank\" rel=\"noreferrer noopener\">Getting To Know the CSS Transform Property<\/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: Which CSS Framework Do You Need?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/tailwind-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Your Complete Tailwind CSS Primer<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/css-frameworks\/\" target=\"_blank\" rel=\"noreferrer noopener\">16 Popular CSS Frameworks That Will Help You Save Time (With Style)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Animations: Enhance Your Website With These 17 Options<\/a><\/li>\n<\/ul>\n\n\n\n<h2 id=\"h2_responsive-design-matters\" class=\"wp-block-heading\">Responsive Design Matters<\/h2>\n\n\n\n<p>The CSS unit is a component that\u2019s often overlooked, as we mentioned at the start of this guide.<\/p>\n\n\n\n<p>However, if you want to create a website or app that looks good on every device and works for every user, it&#8217;s important to think about the details of the design.<\/p>\n\n\n\n<p>The debate between REM or EM doesn&#8217;t really matter too much in the end \u2014 The most important thing is that your site is accessible, responsive, and easy to use!<\/p>\n\n\n\n<p>Just remember that a pretty interface means nothing if your site or app won\u2019t load. When it comes to providing your users with the best experience, consider upgrading your hosting with DreamHost.<\/p>\n\n\n\n<p>We offer a <strong>100% uptime guarantee<\/strong> on all our <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">shared hosting plans<\/a>, with optimized servers and great security features. <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up today<\/a> to see the difference for yourself!<\/p>\n\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>Confused about REM and EM? Learn the difference between these CSS units in our super concise guide.<\/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":"Confused about REM and EM? Learn the difference between these CSS units in our super concise guide.","toc_headlines":"[[\"h-rem-vs-em-in-a-nutshell\",\"REM vs. EM in a Nutshell\"],[\"h2_understanding-rem-and-em\",\"Understanding REM and EM\"],[\"h2_getting-to-know-rem\",\"Getting To Know REM\"],[\"h2_getting-to-know-em\",\"Getting To Know EM\"],[\"h-rem-or-em-which-should-you-use\",\"REM or EM: Which Should You Use?\"],[\"h2_rem-and-em-font-sizing-faqs\",\"REM and EM: Font Sizing FAQS\"],[\"h2_dive-deeper-into-css\",\"Dive Deeper Into CSS\"],[\"h2_responsive-design-matters\",\"Responsive Design Matters\"]]","hide_toc":false,"footnotes":""},"categories":[12852],"tags":[],"class_list":["post-48900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design"],"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: How To Choose the Right CSS Unit - DreamHost<\/title>\n<meta name=\"description\" content=\"Confused about REM and EM? Learn the difference between these CSS units in our super concise guide.\" \/>\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\/rem-vs-em\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"REM vs. EM: We Break It Down\" \/>\n<meta property=\"og:description\" content=\"Unravel the differences between REM and EM in CSS in this guide. Learn when and why to use each unit to enhance your web design projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/\" \/>\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-05-26T13:32:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1220x628_ogimage_rem_vs_em_in_css_which_one_should_i_use_.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\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:title\" content=\"REM vs. EM: We Break It Down\" \/>\n<meta name=\"twitter:description\" content=\"Unravel the differences between REM and EM in CSS in this guide. Learn when and why to use each unit to enhance your web design projects.\" \/>\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: How To Choose the Right CSS Unit - DreamHost","description":"Confused about REM and EM? Learn the difference between these CSS units in our super concise guide.","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\/rem-vs-em\/","og_locale":"en_US","og_type":"article","og_title":"REM vs. EM: We Break It Down","og_description":"Unravel the differences between REM and EM in CSS in this guide. Learn when and why to use each unit to enhance your web design projects.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/","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-05-26T13:32:42+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1220x628_ogimage_rem_vs_em_in_css_which_one_should_i_use_.webp","type":"image\/webp"}],"author":"Jennifer Le","twitter_card":"summary_large_image","twitter_title":"REM vs. EM: We Break It Down","twitter_description":"Unravel the differences between REM and EM in CSS in this guide. Learn when and why to use each unit to enhance your web design projects.","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\/rem-vs-em\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"REM vs. EM: How To Choose the Right CSS Unit","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-05-26T13:32:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/"},"wordCount":1959,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/#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":["Website Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/","name":"REM vs. EM: How To Choose the Right CSS Unit - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/#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-05-26T13:32:42+00:00","description":"Confused about REM and EM? Learn the difference between these CSS units in our super concise guide.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/rem-vs-em\/#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\/rem-vs-em\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"REM vs. EM: How To Choose the Right CSS Unit"}]},{"@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":"en","translations":{"en":48900,"es":48882,"pl":52124,"de":54730,"uk":54758,"pt":54800,"ru":54868,"fr":69547,"nl":69573,"it":72698},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/48900","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=48900"}],"version-history":[{"count":5,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/48900\/revisions"}],"predecessor-version":[{"id":49482,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/48900\/revisions\/49482"}],"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=48900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=48900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=48900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}