Conversor de PX a REM (y REM a PX)
Convierte px a rem y rem a px al instante. Cambia el font-size raíz para adaptarlo a tu proyecto y ve el resultado en tiempo real. Gratis, sin registro.
Tabla de PX a REM (base 16px)
Valores de px habituales convertidos a rem, asumiendo el font-size raíz por defecto de 16px.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Consejos
- Por defecto 1rem equivale a 16px, pero los usuarios con baja visión suelen aumentar el tamaño de texto predeterminado del navegador: los valores en rem siguen ese ajuste automáticamente, mientras que los valores en px no.
- Los puntos de ruptura de las media queries suelen escribirse en px por tradición, pero font-size, padding y margin son buenos candidatos para usar rem, así el equilibrio general del diseño se mantiene cuando el usuario cambia su preferencia de tamaño de texto.
- Algunos equipos definen html { font-size: 62.5%; } para que 1rem equivalga a 10px y el cálculo mental sea más sencillo (1.6rem = 16px). Introduce 10 como valor base arriba para convertir con esa convención.
- Una convención habitual es usar rem para los valores de diseño a nivel de página y em para el espaciado interno de un componente reutilizable, de modo que el componente escale según su propio font-size donde sea que se use.
Preguntas frecuentes
A propósito — Cómo rem llegó a la especificación de CSS
La unidad rem se añadió al módulo CSS Values and Units alrededor de 2011. Antes de eso, casi todos los sitios web dimensionaban el texto y el espaciado con px o em, y em tenía un problema conocido: al basarse en el font-size del elemento padre, anidar elementos hacía que el tamaño efectivo se acumulara de formas difíciles de predecir en diseños complejos.
rem se diseñó precisamente para resolver ese problema, referenciando un único punto de anclaje siempre disponible: el elemento raíz, sin importar cuán anidado esté un elemento. Durante los años en que Internet Explorer 9 aún no soportaba rem, era habitual escribir primero un valor en px como alternativa y luego el valor en rem (font-size: 16px; font-size: 1rem;). Cuando los principales navegadores lo adoptaron a mediados de la década de 2010, esa alternativa dejó de ser necesaria.
Hoy en día, construir toda la escala tipográfica y de espaciado de un sitio alrededor de rem es una práctica habitual de accesibilidad: permite que la página completa escale con elegancia cuando un visitante aumenta el tamaño de texto de su navegador, en lugar de romperse o recortar contenido. Guías como WCAG (Web Content Accessibility Guidelines) recomiendan explícitamente no depender solo de unidades fijas para el tamaño del texto.