PX vs REM vs EM | ¿Qué unidad CSS deberías usar?
Seamos realistas por un momento: descubrir cómo dar tamaño a las cosas en CSS puede parecer como aprender un idioma completamente diferente. Te sientas a diseñar una página web sencilla y, de repente, te encuentras frente a una sopa de letras de unidades.
«¿Debería este párrafo tener 16px? ¿O 1rem? Espera, ¿qué es exactamente un em?»
Si alguna vez te has encontrado adivinando unidades al azar hasta que tu diseño finalmente se ve bien, definitivamente no estás solo. Es básicamente un rito de iniciación para todo desarrollador frontend. Pero una vez que entiendes cómo funcionan realmente estas tres unidades entre bastidores, el CSS deja de parecer magia negra y comienza a sentirse como un conjunto de herramientas predecible.
Vamos a desglosar px, em y rem sin tecnicismos pesados, usando algunas analogías del mundo real para que todo encaje.
Píxeles (px): La regla terca
Piensa en un píxel como un traje a medida hecho de una tela que nunca se estira. Si le dices a un botón que tenga un ancho de 200px y un tamaño de texto de 16px, eso es exactamente lo que obtendrás. Fin de la historia. Es una unidad absoluta.
A los píxeles, sinceramente, no les importa si estás viendo el sitio en un monitor 4K masivo, en un pequeño smartphone de hace cinco años o si el usuario ha aumentado el tamaño de fuente predeterminado de su navegador porque olvidó sus gafas de lectura. Un píxel es un píxel.
Lo bueno: Son predecibles. Sabes exactamente lo que vas a obtener, lo que los hace increíblemente fáciles de manejar cuando estás construyendo diseños exactos. Lo malo: Son terribles para la accesibilidad. Si defines tus tamaños de fuente en píxeles y un usuario con problemas de visión intenta aumentar el tamaño de fuente predeterminado de su navegador, tu texto de 16px se negará tercamente a crecer.
Ems (em): El juego del teléfono descompuesto
Si los píxeles son rígidos, las unidades em son exactamente lo contrario. (Dato curioso: ¡el nombre proviene de una medida tipográfica tradicional basada originalmente en el ancho de la letra «M» mayúscula!). Un em es una unidad relativa, lo que significa que basa su tamaño en su entorno, específicamente en su elemento padre directo.
Piensa en las unidades em como si estuvieras jugando al teléfono descompuesto, o tal vez como en las muñecas rusas. Si un contenedor padre tiene un tamaño de fuente de 16px y le das a un elemento hijo un tamaño de fuente de 2em, el hijo tendrá el doble del tamaño del padre (es decir, 32px).
Suena genial, ¿verdad? Hasta que empiezas a anidarlos.
Digamos que tienes una lista dentro de una lista, dentro de otra lista. Si configuras todas las etiquetas li en 1.5em, la primera lista tiene 1.5 veces el tamaño normal. La lista anidada tiene 1.5 veces ese tamaño. La tercera lista tiene 1.5 veces ese otro tamaño. De repente, tu texto le está gritando al usuario en letras masivas que llenan la pantalla. Esto se conoce como el «problema de composición» (compounding problem), y es la razón por la que muchos desarrolladores huyen de las unidades em gritando.
Debido a que las matemáticas pueden volverse extrañamente complicadas cuando anidas elementos, realmente no querrás calcular esto de cabeza. Hazte un gran favor y guarda en tus marcadores un conversor de píxeles a em para salvar tu cordura cuando las cosas se pongan difíciles.
Rems (rem): Sincronizar tu reloj con la Hora del Meridiano de Greenwich
La unidad rem fue inventada específicamente para solucionar la pesadilla de composición de los em.
«Rem» significa Root Em (Em de la raíz). En lugar de mirar a su padre inmediato para calcular su tamaño, un rem mira hacia lo más alto de la página web: la «raíz» (el elemento <html>).
Piensa en las unidades rem como si ajustaras tu reloj a un estándar global como la Hora del Meridiano de Greenwich. No importa en qué parte del mundo estés (o qué tan profundo esté anidado tu elemento en el árbol HTML); todos hacen referencia al mismo reloj exacto.
Por defecto, la mayoría de los navegadores establecen el tamaño de fuente raíz en 16px. Por lo tanto, 1rem equivale a 16px. 2rem equivale a 32px. 0.5rem equivale a 8px. Si no tienes ganas de hacer cálculos mentales cada vez que necesites traducir un archivo de diseño a código, simplemente usa un práctico conversor de píxeles a rem para acelerar tu flujo de trabajo.
La magia absoluta de rem: Si un usuario entra en la configuración de su navegador y cambia su tamaño de texto predeterminado a 24px porque necesita un texto más grande, todo tu sitio escala automática y proporcionalmente de forma hermosa. ¿Por qué? ¡Porque todo lo construido con rem se basa en ese número raíz!
Entonces, ¿cuál deberías usar realmente?
Aquí está el secreto: no tienes que elegir solo una y abandonar las demás. Los mejores desarrolladores usan las tres, pero las emplean para trabajos muy específicos.
Así es exactamente como deberías abordarlo:
1. Usa rem por defecto para casi todo.
Tamaños de fuente, márgenes, rellenos (padding), anchos máximos… usa rem. Esto hace que tu sitio sea increíblemente accesible y garantiza que todo escale proporcionalmente si el usuario ajusta la configuración de su navegador. Es el estándar de oro indiscutible para el diseño web moderno.
2. Usa px para cosas que nunca deberían escalar.
Si vas a poner un borde delgado de 1px alrededor de una tarjeta, probablemente no quieras que ese borde se convierta en un bloque grueso y feo de 3px solo porque el usuario aumentó su tamaño de fuente. Usa px para bordes, sombras de caja (box shadows) y, ocasionalmente, para posicionamiento preciso en diseños complejos.
3. Usa em para componentes modulares.
Usa em cuando quieras que el espaciado escale específicamente con el tamaño de fuente de ese elemento exacto. Por ejemplo, imagina un botón. Quieres que el relleno alrededor del texto siempre se vea proporcional, ya sea un botón gigante de «Comprar ahora» o un botón diminuto de «Enviar». Si estableces el relleno del botón en em, puedes simplemente cambiar el tamaño de fuente del botón y el relleno crecerá o se encogerá automáticamente para coincidir perfectamente.