Seamos sinceros por un momento: definir los tamaños en CSS solía ser un dolor de cabeza enorme. Diseñabas un sitio web precioso en tu portátil, pero en cuanto alguien lo miraba en un móvil o hacía zoom, todo el diseño se rompía.
Y aquí entra la unidad rem. Si has estado haciendo tus pinitos en el diseño web, probablemente la habrás visto por todas partes. Pero, ¿qué es exactamente un rem y, lo que es más importante, ¿cómo demonios calcula tu navegador qué tamaño representa realmente en la pantalla?
No te preocupes, aquí no hay matemáticas avanzadas. Coge tu café y analicemos cómo calculan los navegadores las unidades rem con algunos ejemplos sencillos y reales.
¿Qué significa realmente REM?
rem significa «root em» (em raíz).
Si quieres profundizar en la historia de las medidas tipográficas, Wikipedia ofrece un análisis fascinante de la unidad em y sus orígenes físicos en las imprentas tradicionales.
Pero para el diseño web moderno, lo único que necesitas entender es la parte de «raíz» (root).
Imagina un árbol. La raíz es la base que alimenta al resto del árbol. En un documento HTML, la raíz es la etiqueta <html>. Por lo tanto, una unidad rem simplemente toma como referencia el tamaño de fuente de la etiqueta <html> (la raíz) y lo utiliza como base.
La analogía de la «receta maestra»
Piensa en el rem como si estuvieras adaptando una receta maestra en la cocina.
Digamos que la receta maestra de tu abuela rinde exactamente para 16 galletas con chispas de chocolate.
-
Si quieres duplicar la cantidad, multiplicas la receta por 2. Obtienes 32 galletas.
-
Si solo quieres media tanda, la multiplicas por 0,5. Obtienes 8 galletas.
rem las unidades funcionan exactamente de la misma manera. El tamaño de fuente de la raíz predeterminado del navegador suele ser de 16px (nuestra receta maestra).
Así que, cuando escribes 2rem en tu CSS, el navegador hace una cuenta rápida:
16px (base) × 2 (valor rem) = 32px.
¡Así de sencillo!
Veamos algunos ejemplos sencillos
Supongamos que tu sitio web utiliza el tamaño de fuente predeterminado del navegador de 16px para la raíz. Así es como el navegador traduce tu CSS en rem a píxeles:
-
Texto de párrafo (
1rem): 16px × 1 = 16px -
Un encabezado grande (
2.5rem): 16px × 2,5 = 40px -
Texto pequeño de pie de página (
0.875rem): 16px × 0,875 = 14px
Pero, ¿qué pasa si cambias el tamaño de la raíz?
Digamos que decides que 16px es demasiado pequeño, así que escribes esto en tu CSS:
html {
font-size: 20px;
}Al instante, el navegador actualiza sus cálculos para todo el sitio web. Ha cambiado la receta maestra. Ahora, esos mismos valores rem equivalen a algo completamente diferente:
-
1remahora es 20px (20 × 1) -
2.5remahora es 50px (20 × 2,5) -
0.875remahora es 17,5px (20 × 0,875)
Con cambiar solo una línea de código, todo tu sitio web se escala a la perfección. Magia, ¿verdad?
REM vs. EM: El problema de las muñecas rusas
Quizás te preguntes: «¿Por qué no usar simplemente em?»
Mientras que rem hace referencia al elemento raíz, las unidades em comunes hacen referencia al tamaño de fuente de su elemento padre. Esto parece estar bien hasta que empiezas a anidar elementos unos dentro de otros, como una lista dentro de un <div> que a su vez está dentro de otro <div>.
Usar unidades em es como jugar con muñecas rusas. Si un padre tiene 1.2em, el hijo tiene 1.2em y el nieto tiene 1.2em, el navegador los multiplica todos entre sí (1,2 × 1,2 × 1,2). De repente, tu texto se vuelve gigante ¡y no tienes idea de por qué!
Como rem siempre toma como referencia el único elemento raíz, nunca sufrirás este efecto de bola de nieve acumulativo. Es predecible, seguro y te evitará tirarte de los pelos.
Por qué a los navegadores (y a los usuarios) les encanta el REM
Estarás pensando: «Si 1rem equivale a 16px, ¿por qué no escribo simplemente 16px y me ahorro los cálculos?»
La respuesta es la accesibilidad.
No todo el mundo tiene una visión perfecta. Muchas personas van a la configuración de su navegador y cambian el tamaño de fuente predeterminado de 16px a 20px o incluso 24px para poder leer cómodamente.
-
Si diseñaste tu sitio utilizando estrictamente
px, tu texto se quedará bloqueado en su lugar sin remedio. La configuración del usuario se ignorará y este no podrá leer tu contenido. -
Si diseñaste tu sitio utilizando
rem, el navegador dirá: «¡Ah! El usuario ha cambiado el tamaño de la raíz a 24px». Recalculará tus valoresrembasándose en esa nueva base de 24px, y todo tu sitio se adaptará de forma fantástica para amoldarse a ellos.
Tu tabla de equivalencias rápida para REM
Para evitar que tengas que hacer cálculos cada vez que escribas CSS, aquí tienes una práctica tabla de equivalencias basada en el estándar predeterminado de 16px. ¡No dudes en guardarla en tus marcadores!
| El cálculo del navegador | Lo que escribes (en rem) | Lo que quieres (en píxeles) |
16 × 0,75 | 0,75rem | 12px |
| 16 × 0,875 | 0,875rem | 14px |
| 16 × 1 | 1rem (Base) | 16px |
| 16 × 1,125 | 1,125rem | 18px |
| 16 × 1,25 | 1,25rem | 20px |
| 16 × 1,5 | 1,5rem | 24px |
| 16 × 2 | 2rem | 32px |
| 16 × 3 | 3rem | 48px |
| 16 × 4 | 4rem | 64px |
(Consejo profesional: si estás calculando esto tú mismo, simplemente toma el tamaño en píxeles que deseas y divídelo por 16. Por ejemplo: 24px ÷ 16 = 1,5rem).
Si prefieres saltarte las matemáticas por completo y ahorrar algo de tiempo, siempre puedes utilizar nuestro conversor gratuito de rem a píxeles para calcular los tamaños exactos al instante.
Conclusión
¡Y ahí lo tienes! Los navegadores calculan las unidades rem simplemente multiplicando tu valor en rem por el tamaño de fuente de la raíz. No es más que una receta escalable que mantiene tu código limpio, evita pesadillas con las dimensiones y hace que la web sea un lugar mucho más accesible y amigable para cualquiera que intente leer tu contenido.
¿Tienes algún elemento específico en tu sitio en el que te esté costando pasar de px a rem? ¡Dímelo y resolveremos las cuentas juntos!