Dominar las unidades de medida en CSS marca la diferencia entre un desarrollo predecible y uno lleno de sorpresas. La unidad rem es una de las herramientas más poderosas para controlar tamaños de fuente y contenedores de forma consistente, y con un sencillo ajuste puedes utilizarla tan fácilmente como los píxeles.
¿Qué es rem y en qué se diferencia de em?
Rem significa root em, y su valor siempre se calcula en relación con el tamaño de fuente de la etiqueta html, que es el elemento raíz del documento [0:55]. Por defecto, los navegadores asignan un font-size de 16 píxeles a la etiqueta html, así que 1rem equivale a 16 píxeles.
La diferencia fundamental con em es que em toma como referencia el tamaño de fuente del padre directo del elemento. Si tienes contenedores anidados, cada uno con un font-size distinto, el valor real de 1em cambia en cada nivel. Esto provoca resultados impredecibles cuando los elementos están profundamente anidados [1:12].
Con rem ese problema desaparece. No importa cuántos niveles de anidación existan: rem siempre apunta a la etiqueta html, por lo que el valor es constante en todo el proyecto.
¿Cómo usar rem igual que píxeles con el truco del 62.5 %?
Hacer cálculos mentales de "16 por 1.5" cada vez que necesitas un tamaño no es práctico. Existe un truco muy popular que simplifica todo [2:15]:
css
html {
font-size: 62.5%;
}
Al establecer el font-size de html en 62.5 %, reduces la base de cálculo de 16 píxeles a 10 píxeles. A partir de ahí la conversión es directa:
1.6rem = 16 píxeles.2rem = 20 píxeles.3rem = 30 píxeles.
De esta forma puedes trabajar con rem como si fueran píxeles, simplemente moviendo el punto decimal [2:45]. Ya no necesitas multiplicaciones complicadas para saber cuánto mide cada elemento.
¿Qué pasa con elementos anidados al usar rem?
En el ejemplo práctico se crea un div con párrafos anidados y se les asigna font-size: 1.6rem tanto al contenedor como al texto interior [3:30]. Al inspeccionar en el navegador, ambos textos miden exactamente 16 píxeles, sin importar la profundidad del anidamiento.
Esto confirma que rem mantiene su valor estable porque siempre referencia la etiqueta html, no el padre inmediato. Ese comportamiento predecible es lo que la convierte en la unidad preferida para proyectos profesionales.
¿Cuál es la estructura base recomendada en CSS?
Combinar el truco del 62.5 % con un reset básico forma la estructura inicial ideal para cualquier archivo CSS [4:32]:
css
- {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
¿Por qué incluir el selector universal y el box-sizing?
- Selector universal (
*): aplica reglas a todos los elementos del documento.
box-sizing: border-box: garantiza que el padding y el border se incluyan dentro del ancho total del contenedor, evitando desbordamientos inesperados.margin: 0 y padding: 0: eliminan los espacios predeterminados que cada navegador agrega de forma distinta.
Con esta base puedes usar rem en fuentes y dimensiones de contenedores sabiendo exactamente cuántos píxeles representan.
¿Cuándo conviene dejar de usar píxeles y em?
La recomendación es clara: una vez configurado el truco del 62.5 %, todas las medidas de fuentes y tamaños de contenedores deberían expresarse en rem [5:20]. Evitar em elimina los conflictos de herencia entre elementos anidados, y dejar de usar píxeles directamente permite que el diseño respete las preferencias de accesibilidad del usuario.
- Usa rem para tamaños de fuente.
- Usa rem para anchos y altos de contenedores.
- Evita em para no depender del contexto del padre.
Con este enfoque tienes control total sobre las dimensiones de tu proyecto y una base sólida para escalar cualquier diseño. ¿Ya probaste este truco en tu código? Comparte cómo te fue aplicándolo.
