Las unidades em y rem, juntas son de las más importantes y que más te conviene usar en tu CSS.
La razón es simple: ambas son unidades relativas y por lo tanto ayudan muchísimo en temas de accesibilidad, proporcionando responsividad en tus diseños.
—¿Accesibilidad y responsividad?…mmm…no me convence…— pensarás —¿Me puedes dar algún ejemplo específico?—
Claro.
Estoy seguro que en algun momento te habrás encontrado páginas web con la letra muy chiquita, letra que es incómoda de leer. Así que, ¿qué haces? Tenemos 1 de 2 opciones:
- Hacer zoom
- Cambiar el tamaño de fuente del navegador
Si eres como yo tu comportamiento estándar será solo hacer zoom. Pero lo creas o no hay muchas personas que cambian la configuración de su navegador o incluso que lo necesitan (personas de mayor edad y por ende con mala visión o personas con alguna discapacidad visual).
Cuando se cambia el tamaño del texto en una página se cambia efectivamente la propiedad font-size que el navegador pasa al elemento html. Si tu documento HTML tiene algún elemento con una unidad px, ese valor se tomará como un valor NO editable y por lo tanto los usuarios no podrán modificar el tamaño de la fuente de tu sitio para su comodidad.
¿Entonces cómo le hacemos? Pues usamos unidades relativas, em y rem como ya mencioné, ayudan a hacer tu sitio mucho más accesible para los usuarios y ayuda a que todo se mantenga responsivo.
¿Suena bien, no?
Sin embargo aunque em y rem pueden ser una gran solución, también pueden causar grandes confusiones si no se saben utilizar. Ambos tienen la misma filosofía pero se comportan de manera diferente.
Para empezar pongamos de ejemplo este HTML:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>CSS Units</title>
</head>
<body>
<section>
Section
<h4>Header</h4>
<article>
Article
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</article>
<span>Copyright 2025</span>
</section>
</body>
</html>
Como ves no tiene nada de especial. Simplemente contiene algunos textos:
Pero el punto real es comprobar como cambian los mismos utilizando rem y em.
em
Es una unidad relativa que viene de la unidad tipográfica “em”.
En términos tipográficos, “em” equivale al ancho de la letra mayúscula M. Este término se asocia a la pronunciación en inglés de “em”, que corresponde al sonido de la letra M.
Sin embargo en la web esto es diferente. Cuando hablamos de em en la web, hablamos de una unidad que es relativa al tamaño de la fuente del elemento ancestro más cercano que tenga un font-size definido.
styles.css
body {
font-size: 75%;
}
section {
font-size: 0.5em;
}
h4 {
font-size: 2em;
}
article {
font-size: 1.5em;
}
span {
font-size: 1em;
}
La magia esta en los cálculos de los tamaños que se realizan en el navegador. Estos se hacen durante el proceso de renderizado y se conocen como valores computados o Computed Values.
Para comprobarlo podemos ir a ver los estilos computados en la ventana de herramientas de desarrollador (Ctrl+Shift+I) e ir a la sección correspondiente a los mismos: Elements y Computed.
*En la imágen de arriba se muestran los valores asignados a span.
En el recuadro de estilos del lado derecho puedes ver el valor que se le asignó a font-size, así como a las demás propiedades del elemento.
Al examinar cada elemento verás lo siguiente:
html
html no tiene estilos definidos. Por lo tanto hereda sus estilos de lo que se define en el navegador.
Al seleccionarlo podemos ver los elementos definidos. Si das click en Show all, verás la lista completa con el font-size con el valor estándar de 16px.
body
Para body definimos un estilo de font-size de 200%.
Como te podrás imaginar eso quiere decir que se le asignará el doble. ¿El doblede qué? Pues del valor que se le heredó. En este caso el valor heredado es de 16px y por lo tanto el valor del font-size para body es de 32px.
section
em se puede definir con enteros o decimales.
En este caso el font-size es de 0.5em. Al procesar este valor, se busca a su ancestro más cercano que tenga una definición explícita. En este caso ese ancestro es body, el cual tiene un font-size de 32px.
Se hace la operación 0.5×32 y por lo tanto se define 16px para el tamaño final.
h4
Se definió con font-size de 2em. Al procesar este valor, se busca a su ancestro más cercano, que tenga una definición de font-size explícita. Ese elemento es section que al ser definido con 0.5em, nos regresó el valor calculado de 16px.
Por lo tanto se hace la operación 2×16 y se define 32px para el tamaño final.
article
article es hermano de h4 y por lo tanto tiene un comportamiento similar. Su valor de referencia de 16px viene de su padre section. Y su valor definido es de 1.5em.
Se hace la operación 16×1.5 y por lo tanto se define 24px para el tamaño final.
p
Para el elemento p no definimos ningun estilo. Esto lo único que quiere decir es que su valor lo obtiene por herencia. Su elemento padre es article. Por lo que obtiene su mismo valor: 24px.
span
Finalmente span se queda con un valor de 16px. Este es el mismo valor que tiene su padre section. Esto es debido a que 1em representa exactamente el mismo valor del ancestro.
em permite hacer que todos los elementos mantengan una proporción respecto a otros. Sin embargo como probablemente te puedas imaginar, esto puede llegar a ser difícil de manejar con exactitud,
Conforme se hace más complejo el árbol del DOM se hace más complejo para nostros predecir correctamente los cálculos.
Para evitar este problemas, puedes usar la alternativa rem.
rem
Es una unidad relativa, pero a diferencia de em, esta unidad no viene de una unidad tipográfica: rem viene del inglés “root em”, es decir, la raíz de em.
Por lo tanto 1 rem equivale a lo que sea el font-size del elemento raíz, el cual siempre es el elemento html.
Modifiquemos nuestro archivo de CSS para utilizar rem en lugar de em.
styles.css
body {
font-size: 200%;
}
section {
font-size: 0.5rem;
}
h4 {
font-size: 2rem;
}
article {
font-size: 1.5rem;
}
span {
font-size: 1rem;
}
¿Cómo crees que este cambio afectará a cada elemento de nuestro documento HTML?
Veamos uno por uno:
html y body
Ninguno de los 2 elementos presenta cambios:
htmlempieza con 16px.bodycon 200% computa a 32px.
section
En este caso el font-size es de 0.5rem.
Se usa 16px como referencia por que es el tamaño de la raíz.
Se hace la operación 0.5×16 y por lo tanto se define 8px para el tamaño final.
h4
Se definió con font-size de 2rem.
Por lo tanto se hace la operación 2×16 y se define 32px para el tamaño final.
article
article tiene 1.5rem.
Se hace la operación 16×1.5 y por lo tanto se define 24px para el tamaño final.
p
p se queda con 24px otra vez por heredar de article.
span
Finalmente span se queda con un valor de 16px, porque 1rem equivale al valor de la raíz html
En este caso quedaron bastante parecidos los valores. ¿Pero notaste la diferencia? Fue fácil fue entender como se calculó el valor ¿no?
Al final si queremos que nuestros sitios webs funcionen bien para todos los usuarios posibles tenemos que atender cosas más allá de las que nosotros usaríamos. Una de esas tantas cosas es la responsividad. Y una de las tantas formas de implementar responsividad es utilizar ems y rems.
Y con eso. Ahora todos somos un poco más sabios.
