rem CSS es mucho más que una unidad de medida, es una herramienta clave para mejorar la accesibilidad, la experiencia de usuario y el diseño web moderno.
Durante años, el uso de px o vw como unidades de medida para fuentes fue una práctica común en el desarrollo front-end. Sin embargo, a medida que la accesibilidad y la personalización ganan protagonismo, usar rem en CSS se convierte en una necesidad, no una opción.
Índice
- ¿Qué es rem en CSS?
- Rem vs px: ¿por qué no usar píxeles?
- Rem vs vw: limitaciones en tipografía
- Ventajas de usar rem
- Caso práctico: cómo se adapta el texto
- Accesibilidad y diseño inclusivo
- Buenas prácticas con rem
- Comparativa visual rem vs px vs vw
- Conclusión
¿Qué es rem en CSS?
Rem (Root em) es una unidad relativa que se basa en el tamaño de fuente definido en el <html> o raíz del documento. Por defecto, la mayoría de navegadores lo configuran como 16px, lo que significa que:
1rem = 16px (por defecto)
2rem = 32px
0.875rem = 14pxEl uso de rem permite que el tamaño de fuente escale en función de la configuración del navegador o del sistema operativo del usuario.
Rem vs px: ¿por qué no usar píxeles?
El uso de px (píxeles) en tipografía no tiene en cuenta las preferencias del usuario. Si alguien con baja visión aumenta el tamaño de letra del navegador, los textos definidos en px no cambian. Esto bloquea una experiencia accesible y personalizada.
- Con px: La fuente es estática.
- Con rem: La fuente se adapta.
Rem vs vw: limitaciones en tipografía
El uso de vw (viewport width) puede parecer útil para diseños fluidos, pero presenta problemas en tipografía:
- El texto varía según el ancho de pantalla, no según la configuración del usuario.
- En pantallas pequeñas puede hacerse ilegible.
- También rompe escalas tipográficas predecibles.
Ventajas de usar rem
Implementar rem tiene beneficios concretos:
- Accesibilidad: Respeta configuraciones personalizadas.
- Escalabilidad: Facilita diseños responsivos.
- Mantenibilidad: Usa proporciones claras (ej.
1rem = 16px). - Compatibilidad: Soportado por todos los navegadores modernos.
Caso práctico: cómo se adapta el texto
Un usuario cambia el tamaño de fuente del navegador a “grande”. El resultado:
- Con
px: el texto no cambia. - Con
vw: el texto cambia con el ancho, no con la preferencia. - Con
rem: el texto crece según la configuración del usuario.
Esto hace que rem sea la única opción viable si se quiere una web verdaderamente accesible.
Accesibilidad y diseño inclusivo
El uso de rem se alinea con las recomendaciones de accesibilidad web (WCAG). Permite que los lectores de pantalla y los sistemas operativos respeten las preferencias del usuario, facilitando la navegación a personas con discapacidad visual o necesidades específicas.
Buenas prácticas con rem
- Define
font-sizeen el<html>como base (ej.font-size: 100%;o16px). - Aplica rem para todos los tamaños de fuente, márgenes y paddings.
- Utiliza escalas proporcionales (ej.
1rem,1.25rem,2rem). - Evita combinar
remconvwen fuentes.
Comparativa visual rem vs px vs vw
| Unidad | Escalable | Respeta configuración usuario | Uso recomendado |
|---|---|---|---|
px |
No | No | Diseño fijo |
vw |
Sí (con viewport) | No | Títulos grandes, no textos largos |
rem |
Sí | Sí | Textos, botones, márgenes, paddings |
Conclusión
Usar rem en CSS es una decisión técnica que impacta directamente en la accesibilidad, el rendimiento y la experiencia de usuario. A diferencia de px o vw, rem permite que cada usuario experimente la web según sus preferencias visuales.
Aplicarlo correctamente no solo es una buena práctica, es una muestra de respeto hacia quienes visitan nuestros sitios.
¿Tu web aún usa px?
Quizás es momento de replantearlo.
Consejo final: si el objetivo es construir experiencias web duraderas, empezar por algo tan esencial como la tipografía es una gran decisión.
- Todas
- Funnel De Ventas
- Diseño Web
- SEO
- Analítica Web
- Internet
- CSS
- Marketing
- Marketing Digital
- UX/UI
- Inteligencia Artificial
- Tiendas Online
