{"id":48882,"date":"2024-08-26T07:00:00","date_gmt":"2024-08-26T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=48882"},"modified":"2025-01-16T15:28:12","modified_gmt":"2025-01-16T23:28:12","slug":"rem-vs-em-unidad-css","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/","title":{"rendered":"REM vs. EM: C\u00f3mo Elegir la Unidad CSS Correcta"},"content":{"rendered":"\n<p>Probablemente, no sue\u00f1es con el tama\u00f1o de los elementos CSS por la noche, pero si est\u00e1s <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/es\/creador-sitios-web\/\" rel=\"noopener\">construyendo un sitio web<\/a> o una aplicaci\u00f3n, este tema definitivamente vale la pena considerarlo.<\/p>\n\n\n\n<p>Mientras que algunas unidades de CSS funcionan bien con tu dise\u00f1o responsivo, otras pueden mostrar un lado rebelde. Poder identificar sus diferentes caracter\u00edsticas puede ahorrarte grandes dolores de cabeza en el futuro.<\/p>\n\n\n\n<p>Hablemos de la dupla REM y EM. \u00bfCu\u00e1l deber\u00edas usar, y por qu\u00e9?<\/p>\n\n\n\n<p>\u00a1Qu\u00e9date con nosotros durante los pr\u00f3ximos p\u00e1rrafos y te lo revelaremos todo!<\/p>\n\n\n\n<h2 id=\"h-rem-vs-em-en-resumen\" class=\"wp-block-heading\">REM vs. EM en Resumen<\/h2>\n\n\n\n<p>Si est\u00e1s buscando una respuesta r\u00e1pida, <strong>aqu\u00ed tienes la versi\u00f3n resumida<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>REM:<\/strong> Esta unidad se basa en el elemento ra\u00edz (generalmente la etiqueta <strong>&lt;html&gt;<\/strong>). No importa qu\u00e9 m\u00e1s suceda en la p\u00e1gina, tu tama\u00f1o se mantendr\u00e1 consistente.<\/li>\n\n\n\n<li><strong>EM:<\/strong> Esta unidad busca orientaci\u00f3n en su elemento padre. Si el elemento padre cambia, el tama\u00f1o seguir\u00e1 ese cambio.<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>Para recordar la diferencia, ten en cuenta que la &#8220;R&#8221; en REM significa &#8220;root&#8221; (ra\u00edz).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"716\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01-REM-vs.-EM-en-CSS-1024x716.jpg\" alt=\"Comparaci\u00f3n de unidades REM vs. EM en CSS, mostrando c\u00f3mo se relacionan con los elementos ra\u00edz y padre respectivamente.\" class=\"wp-image-48883 lazyload\" title=\"REM vs. EM in CSS diagram\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01-REM-vs.-EM-en-CSS-1024x716.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01-REM-vs.-EM-en-CSS-300x210.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01-REM-vs.-EM-en-CSS-768x537.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01-REM-vs.-EM-en-CSS-1536x1074.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/01-REM-vs.-EM-en-CSS-600x420.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/01-REM-vs.-EM-en-CSS-1200x839.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/01-REM-vs.-EM-en-CSS-730x511.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/01-REM-vs.-EM-en-CSS-1460x1021.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/01-REM-vs.-EM-en-CSS-784x548.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/01-REM-vs.-EM-en-CSS-1568x1097.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/01-REM-vs.-EM-en-CSS-877x613.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/01-REM-vs.-EM-en-CSS.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/716;\" \/><\/figure>\n\n\n\n<p><strong>Nota Nerd:<\/strong> \u00bfPor qu\u00e9 ambas unidades terminan con &#8220;EM&#8221;? No es una abreviatura. Cuando todo el texto se imprim\u00eda, los tip\u00f3grafos usaban el ancho de una &#8220;M&#8221; may\u00fascula como referencia para el tama\u00f1o del texto. Ingenioso, \u00bfno?<\/p>\n\n\n\n<p><strong>Entonces, \u00bfcu\u00e1l deber\u00edas usar?<\/strong><\/p>\n\n\n\n<p>Bueno, eso depende.<\/p>\n\n\n\n<p>Si quieres que el texto se ajuste a su entorno, EM podr\u00eda ser la mejor opci\u00f3n. Pero si deseas que el tama\u00f1o se mantenga consistente en todo tu sitio web, deber\u00edas optar por REM.<\/p>\n\n\n\n<p>\u00bfPor qu\u00e9?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>EM:<\/strong> M\u00e1s flexible, pero puede volverse complicado si no tienes cuidado.<\/li>\n\n\n\n<li><strong>REM:<\/strong> Tama\u00f1o consistente, ideal para dise\u00f1o responsivo.<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>\u00bfTodav\u00eda est\u00e1s confundido? No te preocupes, profundizaremos en un segundo.<\/p>\n\n\n\n<p>Solo recuerda esto por ahora: <strong>REM suele ser la opci\u00f3n m\u00e1s segura para la mayor\u00eda de los sitios web.<\/strong><\/p>\n\n\n\n<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\tC\u00f3mo Aprender CSS (R\u00e1pido &amp; Gratis)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/aprende-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<\/p>\n\n\n\n<h2 id=\"h-entendiendo-rem-y-em\" class=\"wp-block-heading\">Entendiendo REM y EM<\/h2>\n\n\n\n<p>Bien, vamos a adentrarnos un poco m\u00e1s en el tema.<\/p>\n\n\n\n<p><strong>Tanto REM como EM son unidades relativas. Esto significa que mantienen el mismo tama\u00f1o en relaci\u00f3n con una referencia espec\u00edfica.<\/strong><\/p>\n\n\n\n<p>Este tipo de <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/elementos-de-diseno-web\/\" rel=\"noopener\">dimensionamiento juega un papel clave en el dise\u00f1o responsivo<\/a>.<\/p>\n\n\n\n<p>Los tama\u00f1os absolutos (por ejemplo, px) siempre se mantienen iguales, lo que significa que el texto puede aparecer diminuto en un escritorio y enorme en un tel\u00e9fono. En cambio, las unidades relativas pueden adaptarse a diferentes dispositivos y dise\u00f1os.<\/p>\n\n\n\n<p>En un contexto digital, REM y EM se usan principalmente para medir el texto. Sin embargo, tambi\u00e9n puedes usar estas unidades para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>M\u00e1rgenes<\/li>\n\n\n\n<li>Relleno (padding)<\/li>\n\n\n\n<li>Ancho y alto<\/li>\n\n\n\n<li>Altura de l\u00ednea<\/li>\n\n\n\n<li>Propiedades de borde<\/li>\n\n\n\n<li>Sombra de caja (box shadow)<\/li>\n\n\n\n<li>Posicionamiento<\/li>\n\n\n\n<li>Media queries<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>En otras palabras, REM y EM son \u00fatiles siempre que desees un tama\u00f1o flexible dentro de tu dise\u00f1o.<\/p>\n\n\n\n<p>Bien, eso cubre en gran medida el terreno com\u00fan entre estas dos unidades.<\/p>\n\n\n\n<p>Ahora, echemos un vistazo m\u00e1s de cerca a lo que hace que cada una de ellas sea \u00fanica.<\/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=\"h-conociendo-rem\" class=\"wp-block-heading\">Conociendo REM<\/h2>\n\n\n\n<p>REM significa &#8220;root em.&#8221; Cuando usas esta unidad, est\u00e1s definiendo qu\u00e9 tan grande deber\u00eda ser algo en relaci\u00f3n con el tama\u00f1o de fuente de tu elemento ra\u00edz (generalmente la etiqueta <strong>&lt;html&gt;<\/strong>).<\/p>\n\n\n\n<p>La mayor\u00eda de los navegadores predeterminan <strong>16px<\/strong> para el elemento ra\u00edz. Sin embargo, es una buena idea definir tu tama\u00f1o de fuente predeterminado <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/aprende-css\/\" rel=\"noopener\">usando CSS<\/a>.<\/p>\n\n\n\n<p>Puedes hacerlo de esta manera:<\/p>\n\n\n\n<p>html { font-size: 16px; \/* Your base font size *\/ }<\/p>\n\n\n\n<p>Cualquier tama\u00f1o que elijas se convierte en <strong>1rem<\/strong>. Este es tu nuevo punto de referencia para toda la p\u00e1gina.<\/p>\n\n\n\n<p>Cualquier cifra que sea mayor o menor cambiar\u00e1 el tama\u00f1o de tu elemento objetivo en relaci\u00f3n con el predeterminado que has elegido.<\/p>\n\n\n\n<p>Es un poco complicado de explicar claramente, as\u00ed que aqu\u00ed tienes un ejemplo sencillo:<\/p>\n\n\n\n<p>html { font-size: 16px; \/* Your base font size *\/ }&nbsp;<\/p>\n\n\n\n<p>body { font-size: 1.2rem; \/* 19.2px *\/ }&nbsp;<\/p>\n\n\n\n<p>h1 { font-size: 2.4rem; \/* 38.4px *\/ }<\/p>\n\n\n\n<p>En este escenario, hemos definido el tama\u00f1o de fuente de la etiqueta <strong>&lt;html&gt;<\/strong> como <strong>16px<\/strong>. Este es nuestro punto de referencia de <strong>1rem<\/strong>.<\/p>\n\n\n\n<p>Queremos que el texto del cuerpo sea un poco m\u00e1s grande que eso, as\u00ed que configuramos el tama\u00f1o de fuente del <strong>&lt;body&gt;<\/strong> a <strong>1.2rem<\/strong>, que es el 120% del punto de referencia.<\/p>\n\n\n\n<p>El encabezado principal de nuestra p\u00e1gina necesita ser mucho m\u00e1s grande. Al configurar el tama\u00f1o de fuente del <strong>&lt;h1&gt;<\/strong> a <strong>2.4rem<\/strong>, podemos hacer que el titular sea un 240% del tama\u00f1o de nuestro punto de referencia.<\/p>\n\n\n\n<p>Terminar\u00e1s con algo como esto:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"725\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02-Tamano-de-fuente-en-REM-1024x725.jpg\" alt=\"Diagrama de tama\u00f1o de fuente en unidades REM. HTML a 16 px, h1 a 2,4 rem (38,4 px) y body a 1,2 rem (19,2 px) con texto de ejemplo.\" class=\"wp-image-48885 lazyload\" title=\"Font sizing in REM diagram\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02-Tamano-de-fuente-en-REM-1024x725.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02-Tamano-de-fuente-en-REM-300x212.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02-Tamano-de-fuente-en-REM-768x544.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02-Tamano-de-fuente-en-REM-1536x1088.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/02-Tamano-de-fuente-en-REM-600x425.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/02-Tamano-de-fuente-en-REM-1200x850.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/02-Tamano-de-fuente-en-REM-730x517.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/02-Tamano-de-fuente-en-REM-1460x1034.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/02-Tamano-de-fuente-en-REM-784x555.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/02-Tamano-de-fuente-en-REM-1568x1110.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/02-Tamano-de-fuente-en-REM-877x621.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/02-Tamano-de-fuente-en-REM.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/725;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-por-que-usar-rem\">\u00bfPor qu\u00e9 Usar REM?<\/h3>\n\n\n\n<p>\u00bfCu\u00e1les son las ventajas de este sistema?<\/p>\n\n\n\n<p>En CSS, las unidades REM ofrecen algunos beneficios bastante buenos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Consistencia verdadera:<\/strong> Todo se escala proporcionalmente seg\u00fan el tama\u00f1o ra\u00edz, por lo que tu dise\u00f1o siempre se ver\u00e1 exactamente como lo planeaste en cualquier dispositivo.<\/li>\n\n\n\n<li><strong>Responsividad:<\/strong> La escala proporcional significa que tu sitio web o aplicaci\u00f3n puede adaptarse a una amplia gama de dispositivos.<\/li>\n\n\n\n<li><strong>F\u00e1cil mantenimiento:<\/strong> Cuando todos tus estilos se basan en la misma configuraci\u00f3n ra\u00edz, es f\u00e1cil hacer cambios generales seg\u00fan sea necesario. No necesitas visitar cada elemento individualmente y cambiar el tama\u00f1o de fuente manualmente. Esto tambi\u00e9n te ahorra mucho tiempo.<\/li>\n\n\n\n<li><strong>Gran accesibilidad:<\/strong> <a target=\"_blank\" href=\"https:\/\/medium.com\/@vamptvo\/pixels-vs-ems-users-do-change-font-size-5cfb20831773\" rel=\"noopener\">Mucha gente<\/a> en realidad cambia el tama\u00f1o de fuente predeterminado de sus navegadores para que el texto sea m\u00e1s f\u00e1cil de leer. Al usar el dimensionamiento REM, tu dise\u00f1o puede adaptarse a estas preferencias de usuario.<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>Por supuesto, no todo es perfecto. Hay algunas desventajas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Comodines de terceros:<\/strong> Si tu sitio incluye contenido incrustado, es posible que encuentres que el texto y otros elementos no siguen tus reglas de REM.<\/li>\n\n\n\n<li><strong>C\u00e1lculos complicados:<\/strong> Calcular exactamente qu\u00e9 tan grande ser\u00e1 1.2rem requiere algo de matem\u00e1ticas.<\/li>\n\n\n\n<li><strong>Gran poder, mayor responsabilidad:<\/strong> Cuando puedes alterar el tama\u00f1o del texto en todo tu sitio web tan f\u00e1cilmente, necesitas tener cuidado con las ediciones para evitar desastres en el dise\u00f1o de todo el sitio.<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>Como regla general, <strong>REM deber\u00eda ser tu opci\u00f3n preferida para la mayor\u00eda de los proyectos<\/strong>. Es m\u00e1s f\u00e1cil de manejar que el tama\u00f1o con EM, y los resultados son m\u00e1s predecibles.<\/p>\n\n\n\n<p>Sin embargo, hay momentos en los que EM es \u00fatil.<\/p>\n\n\n\n<h2 id=\"h-conociendo-em\" class=\"wp-block-heading\">Conociendo EM<\/h2>\n\n\n\n<p>EM es un cliente complicado. Esta unidad se basa en el tama\u00f1o de fuente de su elemento padre, como un camale\u00f3n que se adapta a su entorno.<\/p>\n\n\n\n<p>La confusi\u00f3n comienza cuando empiezas a anidar. La mayor\u00eda de los elementos <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/instalar-tema-child-wordpress\/\" rel=\"noopener\">heredan su tama\u00f1o de fuente predeterminado de su padre<\/a>. Pero, \u00bfqu\u00e9 pasa si el padre tambi\u00e9n usa el tama\u00f1o en EM? Podr\u00edas terminar f\u00e1cilmente con un enredo de proporcionalidad.<\/p>\n\n\n\n<p>Aqu\u00ed tienes un ejemplo sencillo:<\/p>\n\n\n\n<p>Supongamos que tienes una p\u00e1gina que contiene un <strong>&lt;div&gt;<\/strong>. Dentro de esa caja, tenemos una etiqueta <strong>&lt;p&gt;<\/strong> que contiene algo de texto.<\/p>\n\n\n\n<p>&lt;html&gt;<\/p>\n\n\n\n<p>&lt;div&gt;<\/p>\n\n\n\n<p>&lt;p&gt;Some text here.&lt;\/p&gt;<\/p>\n\n\n\n<p>&lt;\/div&gt;<\/p>\n\n\n\n<p>&lt;\/html&gt;<\/p>\n\n\n\n<p>Ahora, echa un vistazo al CSS para este fragmento de HTML:<\/p>\n\n\n\n<p>html { font-size: 16px; \/* Starting default size *\/ }&nbsp;<\/p>\n\n\n\n<p>div { font-size: 1.2em; \/* 19.2px *\/ }&nbsp;<\/p>\n\n\n\n<p>p { font-size: 1.2em; \/* 23.04px *\/ }<\/p>\n\n\n\n<p>Comenzamos definiendo el tama\u00f1o de fuente predeterminado para toda la p\u00e1gina. Hasta aqu\u00ed todo bien.<\/p>\n\n\n\n<p>Luego, dijimos que el contenido del <strong>&lt;div&gt;<\/strong> deber\u00eda ser <strong>1.2em<\/strong>. En otras palabras, nuestro texto deber\u00eda ser el 120% del tama\u00f1o predeterminado del elemento padre.<\/p>\n\n\n\n<p>Para terminar, tambi\u00e9n hicimos que el tama\u00f1o de fuente del<strong> &lt;p&gt;<\/strong> fuera de <strong>1.2em<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"725\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03-Tamanos-de-fuente-EM-1024x725.jpg\" alt=\"Diagrama de tama\u00f1o de fuente en unidades EM que muestra elementos de texto anidados y sus tama\u00f1os relativos en funci\u00f3n de los elementos principales.\" class=\"wp-image-48887 lazyload\" title=\"Font sizing in EM diagram\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03-Tamanos-de-fuente-EM-1024x725.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03-Tamanos-de-fuente-EM-300x212.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03-Tamanos-de-fuente-EM-768x544.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03-Tamanos-de-fuente-EM-1536x1088.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/03-Tamanos-de-fuente-EM-600x425.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/03-Tamanos-de-fuente-EM-1200x850.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/03-Tamanos-de-fuente-EM-730x517.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/03-Tamanos-de-fuente-EM-1460x1034.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/03-Tamanos-de-fuente-EM-784x555.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/03-Tamanos-de-fuente-EM-1568x1110.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/03-Tamanos-de-fuente-EM-877x621.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/03-Tamanos-de-fuente-EM.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/725;\" \/><\/figure>\n\n\n\n<p>\u00a1Espera un minuto! Hay un aumento significativo en el tama\u00f1o del texto, medido en p\u00edxeles.<\/p>\n\n\n\n<p>\u00bfPor qu\u00e9 es eso?<\/p>\n\n\n\n<p>El elemento <strong>&lt;p&gt;<\/strong> ha mirado el tama\u00f1o de fuente de su elemento padre <strong>&lt;div&gt;<\/strong> (<strong>19.2px<\/strong>) y lo ha tomado como el valor predeterminado. Y como pedimos <strong>1.2em<\/strong>, obtenemos un texto que es el 120% del tama\u00f1o predeterminado.<\/p>\n\n\n\n<p>Este tipo de errores son f\u00e1ciles de cometer cuando trabajas con la unidad EM.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-em-es-excelente-para-tamanos-especificos\">EM es Excelente para Tama\u00f1os Espec\u00edficos<\/h3>\n\n\n\n<p>Aparte de los inconvenientes, la unidad EM puede ser realmente \u00fatil para dimensionar componentes espec\u00edficos.<\/p>\n\n\n\n<p>Supongamos que quieres crear un bot\u00f3n que siempre ocupe aproximadamente la misma cantidad de espacio dentro de su elemento padre.<\/p>\n\n\n\n<p>Tu c\u00f3digo HTML podr\u00eda ser:<\/p>\n\n\n\n<p>&lt;button class=&#8217;button&#8217;&gt;Click Me&lt;\/button&gt;<\/p>\n\n\n\n<p>Para estilizar tu bot\u00f3n, podr\u00edas usar unidades EM para el tama\u00f1o de <strong>fuente<\/strong> y el <strong>padding<\/strong>.<\/p>\n\n\n\n<p>El CSS se ver\u00eda algo as\u00ed:&nbsp;<\/p>\n\n\n\n<p>.button {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;font-size: 1em; \/* Size relative to the parent text size *\/<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0.5em 1em; \/* Padding scales with the font size *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>El c\u00f3digo anterior nos da un bot\u00f3n simple con un poco de padding alrededor del texto.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"725\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-1024x725.jpg\" alt=\"Cambio de tama\u00f1o de EM para componentes de UI, que muestra las escalas de relleno de los botones con el tama\u00f1o de fuente principal mientras mantiene proporciones consistentes.\" class=\"wp-image-48889 lazyload\" title=\"EM sizing diagram\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-1024x725.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-300x212.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-768x544.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-1536x1088.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-600x425.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-1200x850.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-730x517.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-1460x1034.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-784x555.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-1568x1110.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos-877x621.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/08\/04-Dimensionamiento-EM-para-Componentes-Especificos.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/725;\" \/><\/figure>\n\n\n\n<p>Si el tama\u00f1o de fuente del elemento padre aumenta, el tama\u00f1o de fuente y el padding del bot\u00f3n tambi\u00e9n seguir\u00e1n ese aumento.<\/p>\n\n\n\n<p>De esta manera, podr\u00e1s mantener el mismo equilibrio visual entre los elementos dentro del padre, incluso si cambias de dispositivo o nivel de zoom.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-por-que-usar-em\">\u00bfPor Qu\u00e9 Usar EM?<\/h3>\n\n\n\n<p>Dada toda la confusi\u00f3n, \u00bfpor qu\u00e9 usar\u00edas EM en absoluto?<\/p>\n\n\n\n<p>Bueno, viene con algunos beneficios:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Escalado contextual<\/strong>: Los elementos se escalan seg\u00fan el tama\u00f1o de su padre, lo que te da un control m\u00e1s matizado sobre el dimensionamiento en todo tu dise\u00f1o.<\/li>\n\n\n\n<li><strong>Dise\u00f1o basado en componentes:<\/strong> Las unidades EM son excelentes para crear componentes independientes y reutilizables que mantienen las mismas proporciones.<\/li>\n\n\n\n<li><strong>Control preciso:<\/strong> Puedes ajustar los tama\u00f1os en cada nivel de la estructura del documento, sin hacer cambios generales.<\/li>\n\n\n\n<li><strong>Responsividad:<\/strong> Al igual que REM, las unidades EM permiten que tu dise\u00f1o se <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/como-optimizar-tu-sitio-dispositivos-moviles\/\" rel=\"noopener\">adapte a diferentes tama\u00f1os de pantalla<\/a> y preferencias del usuario.<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>Como hemos visto, tambi\u00e9n hay algunos inconvenientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Efectos acumulativos<\/strong>: Los elementos anidados pueden llevar a tama\u00f1os inesperados, ya que los valores de EM comienzan a acumularse.<\/li>\n\n\n\n<li><strong>Desaf\u00edos de mantenimiento:<\/strong> Cambiar el tama\u00f1o de fuente de un elemento padre afecta a todos los elementos hijos, lo que puede llevar a consecuencias no deseadas, como un texto del cuerpo muy grande y t\u00edtulos diminutos.<\/li>\n\n\n\n<li><strong>Complejidad en proyectos grandes:<\/strong> A medida que tu proyecto crece, hacer un seguimiento de todos los tama\u00f1os relativos puede volverse complicado.<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>En resumen, EM puede ser incre\u00edblemente \u00fatil para dise\u00f1os basados en componentes y cuando necesitas un control preciso sobre las relaciones entre los elementos. Es m\u00e1s flexible que el dimensionamiento basado en p\u00edxeles, pero requiere una planificaci\u00f3n m\u00e1s cuidadosa que REM.<\/p>\n\n\n\n<h2 id=\"h-rem-o-em-cual-deberias-usar-nbsp\" class=\"wp-block-heading\">REM o EM: \u00bfCu\u00e1l Deber\u00edas Usar?&nbsp;<\/h2>\n\n\n\n<p>Bueno, esa fue mucha informaci\u00f3n interesante. Sin embargo, si est\u00e1s construyendo algo, solo necesitas saber qu\u00e9 unidad de CSS usar.<\/p>\n\n\n\n<p>Aqu\u00ed est\u00e1 nuestro veredicto:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>REM es la mejor opci\u00f3n para la mayor\u00eda de los proyectos<\/strong> porque es m\u00e1s escalable y ofrece un mejor control.<\/li>\n\n\n\n<li><strong>EM puede ser una herramienta valiosa para escenarios<\/strong> espec\u00edficos que involucren estilos anidados.<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>Tambi\u00e9n vale la pena destacar que tanto REM como EM son generalmente <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/rediseno-sitio-maneras-clave\/\" rel=\"noopener\">mejores para el dise\u00f1o moderno<\/a> que las unidades absolutas como px.<\/p>\n\n\n\n<p>Tambi\u00e9n son m\u00e1s pr\u00e1cticos para dimensionar texto en comparaci\u00f3n con otras unidades relativas, como las unidades de viewport (<strong>vh<\/strong>\/<strong>vw<\/strong>) y porcentaje (%).<\/p>\n\n\n\n<p><strong>Veamos REM vs. EM desde una perspectiva general<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Caracter\u00edstica<\/strong><\/td><td><strong>REM<\/strong><\/td><td><strong>EM<\/strong><\/td><\/tr><tr><td>Herencia<\/td><td>Consistente con el elemento ra\u00edz<\/td><td>Relativo al elemento padre<\/td><\/tr><tr><td>Escalabilidad<\/td><td>Excelente<\/td><td>M\u00e1s limitada<\/td><\/tr><tr><td>Complejidad<\/td><td>Menor, debido a la consistencia<\/td><td>Mayor, debido al dimensionamiento contextual<\/td><\/tr><tr><td>Mantenimiento<\/td><td>F\u00e1cil: los cambios en el tama\u00f1o ra\u00edz se propagan<\/td><td>Puede ser m\u00e1s complicado con elementos anidados<\/td><\/tr><tr><td>Accesibilidad<\/td><td>Funciona bien con las preferencias del usuario<\/td><td>Puede requerir ajustes<\/td><\/tr><tr><td>Mejor para<\/td><td>Espaciado global y dise\u00f1o de la estructura<\/td><td>Escalado espec\u00edfico de componentes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"h-rem-y-em-preguntas-frecuentes-sobre-dimensionamiento-de-fuente\" class=\"wp-block-heading\">REM y EM: Preguntas Frecuentes sobre Dimensionamiento de Fuente<\/h2>\n\n\n\n<p>La gu\u00eda deber\u00eda haber aclarado la mayor\u00eda de las confusiones en torno a estas unidades tan similares.<\/p>\n\n\n\n<p>Pero si todav\u00eda tienes preguntas, \u00a1aqu\u00ed tienes lo que necesitas saber!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-deberia-usar-rem-o-em-para-el-diseno-responsivo\">\u00bfDeber\u00eda usar REM o EM para el dise\u00f1o responsivo?<\/h3>\n\n\n\n<p>REM es generalmente la mejor opci\u00f3n para dise\u00f1os responsivos, ya que te permite crear dise\u00f1os consistentes y escalables que se adaptan a diferentes tama\u00f1os de pantalla.&nbsp;<\/p>\n\n\n\n<p>La \u00fanica excepci\u00f3n es cuando deseas crear unidades discretas, donde todos los elementos mantienen la misma proporci\u00f3n de tama\u00f1o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-como-puedo-evitar-la-complejidad-al-usar-unidades-em\">\u00bfC\u00f3mo puedo evitar la complejidad al usar unidades EM?<\/h3>\n\n\n\n<p>Para evitar la complejidad con las unidades EM, intenta limitar la anidaci\u00f3n de elementos. Usa REM para el dimensionamiento global y EM para ajustes menores dentro de componentes espec\u00edficos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hay-un-tamano-de-fuente-base-recomendado-para-rem\">\u00bfHay un tama\u00f1o de fuente base recomendado para REM?<\/h3>\n\n\n\n<p>Aunque no hay una regla estricta, un tama\u00f1o de fuente base com\u00fan para REM es <strong>16px<\/strong>. Sin embargo, puedes elegir cualquier valor que se adapte a tus preferencias de dise\u00f1o y <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/volver-tu-pagina-web-accesible\/\" rel=\"noopener\">requisitos de accesibilidad<\/a>.<\/p>\n\n\n\n<h2 id=\"h-profundiza-en-css\" class=\"wp-block-heading\">Profundiza en CSS<\/h2>\n\n\n\n<p>\u00bfQuieres aprender m\u00e1s sobre dise\u00f1o digital? Tenemos muchos recursos excelentes para aprender CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/propiedad-transformacion-css\/\" rel=\"noopener\">Conociendo la Propiedad CSS Transform<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/tailwind-vs-bootstrap-que-framework-css-necesitas\/\" rel=\"noopener\">Tailwind vs. Bootstrap: \u00bfQu\u00e9 Framework CSS Necesitas?<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/tailwind-css-guia\/\" rel=\"noopener\">Tu Gu\u00eda Completa de Tailwind CSS<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/frameworks-css-populares\/\" rel=\"noopener\">16 Frameworks CSS Populares que te Ayudar\u00e1n a Ahorrar Tiempo (Con Estilo)<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/mejora-tu-sitio-web-animaciones-css\/\" rel=\"noopener\">Animaciones CSS: Mejora tu Sitio Web con Estas 17 Opciones<\/a><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<h2 id=\"h-el-diseno-responsivo-importa\" class=\"wp-block-heading\">El Dise\u00f1o Responsivo Importa<\/h2>\n\n\n\n<p>La unidad CSS es un componente que a menudo se pasa por alto, como mencionamos al inicio de esta gu\u00eda.<\/p>\n\n\n\n<p>Sin embargo, si quieres crear un sitio web o una aplicaci\u00f3n que se vea bien en cualquier dispositivo y funcione para todos los usuarios, es importante pensar en los detalles del dise\u00f1o.<\/p>\n\n\n\n<p>El debate entre REM o EM no es tan relevante al final \u2014 Lo m\u00e1s importante es que tu sitio sea accesible, responsivo y f\u00e1cil de usar.<\/p>\n\n\n\n<p>Solo recuerda que una interfaz bonita no significa nada si tu sitio o aplicaci\u00f3n no se carga. Cuando se trata de ofrecer la mejor experiencia a tus usuarios, considera mejorar tu alojamiento con DreamHost.<\/p>\n\n\n\n<p>Ofrecemos una <strong>garant\u00eda de tiempo de actividad del 100%<\/strong> en todos nuestros <a href=\"https:\/\/www.dreamhost.com\/es\/hosting\/\" target=\"_blank\" rel=\"noopener\">planes de hosting compartido<\/a>, con servidores optimizados y excelentes caracter\u00edsticas de seguridad. \u00a1<a href=\"https:\/\/www.dreamhost.com\/es\/hosting\/\" target=\"_blank\" rel=\"noopener\">Reg\u00edstrate hoy<\/a> y nota la diferencia por ti mismo!<\/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>\n\n","protected":false},"excerpt":{"rendered":"<p>Probablemente, no sue\u00f1es con el tama\u00f1o de los elementos CSS por la noche, pero si est\u00e1s construyendo un sitio web o una aplicaci\u00f3n, este tema definitivamente vale la pena considerarlo. Mientras que algunas unidades de CSS funcionan bien con tu dise\u00f1o responsivo, otras pueden mostrar un lado rebelde. Poder identificar sus diferentes caracter\u00edsticas puede ahorrarte [&hellip;]<\/p>\n","protected":false},"author":1075,"featured_media":48893,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"\u00bfTienes dudas sobre REM y EM? Conoce la diferencia entre estas unidades CSS en nuestra gu\u00eda s\u00faper concisa.","toc_headlines":"[[\"h-rem-vs-em-en-resumen\",\"REM vs. EM en Resumen\"],[\"h-entendiendo-rem-y-em\",\"Entendiendo REM y EM\"],[\"h-conociendo-rem\",\"Conociendo REM\"],[\"h-conociendo-em\",\"Conociendo EM\"],[\"h-rem-o-em-cual-deberias-usar-nbsp\",\"REM o EM: \u00bfCu\u00e1l Deber\u00edas Usar?\u00a0\"],[\"h-rem-y-em-preguntas-frecuentes-sobre-dimensionamiento-de-fuente\",\"REM y EM: Preguntas Frecuentes sobre Dimensionamiento de Fuente\"],[\"h-profundiza-en-css\",\"Profundiza en CSS\"],[\"h-el-diseno-responsivo-importa\",\"El Dise\u00f1o Responsivo Importa\"]]","hide_toc":false,"footnotes":""},"categories":[12896],"tags":[],"class_list":["post-48882","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"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: C\u00f3mo Elegir la Unidad CSS Correcta - DreamHost<\/title>\n<meta name=\"description\" content=\"\u00bfTienes dudas sobre REM y EM? Conoce la diferencia entre estas unidades CSS en nuestra gu\u00eda s\u00faper 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\/es\/rem-vs-em-unidad-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"REM vs. EM: Te Lo Explicamos en Detalle\" \/>\n<meta property=\"og:description\" content=\"Descubre las diferencias entre REM y EM en CSS en esta gu\u00eda. Aprende cu\u00e1ndo y por qu\u00e9 utilizar cada unidad para mejorar tus proyectos de dise\u00f1o web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/\" \/>\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-01-16T23:28:12+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_.jpg\" \/>\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\/jpeg\" \/>\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: Te Lo Explicamos en Detalle\" \/>\n<meta name=\"twitter:description\" content=\"Descubre las diferencias entre REM y EM en CSS en esta gu\u00eda. Aprende cu\u00e1ndo y por qu\u00e9 utilizar cada unidad para mejorar tus proyectos de dise\u00f1o web.\" \/>\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: C\u00f3mo Elegir la Unidad CSS Correcta - DreamHost","description":"\u00bfTienes dudas sobre REM y EM? Conoce la diferencia entre estas unidades CSS en nuestra gu\u00eda s\u00faper 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\/es\/rem-vs-em-unidad-css\/","og_locale":"en_US","og_type":"article","og_title":"REM vs. EM: Te Lo Explicamos en Detalle","og_description":"Descubre las diferencias entre REM y EM en CSS en esta gu\u00eda. Aprende cu\u00e1ndo y por qu\u00e9 utilizar cada unidad para mejorar tus proyectos de dise\u00f1o web.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/","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-01-16T23:28:12+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_.jpg","type":"image\/jpeg"}],"author":"Jennifer Le","twitter_card":"summary_large_image","twitter_title":"REM vs. EM: Te Lo Explicamos en Detalle","twitter_description":"Descubre las diferencias entre REM y EM en CSS en esta gu\u00eda. Aprende cu\u00e1ndo y por qu\u00e9 utilizar cada unidad para mejorar tus proyectos de dise\u00f1o web.","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\/es\/rem-vs-em-unidad-css\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"REM vs. EM: C\u00f3mo Elegir la Unidad CSS Correcta","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-01-16T23:28:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/"},"wordCount":2449,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/#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_.jpg","articleSection":["Dise\u00f1o Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/","name":"REM vs. EM: C\u00f3mo Elegir la Unidad CSS Correcta - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/#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_.jpg","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-01-16T23:28:12+00:00","description":"\u00bfTienes dudas sobre REM y EM? Conoce la diferencia entre estas unidades CSS en nuestra gu\u00eda s\u00faper concisa.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/#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_.jpg","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_.jpg","width":1460,"height":1095},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/rem-vs-em-unidad-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"REM vs. EM: C\u00f3mo Elegir la Unidad CSS Correcta"}]},{"@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":"es","translations":{"es":48882,"en":48900,"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\/48882","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=48882"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/48882\/revisions"}],"predecessor-version":[{"id":63559,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/48882\/revisions\/63559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/48893"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=48882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=48882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=48882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}