Por qué realmente necesitas dejar de usar píxeles para el diseño web (y cambiar a Rem)
Seamos realistas por un segundo: el diseño web solía ser ridículamente fácil. Antiguamente, todo el mundo miraba exactamente los mismos monitores de escritorio voluminosos. Bastaba con aplicar un tamaño de fuente de 16px a un párrafo, establecer un ancho fijo en el contenedor principal y dar por terminado el trabajo.
Pero las cosas han cambiado. Mucho. Ahora intentamos que los sitios se vean bien en teléfonos de bolsillo, monitores ultraanchos gigantes, tabletas e incluso neveras inteligentes. La web ya no es un póster estático; es algo fluido y vivo. Y si todavía confías puramente en los píxeles (px) para construirla, básicamente estás intentando ponerle una camisa de fuerza al agua.
Es hora de hablar de las unidades relativas. Sinceramente, abandonar el px en favor del rem es uno de los mejores hábitos que puedes adoptar. Salva tu cordura, hace que tu código sea más limpio y, lo más importante, es mucho mejor para tus usuarios.
El problema de los píxeles (también conocido como el enfoque del hormigón)
Para ver por qué rem es tan genial, primero debemos analizar por qué los píxeles son un poco deficientes para el diseño web moderno.
Piensa en los píxeles como si vertieras hormigón. Una vez que fragua, te quedas con él. Si le dices a un navegador que un encabezado mide 24px, se quedará en 24px, pase lo que pase. Los píxeles son básicamente los obsesos del control en el mundo de CSS. No les importa si el usuario está entrecerrando los ojos frente a su pantalla, y ciertamente no les importa si alguien entró específicamente en la configuración de su navegador para aumentar el tamaño de fuente predeterminado porque tiene mala visión.
El píxel se mantiene firme. Dice: «No, el diseñador dijo 24 píxeles, así que tendrás exactamente 24 píxeles».
Esta rigidez es una pesadilla para la accesibilidad. Cuando forzamos tamaños absolutos en las personas, les quitamos la capacidad de controlar cómo consumen nuestro contenido.
Entra el REM: Tu termostato inteligente de CSS
Si los píxeles son hormigón vertido, rem es como un termostato inteligente para toda tu casa.
Rem significa «Root Em». No te aburriré con la historia técnica, pero lo único que realmente necesitas saber es que una unidad rem basa su tamaño enteramente en la raíz de tu documento (la etiqueta <html>). Por defecto, casi todos los navegadores web establecen su tamaño de fuente raíz en 16px.
Entonces, si estableces el texto de tu párrafo en 1rem, el navegador lo traduce a 16px. Si estableces tu encabezado en 2rem, el navegador simplemente hace el cálculo: 2 x 16 = 32px.
La magia del escalado en el mundo real
Aquí es donde la analogía del termostato inteligente realmente tiene sentido.
Supongamos que un usuario visita tu sitio, pero tiene problemas de visión. Ha ido a la configuración de su navegador y ha cambiado su tamaño de fuente predeterminado de los 16px estándar a algo más grande, como 24px.
- Si construiste tu sitio con píxeles: Tu código los ignora por completo. Tu texto de 16px se mantiene exactamente en 16px. El usuario tiene que hacer zoom de forma incómoda, lo que rompe tu diseño cuidadosamente elaborado y lo obliga a desplazarse horizontalmente solo para leer una oración. Es increíblemente frustrante.
- Si construiste tu sitio con Rems: Tu sitio realmente respeta al usuario. Debido a que tu texto está configurado en
1rem, el navegador mira su nuevo valor predeterminado (24px) y dice: «Genial, 1rem ahora equivale a 24px». Todo en tu sitio (fuentes, rellenos, márgenes) se escala de forma perfecta y proporcional.
No tuviste que escribir ni una sola línea extra de CSS. El diseño simplemente se adaptó a lo que el usuario necesitaba.
Por qué necesitas hacer el cambio cuanto antes
Pasar de px a rem no es solo una moda pasajera de desarrolladores. Es un cambio fundamental en cómo manejamos la experiencia del usuario.
- Es una gran victoria para la accesibilidad (A11y): La web debería funcionar para todos. Al usar rems, te aseguras de que los usuarios con discapacidad visual que dependen de configuraciones personalizadas del navegador puedan leer realmente tu contenido sin luchar contra tu CSS.
- El diseño responsivo se vuelve mucho más fácil: ¿Quieres reducir la escala de toda la tipografía de tu sitio para móviles? Si usaras píxeles, estarías atrapado escribiendo docenas de consultas de medios para cambiar cada tamaño de fuente. Con rems, simplemente cambias el tamaño de fuente raíz una vez y todo lo demás se escala automáticamente. Sinceramente, se siente como hacer trampa.
- Preparación para el futuro: Constantemente se lanzan nuevos dispositivos con tamaños de pantalla extraños. Las unidades relativas aseguran que tu diseño sea flexible y respire en lugar de romperse bajo presión.
La guía rápida de «qué usar y cuándo»
Mira, no tienes que tirar los píxeles a la basura por completo. Todavía tienen un pequeño lugar en el diseño moderno. Aquí tienes una guía rápida y sensata para hacer la transición:
Usa rem para:
- Tamaños de fuente (encabezados, párrafos, botones)
- Espaciado (márgenes y rellenos)
- Anchos y alturas de los contenedores de diseño principales
Usa px para:
- Detalles pequeños y exactos que nunca deberían escalarse. Piensa en bordes de 1px alrededor de una tarjeta o una sombra de caja sutil.
La matemática de oro:
- 1rem = 16px (valor predeterminado del navegador)
- 1.5rem = 24px
- 2rem = 32px
(Consejo profesional: Si odias hacer cálculos mentales, simplemente guarda en favoritos una herramienta de conversión de Px a Rem y deja que haga el trabajo pesado por ti).
Adoptar rem significa renunciar a un poco de control absoluto para poder construir una experiencia infinitamente superior, flexible y accesible para las personas que realmente usan tu sitio. El hormigón se está agrietando de todos modos; es hora de empezar a construir cosas que fluyan.