{"id":54800,"date":"2024-08-26T07:00:00","date_gmt":"2024-08-26T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=54800"},"modified":"2025-05-26T12:23:30","modified_gmt":"2025-05-26T19:23:30","slug":"rem-vs-em","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/rem-vs-em\/","title":{"rendered":"REM vs. EM: Como Escolher a Unidade CSS Correta"},"content":{"rendered":"<p>Voc\u00ea provavelmente n\u00e3o sonha com dimensionamento de elementos CSS \u00e0 noite, mas se voc\u00ea est\u00e1 <a href=\"https:\/\/www.dreamhost.com\/pt\/criador-sites-web-ia\/\" target=\"_blank\" rel=\"noreferrer noopener\">construindo um site<\/a> ou um aplicativo, este t\u00f3pico definitivamente vale a pena pensar.<\/p>\n<p>Enquanto algumas unidades CSS se integram bem ao seu design responsivo, outras podem apresentar uma tend\u00eancia rebelde. Ser capaz de distinguir os diferentes caracteres pode poupar-lhe grandes dores de cabe\u00e7a no futuro.<\/p>\n<p>Considere o emparelhamento de REM e EM. Qual voc\u00ea deve usar e por qu\u00ea?<\/p>\n<p>Fique conosco pelos pr\u00f3ximos par\u00e1grafos, e revelaremos tudo!<\/p>\n<h2 id=\"h-rem-vs-em-in-a-nutshell\" class=\"wp-block-heading\">REM vs. EM em Resumo<\/h2>\n<p>Se voc\u00ea est\u00e1 procurando uma resposta r\u00e1pida, <strong>aqui est\u00e1 a vers\u00e3o TL;DR<\/strong>:<\/p>\n<ul class=\"wp-block-list\"><li><strong>REM:<\/strong> Esta unidade \u00e9 baseada no elemento raiz (normalmente a tag <code>&lt;html&gt;<\/code>). N\u00e3o importa o que mais aconte\u00e7a na p\u00e1gina, seu dimensionamento permanecer\u00e1 consistente.<\/li><li><strong>EM:<\/strong> Esta unidade busca orienta\u00e7\u00e3o. Se o elemento pai mudar, seu dimensionamento tamb\u00e9m se ajustar\u00e1.<\/li><\/ul>\n<p>Se voc\u00ea quiser lembrar a diferen\u00e7a, tenha em mente que o &#8220;R&#8221; em REM significa &#8220;Root&#8221;.<\/p>\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=\"Compara\u00e7\u00e3o das unidades REM e EM em CSS, mostrando como elas se relacionam com elementos raiz e elementos pais respectivamente.\" 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<p><strong><em>Nota Nerd<\/em><\/strong><em>: Por que ambas as unidades terminam com \u201cEM\u201d? Isso n\u00e3o \u00e9 uma abrevia\u00e7\u00e3o. Quando todo o texto era impresso, os tip\u00f3grafos usavam a largura de um M mai\u00fasculo como refer\u00eancia para o dimensionamento do texto. Bem interessante, certo?<\/em><\/p>\n<p><strong>Ent\u00e3o, qual voc\u00ea deveria usar?<\/strong><\/p>\n<p>Bem, isso depende.&nbsp;<\/p>\n<p>Se voc\u00ea deseja que o texto se ajuste ao seu entorno, EM pode ser a melhor op\u00e7\u00e3o. Mas se voc\u00ea deseja que o tamanho permane\u00e7a consistente em todo o seu site, voc\u00ea deve mudar para REM.<\/p>\n<p>Por qu\u00ea?<\/p>\n<ul class=\"wp-block-list\"><li><strong>EM:<\/strong> Mais flex\u00edvel, mas pode se tornar confuso se voc\u00ea n\u00e3o for cuidadoso.<\/li><li><strong>REM:<\/strong> Dimensionamento consistente, \u00f3timo para design responsivo.<\/li><\/ul>\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 Responsivo<\/h3>\n    <p>O design responsivo permite que um site se adapte ao tamanho da tela do dispositivo em que est\u00e1 sendo visualizado. Portanto, o site ter\u00e1 uma apar\u00eancia diferente em diferentes dispositivos.<\/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                            Leia Mais                    <\/a>\n\n<\/div>\n\n<p>Ainda confuso? N\u00e3o se preocupe, vamos aprofundar em um momento.<\/p>\n<p>Lembre-se disso por agora: <strong>REM \u00e9 geralmente a aposta mais segura para a maioria dos sites<\/strong>.<\/p>\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\tComo Aprender CSS em 2024 (R\u00e1pido &#038; Gr\u00e1tis)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/aprender-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<h2 id=\"h2_understanding-rem-and-em\" class=\"wp-block-heading\">Entendendo REM e EM<\/h2>\n<p>Bem, vamos nos aprofundar um pouco mais.<\/p>\n<p><strong>Tanto REM quanto EM s\u00e3o unidades relativas. Isso significa que eles mant\u00eam o mesmo tamanho <em>relativo<\/em> a uma r\u00e9gua espec\u00edfica.<\/strong><\/p>\n<p>Este tipo de <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">dimensionamento desempenha um papel fundamental no design responsivo<\/a>.<\/p>\n<p>Os tamanhos absolutos (por exemplo, px) sempre permanecem os mesmos, o que significa que o texto pode parecer min\u00fasculo em um desktop e enorme em um telefone. Em contraste, as unidades relativas podem se adaptar a diferentes dispositivos e layouts.<\/p>\n<p>Em um contexto digital, REM e EM ainda s\u00e3o usados \u200b\u200bprincipalmente para medir texto. No entanto, voc\u00ea tamb\u00e9m pode usar essas unidades para:<\/p>\n<ul class=\"wp-block-list\"><li>Margens<\/li><li>Padding<\/li><li>Largura e altura<\/li><li>Altura da linha<\/li><li>Propriedades de borda<\/li><li>Sombra da caixa<\/li><li>Posicionamento<\/li><li>Media queries<\/li><\/ul>\n<p>Em outras palavras, REM e EM s\u00e3o \u00fateis sempre que voc\u00ea deseja um dimensionamento flex\u00edvel em seu design.<\/p>\n<p>Certo, isso cobre em grande parte o terreno comum entre essas duas unidades.<\/p>\n<p>Agora, vamos dar uma olhada mais de perto no que torna cada um deles \u00fanico.<\/p>\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<h2 id=\"h2_getting-to-know-rem\" class=\"wp-block-heading\">Conhecendo o REM<\/h2>\n<p>REM significa \u201croot em\u201d. Quando voc\u00ea usa essa unidade, est\u00e1 definindo o tamanho de algo em rela\u00e7\u00e3o ao tamanho da fonte do seu elemento raiz (geralmente sua tag <code>&lt;html&gt;<\/code>).<\/p>\n<p>A maioria dos navegadores usa por padr\u00e3o <code>16px<\/code> para o elemento raiz. No entanto, \u00e9 uma boa ideia definir seu tamanho de fonte padr\u00e3o <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">usando CSS<\/a>.<\/p>\n<p>Voc\u00ea pode fazer assim:<\/p>\n<p><code>html { font-size: 16px; \/* Seu tamanho de fonte base *\/ }<\/code><\/p>\n<p>Qualquer tamanho que voc\u00ea escolher se tornar\u00e1 <code>1rem<\/code>. Esta \u00e9 sua nova linha de base para toda a p\u00e1gina.<\/p>\n<p>Qualquer n\u00famero que seja maior ou menor ir\u00e1 alterar o tamanho do seu elemento alvo, em rela\u00e7\u00e3o ao padr\u00e3o escolhido.<\/p>\n<p>\u00c9 um pouco complicado explicar claramente, ent\u00e3o aqui est\u00e1 um exemplo f\u00e1cil:<\/p>\n<p><code>html { font-size: 16px; \/* Seu tamanho de fonte base *\/ }<br>body { font-size: 1.2rem; \/* 19.2px *\/ }<br>h1 { font-size: 2.4rem; \/* 38.4px *\/ }<\/code><\/p>\n<p>Neste cen\u00e1rio, definimos o tamanho da fonte da tag <code>&lt;html&gt;<\/code> como <code>16px<\/code>. Esta \u00e9 a nossa linha de base de <code>1rem<\/code>.<\/p>\n<p>Queremos que o texto do nosso corpo seja um pouco maior do que isso. Ent\u00e3o, definimos o tamanho da fonte do <code>&lt;body&gt;<\/code> para <code>1.2rem<\/code>. Isso \u00e9 120% da linha de base.<\/p>\n<p>O cabe\u00e7alho principal em nossa p\u00e1gina precisa ser muito maior. Ao definir o tamanho da fonte <code>&lt;h1&gt;<\/code> para <code>2.4rem<\/code>, podemos fazer o t\u00edtulo 240% do tamanho da nossa linha de base.<\/p>\n<p>Voc\u00ea acabar\u00e1 com algo assim:<\/p>\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=\"Diagrama do dimensionamento de fonte em unidades REM. HTML a 16px, h1 a 2.4rem (38.4px) e corpo a 1.2rem (19.2px) com texto de exemplo.\" 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<h3 class=\"wp-block-heading\">Por que usar REM?<\/h3>\n<p>Quais s\u00e3o as vantagens deste sistema?<\/p>\n<p>Em CSS, as unidades REM oferecem algumas vantagens bastante boas:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Consist\u00eancia verdadeira:<\/strong> Tudo \u00e9 escalonado proporcionalmente com base no tamanho da raiz, ent\u00e3o seu design sempre parecer\u00e1 exatamente como voc\u00ea planejou em qualquer dispositivo.<\/li><li><strong>Responsividade:<\/strong> O escalonamento proporcional significa que seu site ou aplicativo pode se adaptar a uma ampla gama de dispositivos.<\/li><li><strong>Manuten\u00e7\u00e3o f\u00e1cil:<\/strong> Quando todos os seus estilos s\u00e3o baseados na mesma configura\u00e7\u00e3o de raiz, \u00e9 f\u00e1cil fazer mudan\u00e7as amplas conforme necess\u00e1rio \u2014 Voc\u00ea n\u00e3o precisa visitar cada elemento individualmente e alterar o tamanho da fonte manualmente. Isso tamb\u00e9m economiza muito <em>tempo<\/em>.<\/li><li><strong>\u00d3tima acessibilidade:<\/strong> Bastante <a href=\"https:\/\/medium.com\/@vamptvo\/pixels-vs-ems-users-do-change-font-size-5cfb20831773\" target=\"_blank\" rel=\"noreferrer noopener\">pessoas<\/a> realmente alteram o tamanho da fonte padr\u00e3o de seus navegadores para tornar o texto mais f\u00e1cil de ler. Ao utilizar o dimensionamento REM, seu design pode se adaptar a essas prefer\u00eancias do usu\u00e1rio.<\/li><\/ul>\n<p>Claro, nem tudo s\u00e3o flores. Existem algumas desvantagens:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Terceiros Wildcard:<\/strong> Se seu site inclui conte\u00fado incorporado, voc\u00ea pode descobrir que texto e outros elementos n\u00e3o seguem suas regras REM.<\/li><li><strong>C\u00e1lculos complicados: <\/strong>Calcular exatamente o tamanho de 1.2rem requer um pouco de matem\u00e1tica.<\/li><li><strong>Grande poder, maior responsabilidade: <\/strong>Quando voc\u00ea pode alterar o tamanho do texto em todo o seu site t\u00e3o facilmente, voc\u00ea precisa ter cuidado com as edi\u00e7\u00f5es para evitar desastres de design em todo o site!<\/li><\/ul>\n<p>Como regra geral, <strong>REM deve ser sua primeira op\u00e7\u00e3o para a maioria dos projetos<\/strong>. \u00c9 mais f\u00e1cil de manusear do que o dimensionamento EM, e os resultados s\u00e3o mais previs\u00edveis.<\/p>\n<p>Entretanto, existem momentos em que o EM \u00e9 \u00fatil.<\/p>\n<h2 id=\"h2_getting-to-know-em\" class=\"wp-block-heading\">Conhecendo EM<\/h2>\n<p>EM \u00e9 um cliente complicado. Esta unidade baseia-se no tamanho da fonte do seu elemento pai \u2014 como um camale\u00e3o adaptando-se ao seu ambiente.<\/p>\n<p>A confus\u00e3o come\u00e7a quando voc\u00ea inicia o aninhamento. A maioria dos elementos <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">herda o tamanho de fonte padr\u00e3o dos seus pais<\/a>. Mas e se o pai tamb\u00e9m usar dimensionamento EM? Voc\u00ea pode acabar com uma bagun\u00e7a proporcional bastante facilmente.<\/p>\n<p>Aqui est\u00e1 um exemplo simples:<\/p>\n<p>Imagine que voc\u00ea tem uma p\u00e1gina que cont\u00e9m um <code>&lt;div&gt;<\/code>. Dentro dessa caixa, temos uma tag <code>&lt;p&gt;<\/code> contendo algum texto.<\/p>\n<p><code>&lt;html&gt;<br>    &lt;div&gt;<br>        &lt;p&gt;Algum texto aqui.&lt;\/p&gt;<br>    &lt;\/div&gt;<br>&lt;\/html&gt;<\/code><\/p>\n<p>Agora, d\u00ea uma olhada no CSS para este trecho de HTML:<\/p>\n<p><code>html { font-size: 16px; \/* Tamanho padr\u00e3o inicial *\/ }<br>div { font-size: 1.2em; \/* 19.2px *\/ }<br>p { font-size: 1.2em; \/* 23.04px *\/ }<\/code><\/p>\n<p>Come\u00e7amos definindo o tamanho de fonte padr\u00e3o para toda a p\u00e1gina. At\u00e9 agora, tudo bem.<\/p>\n<p>Em seguida, dissemos que o conte\u00fado de <code>&lt;div&gt;<\/code> deve ser <code>1.2em<\/code>. Em outras palavras, nosso texto deve ser 120% do padr\u00e3o do elemento pai.<\/p>\n<p>Para concluir, tamb\u00e9m ajustamos o <code>&lt;p&gt;<\/code><strong> <\/strong>tamanho da fonte para <code>1.2em<\/code>.<\/p>\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=\"Diagrama do dimensionamento de fontes em unidades EM mostrando elementos de texto aninhados e seus tamanhos relativos com base nos elementos pai.\" 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<p>Espere um minuto! H\u00e1 um aumento significativo no tamanho do texto, medido em pixels.<\/p>\n<p>Por que isso?<\/p>\n<p>O elemento <code>&lt;p&gt;<\/code> observou o tamanho da fonte de seu elemento pai <code>&lt;div&gt; (19.2px)<\/code> e assumiu isso como padr\u00e3o. E porque pedimos por <code>1.2em<\/code>, obtemos um texto que \u00e9 120% do tamanho padr\u00e3o.<\/p>\n<p>Esses tipos de erros s\u00e3o f\u00e1ceis de cometer quando se trabalha com a unidade EM.<\/p>\n<h3 class=\"wp-block-heading\">EM \u00e9 \u00f3timo para dimensionamento espec\u00edfico<\/h3>\n<p>Al\u00e9m das desvantagens, a unidade EM pode ser realmente \u00fatil para dimensionar componentes espec\u00edficos.<\/p>\n<p>Suponha que voc\u00ea queira criar um bot\u00e3o que sempre ocupe aproximadamente a mesma quantidade de espa\u00e7o dentro do seu elemento pai.<\/p>\n<p>Seu c\u00f3digo HTML pode ser:<\/p>\n<p><code>&lt;button class='button'&gt;Clique em Mim&lt;\/button&gt;<\/code><\/p>\n<p>Para estilizar seu bot\u00e3o, voc\u00ea pode usar unidades EM para <code>font-size<\/code> e <code>padding<\/code>.<\/p>\n<p>O CSS teria uma apar\u00eancia mais ou menos assim:<\/p>\n<p><code>.button {<br>&nbsp;&nbsp;&nbsp;&nbsp;font-size: 1em; \/* Tamanho relativo ao tamanho do texto do pai *\/<br>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0.5em 1em; \/* O preenchimento escala com o tamanho da fonte *\/<br>}<\/code><\/p>\n<p>O c\u00f3digo acima nos fornece um bot\u00e3o simples com um pouco de espa\u00e7o ao redor do texto.<\/p>\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 para componentes de UI, mostrando que o espa\u00e7amento do bot\u00e3o escala com o tamanho da fonte do elemento pai enquanto mant\u00e9m propor\u00e7\u00f5es consistentes.\" 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<p>Se o tamanho da fonte do elemento pai aumentar, o tamanho da fonte e o espa\u00e7amento do bot\u00e3o ir\u00e3o acompanhar.<\/p>\n<p>Dessa forma, voc\u00ea poder\u00e1 manter o mesmo equil\u00edbrio visual entre os elementos dentro do pai, mesmo se voc\u00ea mudar de dispositivos ou alterar o n\u00edvel de zoom.<\/p>\n<h3 class=\"wp-block-heading\">Por que usar EM?<\/h3>\n<p>Diante de toda a confus\u00e3o, por que voc\u00ea usaria EM afinal?<\/p>\n<p>Bem, ele vem com alguns benef\u00edcios:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Dimensionamento contextual:<\/strong> Os elementos dimensionam-se com base no tamanho do seu elemento pai, oferecendo um controle mais matizado sobre o dimensionamento em todo o seu design.<\/li><li><strong>Design baseado em componentes: <\/strong>As unidades EM s\u00e3o \u00f3timas para criar componentes autossuficientes e reutiliz\u00e1veis que mant\u00eam as mesmas propor\u00e7\u00f5es.<\/li><li><strong>Controle preciso<\/strong>: Voc\u00ea pode ajustar os tamanhos em cada n\u00edvel da estrutura do documento, sem fazer altera\u00e7\u00f5es em massa.<\/li><li><strong>Responsividade<\/strong>: Assim como as unidades REM, as unidades EM permitem que seu design <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/\" target=\"_blank\" rel=\"noreferrer noopener\">adapte-se a diferentes tamanhos de tela<\/a> e prefer\u00eancias dos usu\u00e1rios.<\/li><\/ul>\n<p>Como vimos, tamb\u00e9m existem algumas desvantagens:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Efeitos cumulativos<\/strong>: Elementos aninhados podem levar a tamanhos inesperados, \u00e0 medida que os valores EM come\u00e7am a se acumular.<\/li><li><strong>Desafios de manuten\u00e7\u00e3o<\/strong>: Alterar o tamanho da fonte de um elemento pai afeta todos os elementos filhos, o que pode levar a consequ\u00eancias indesejadas \u2014 como texto do corpo enorme e t\u00edtulos min\u00fasculos.<\/li><li><strong>Complexidade em projetos grandes<\/strong>: \u00c0 medida que seu projeto cresce, manter o controle de todos os tamanhos relativos pode se tornar desafiador.<\/li><\/ul>\n<p>Em resumo, EM pode ser incrivelmente \u00fatil para desenhos baseados em componentes e quando voc\u00ea precisa de controle preciso sobre as rela\u00e7\u00f5es entre elementos. \u00c9 mais flex\u00edvel do que o dimensionamento baseado em pixels, mas requer um planejamento mais cuidadoso do que REM.<\/p>\n<h2 id=\"h-rem-or-em-which-should-you-use\" class=\"wp-block-heading\">REM ou EM: Qual Voc\u00ea Deve Usar?<\/h2>\n<p>Bem, isso foi muita informa\u00e7\u00e3o interessante. No entanto, se voc\u00ea est\u00e1 construindo algo, voc\u00ea s\u00f3 precisa saber qual unidade CSS usar.<\/p>\n<p>Aqui est\u00e1 o nosso veredicto:<\/p>\n<ul class=\"wp-block-list\"><li><strong>REM \u00e9 a melhor escolha para a maioria dos projetos<\/strong> porque \u00e9 mais escal\u00e1vel e oferece melhor controle.<\/li><li><strong>EM pode ser uma ferramenta valiosa para cen\u00e1rios espec\u00edficos<\/strong> envolvendo estilos aninhados.<\/li><\/ul>\n<p>Vale ressaltar tamb\u00e9m que tanto REM quanto EM s\u00e3o geralmente <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/hora-de-redesenhar-o-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">melhores para design moderno<\/a> do que unidades absolutas como <code>px<\/code>.<\/p>\n<p>Eles tamb\u00e9m s\u00e3o mais pr\u00e1ticos para dimensionar texto em compara\u00e7\u00e3o com outras unidades relativas, como unidades de viewport (<code>vh\/vw<\/code>) e porcentagem (<strong>%<\/strong>).<\/p>\n<p><strong>Vamos observar REM vs. EM de uma vis\u00e3o ampla:<\/strong><\/p>\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Funcionalidade<\/strong><\/td><td><strong>REM<\/strong><\/td><td><strong>EM<\/strong><\/td><\/tr><tr><td>Herdan\u00e7a<\/td><td>Consistente com o elemento raiz<\/td><td>Relativo ao elemento pai<\/td><\/tr><tr><td>Escalabilidade<\/td><td>Excelente<\/td><td>Mais limitada<\/td><\/tr><tr><td>Complexidade<\/td><td>Menor, devido \u00e0 consist\u00eancia<\/td><td>Maior, devido ao dimensionamento contextual<\/td><\/tr><tr><td>Manuten\u00e7\u00e3o<\/td><td>F\u00e1cil \u2014 mudan\u00e7as no tamanho da raiz se propagam<\/td><td>Pode ser mais complicado com elementos aninhados<\/td><\/tr><tr><td>Acessibilidade<\/td><td>Funciona bem com prefer\u00eancias do usu\u00e1rio<\/td><td>Pode exigir ajustes<\/td><\/tr><tr><td>Melhor para<\/td><td>Espa\u00e7amento global e layout<\/td><td>Escala espec\u00edfica para componentes<\/td><\/tr><\/tbody><\/table><\/figure>\n<h2 id=\"h2_rem-and-em-font-sizing-faqs\" class=\"wp-block-heading\">REM e EM: Perguntas Frequentes Sobre Tamanho de Fonte<\/h2>\n<p>O guia deve ter esclarecido a maior parte da confus\u00e3o em torno dessas unidades muito semelhantes.<\/p>\n<p>Mas se voc\u00ea ainda tem d\u00favidas, aqui est\u00e1 o que voc\u00ea precisa saber!<\/p>\n<h3 class=\"wp-block-heading\">Devo usar REM ou EM para design responsivo?<\/h3>\n<p>REM \u00e9 geralmente a melhor escolha para designs responsivos, pois permite criar layouts consistentes e escal\u00e1veis que se adaptam a diferentes tamanhos de tela.<\/p>\n<p>A \u00fanica exce\u00e7\u00e3o \u00e9 quando voc\u00ea deseja criar unidades discretas, onde todos os elementos mant\u00eam a mesma propor\u00e7\u00e3o de tamanho.<\/p>\n<h3 class=\"wp-block-heading\">Como posso evitar complexidade ao usar unidades EM?<\/h3>\n<p>Para evitar complexidade com unidades EM, tente limitar o aninhamento de elementos. Use REM para dimensionamento global e EM para ajustes menores dentro de componentes espec\u00edficos.<\/p>\n<h3 class=\"wp-block-heading\">H\u00e1 um tamanho de fonte base recomendado para REM?<\/h3>\n<p>Embora n\u00e3o exista uma regra estrita, um tamanho comum de fonte base para REM \u00e9 <code>16px<\/code>. No entanto, voc\u00ea pode escolher qualquer valor que se adapte \u00e0s suas prefer\u00eancias de design e <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/\" target=\"_blank\" rel=\"noreferrer noopener\">requisitos de acessibilidade<\/a>.<\/p>\n<h2 id=\"h2_dive-deeper-into-css\" class=\"wp-block-heading\">Aprofunde-se em CSS<\/h2>\n<p>Quer aprender mais sobre design digital? Temos v\u00e1rios \u00f3timos recursos de aprendizado de CSS:<\/p>\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/transformacao-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Conhecendo a Propriedade de Transforma\u00e7\u00e3o do CSS<\/a><\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/tailwind-vs-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tailwind vs. Bootstrap: Qual Framework CSS Voc\u00ea Precisa?<\/a><\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/tailwind-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Seu Guia Completo de Tailwind CSS<\/a><\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/frameworks-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">16 Frameworks CSS Populares Que V\u00e3o Ajudar Voc\u00ea a Economizar Tempo (Com Estilo)<\/a><\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/animacao-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Anima\u00e7\u00f5es em CSS: Enrique\u00e7a Seu Site Com Estas 17 Op\u00e7\u00f5es<\/a><\/li><\/ul>\n<h2 id=\"h2_responsive-design-matters\" class=\"wp-block-heading\">O Design Responsivo \u00e9 Importante<\/h2>\n<p>A unidade CSS \u00e9 um componente que muitas vezes \u00e9 ignorado, como mencionamos no in\u00edcio deste guia.<\/p>\n<p>Entretanto, se voc\u00ea deseja criar um site ou aplicativo que seja bonito em todos os dispositivos e funcione para cada usu\u00e1rio, \u00e9 importante pensar nos detalhes do design.<\/p>\n<p>O debate entre REM ou EM n\u00e3o importa tanto no final \u2014 O mais importante \u00e9 que seu site seja acess\u00edvel, responsivo e f\u00e1cil de usar!<\/p>\n<p>Lembre-se que uma interface bonita n\u00e3o significa nada se seu site ou aplicativo n\u00e3o carregar. Quando se trata de oferecer a melhor experi\u00eancia para seus usu\u00e1rios, considere fazer um upgrade na sua hospedagem com a DreamHost.<\/p>\n<p>N\u00f3s oferecemos uma <strong>garantia de 100% de Tempo de Atividade<\/strong> em todos os nossos <a href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/compartilhado\/\" target=\"_blank\" rel=\"noreferrer noopener\">planos de hospedagem compartilhada<\/a>, com servidores otimizados e \u00f3timas funcionalidades de seguran\u00e7a. <a href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">Inscreva-se hoje<\/a> para ver a diferen\u00e7a por si mesmo!<\/p>\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 sobre REM e EM? Aprenda a diferen\u00e7a entre essas unidades CSS em nosso guia super conciso.<\/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":"","toc_headlines":"[[\"h-rem-vs-em-in-a-nutshell\",\"REM vs. EM em Resumo\"],[\"h2_understanding-rem-and-em\",\"Entendendo REM e EM\"],[\"h2_getting-to-know-rem\",\"Conhecendo o REM\"],[\"h2_getting-to-know-em\",\"Conhecendo EM\"],[\"h-rem-or-em-which-should-you-use\",\"REM ou EM: Qual Voc\u00ea Deve Usar?\"],[\"h2_rem-and-em-font-sizing-faqs\",\"REM e EM: Perguntas Frequentes Sobre Tamanho de Fonte\"],[\"h2_dive-deeper-into-css\",\"Aprofunde-se em CSS\"],[\"h2_responsive-design-matters\",\"O Design Responsivo \u00e9 Importante\"]]","hide_toc":false,"footnotes":""},"categories":[14407],"tags":[],"class_list":["post-54800","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites-pt"],"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: Como Escolher a Unidade CSS Correta - DreamHost Blog<\/title>\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\/pt\/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: Como Escolher a Unidade CSS Correta\" \/>\n<meta property=\"og:description\" content=\"Confuso sobre REM e EM? Aprenda a diferen\u00e7a entre essas unidades CSS em nosso guia super conciso.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/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-26T19:23:30+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=\"11 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"REM vs. EM: Como Escolher a Unidade CSS Correta - DreamHost Blog","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\/pt\/rem-vs-em\/","og_locale":"en_US","og_type":"article","og_title":"REM vs. EM: Como Escolher a Unidade CSS Correta","og_description":"Confuso sobre REM e EM? Aprenda a diferen\u00e7a entre essas unidades CSS em nosso guia super conciso.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/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-26T19:23:30+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":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/rem-vs-em\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/rem-vs-em\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"REM vs. EM: Como Escolher a Unidade CSS Correta","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-05-26T19:23:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/rem-vs-em\/"},"wordCount":2162,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/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":["Design de Sites"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/rem-vs-em\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/rem-vs-em\/","name":"REM vs. EM: Como Escolher a Unidade CSS Correta - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/rem-vs-em\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/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-26T19:23:30+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/rem-vs-em\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/rem-vs-em\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/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\/pt\/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: Como Escolher a Unidade CSS Correta"}]},{"@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":"pt","translations":{"pt":54800,"en":48900,"es":48882,"pl":52124,"de":54730,"uk":54758,"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\/54800","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=54800"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54800\/revisions"}],"predecessor-version":[{"id":59419,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54800\/revisions\/59419"}],"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=54800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=54800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=54800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}