Bueno, son bastante parecidas estas dos unidades de CSS, pero tienen una diferencia fundamental.
- La unidad em tiene como referencia de medida el font-size del elemento actual.
- La unidad rem tiene como referencia de medida el font-size del elemento root, la etiqueta <html> (en inglés sería como "root em").
Ahora en detalle: Ya sabes que em y rem son dos unidades de CSS relativas. En concreto son relativas al font-size existente. Sin embargo, mientras que em tiene referencia el tamaño de la fuente del elemento donde se usa esa unidad, rem tiene referencia al tamaño de la fuente definido en el elemento root.
Se ve mucho mejor con un ejemplo. Partimos de este marcado:
<div class="heading">
Esto es un elemento de la página con class CSS "heading"
</div>
Ahora vamos a tener en cuenta el siguiente CSS:
html {
font-size: 16px;
}
.heading {
font-size: 24px;
background-color: #ddd;
padding: 2em;
}
A nuestra división con class="heading" le hemos asignado un font-size de 24 píxeles. Por otra parte hemos definido un padding de 2em. ¿Qué piensas que te dará el padding computado en píxeles de ese elemento?
2em en este caso equivale a 24px * 2 = 48px (es decir, el doble del tamaño de font-size configurado para este elemento)
Ahora veamos este CSS que es prácticamente igual. Solo hemos colocado un padding de 2rem en vez de 2em como teníamos antes:
html {
font-size: 16px;
}
.heading {
font-size: 24px;
background-color: #ddd;
padding: 2rem;
}
En este caso estamos usando la unidad rem y por tanto, el padding será relativo al font-size del elemento root de la página web, la etiqueta <html>. Vemos que para tal etiqueta hemos configurado un valor de font-size de 16px. ¿Cuánto valdrá en píxeles entonces el padding computado para la etiqueta headding?
En este segundo caso 2rem equivale a 16px * 2 = 32px (es decir, el doble del tamaño de font-size configurado para el elemento <html>)
Creo que ahora debe de haber quedado suficientemente claro. Como puedes comprobar, es verdad que las dos unidades de CSS sirven para más o menos lo mismo y son parecidas. Pero usar una u otra depende de qué referencia quieres tener al calcular los tamaños finales.
Ahora en tu segunda pregunta ¿cuál sería la recomendación de uso entre em y rem?
Bien pues depende un poco de cómo te guste trabajar y qué necesidad tienes.
Las unidades rem suelen ser mucho más fáciles de usar, en el sentido que siempre el cálculo de las unidades depende de un único elemento. Por decirlo de alguna manera, con rem estás expuesto a menos sorpresas.
Por tanto, cuando quieres calcular de manera precisa el tamaño en píxeles que debe tener un elemento, es mucho más fácil fiarse de rem, porque tenemos que mirar en un único lugar. Sin embargo cuando usas em tienes que observar cuál es el tamaño de la fuente en el elemento, que puede ser variable, atendiendo a muchos factores como la jerarquía de etiquetas.
Como regla general ten en cuenta:
- Si estás haciendo un estilo que pretendes utilizar en muchos elementos distintos, por ejemplo una class de CSS que pretendes usar en varias partes, es mejor usar rem.
- Si lo que quieres es que el tamaño sea variable en función de dónde estés usando el estilo, usa em. Aunque este segundo caso lo veo menos habitual.
Otro detalle relevante es que los usuarios pueden tener configurados distintos tamaños de fuentes predeterminadas en el navegador (hay gente que quiere navegar con tamaños de texto mayores para facilitar la lectura). Este tamaño configurado en el navegador se aplica sobre el elemento <html>, por lo que se tendría en cuenta al usar unidades rem. En la mayoría de los casos también se tendría en cuenta esa configuración del usuario cuando usamos em, pero, si estás mezclando unidades absolutas para el tamaño de las fuentes por algún lugar y luego usas unidades relativas en em, no se tendría en cuenta el tamaño de fuente configurado por el usuario en su navegador.
Para decidirte a usar rem o em, en mi opinión, lo más importante es que sepas bien qué significan estas dos unidades de CSS y qué matices pueden aplicarse a la hora de calcular las medidas.
Como conclusión decir que generalmente los diseñadores aconsejan el uso de rem, por estos motivos:
- Por lo sencillo que es realizar los cálculos, ya que con rem sólo nos tenemos que fijar únicamente en el elemento <html>
- Porque rem es capaz de respetar las configuraciones de los usuarios de una manera más fiel, ya que siempre se tendrá en cuenta las preferencias del usuario en el navegador.
- Por último, aunque en algunos puntos de la aplicación se usen tamaños de fuente absolutos, si las medidas están especificadas con rem, nos aseguramos que al aumentar o disminuir el tamaño del texto en el navegador, agrandando o reduciendo la fuente, esto repercuta de manera más fiel en las medidas de todos los elementos de la página.
Pero claro, todo esto hay que entenderlo. Puesto que igual lo que nos interesa es justamente lo que se consigue gracias a em.