PX to REM Converter
Convert pixels to rem and vice versa
| Píxeles | REM | Uso común |
|---|---|---|
| 10px | 0.625rem | Texto muy pequeño |
| 12px | 0.75rem | Texto secundario, captions |
| 14px | 0.875rem | Texto body pequeño |
| 16px | 1rem | Texto body (default) |
| 18px | 1.125rem | Texto body grande |
| 20px | 1.25rem | Subtítulos pequeños |
| 24px | 1.5rem | H4, subtítulos |
| 28px | 1.75rem | H3 |
| 32px | 2rem | H2 |
| 40px | 2.5rem | H1 pequeño |
| 48px | 3rem | H1, títulos grandes |
| 64px | 4rem | Títulos hero |
Conversor PX ↔ REM
REM (root em) es una unidad relativa basada en el tamaño de fuente del elemento raíz (html). Usar REM facilita crear diseños responsivos y accesibles. La fórmula es: rem = px / tamaño_base.
Conversor PX a REM Online - Calcular Unidades CSS Responsive
¿Por qué usar REM en lugar de PX en CSS?
Los píxeles (px) son unidades absolutas: 16px siempre son 16px. REM (root em) es relativo al font-size del elemento raíz (html), típicamente 16px por defecto. ¿Por qué importa? Accesibilidad: usuarios con problemas de visión aumentan el font-size base del navegador; con px, tu texto no escala, con rem sí. Responsive design: cambiar el font-size del html escala proporcionalmente todo lo definido en rem. Consistencia: una escala tipográfica en rem mantiene proporciones armónicas. Las mejores prácticas modernas usan rem para tipografía y espaciado, px para bordes y sombras.
Fórmula de conversión y tamaño base
La conversión es simple: REM = PX / tamaño-base. Con base de 16px (default del navegador): 24px = 24/16 = 1.5rem; 14px = 14/16 = 0.875rem. Esta herramienta permite configurar un tamaño base diferente si tu proyecto usa html { font-size: 62.5% } (hace que 1rem = 10px para cálculo mental más fácil) u otra configuración. Algunos diseñadores prefieren base 10 para matemáticas simples, otros mantienen 16 para respetar preferencias del usuario.
Generando escalas tipográficas consistentes
Una escala tipográfica armónica usa ratios matemáticos entre tamaños. Ratios comunes: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth), 1.618 (golden ratio). Si tu base es 1rem (16px), con ratio 1.25: pequeño 0.8rem (12.8px), base 1rem (16px), h3 1.25rem (20px), h2 1.563rem (25px), h1 1.953rem (31.25px). Esta herramienta puede generar escalas automáticamente, dándote valores rem que mantienen proporción visual agradable en toda la interfaz.
Preguntas frecuentes
¿Cuál es la diferencia entre rem y em?
REM es relativo al font-size del elemento raíz (html); siempre tiene la misma referencia. EM es relativo al font-size del elemento padre, lo que causa "compounding": un em dentro de otro em se multiplica, complicando cálculos. Para la mayoría de casos, rem es más predecible. Em es útil para componentes que deben escalar con su propio font-size.
¿Debo convertir todo a rem?
No necesariamente. Usa rem para: font-size, line-height, margin, padding, y espaciado general. Usa px para: bordes (1px border siempre debe ser 1px), box-shadow (la sombra no debe escalar con texto), y elementos que deben tener tamaño fijo independiente del zoom. Media queries funcionan bien con rem o px.
¿Por qué algunos usan font-size: 62.5% en html?
Es un truco: 62.5% de 16px = 10px, haciendo que 1rem = 10px. Así 1.6rem = 16px, cálculo mental fácil. Desventaja: si el usuario cambia su font-size base, todo tu sitio se reduce 37.5% respecto a lo esperado. El approach moderno prefiere mantener 100% y usar herramientas como esta para convertir, o variables CSS.
¿Cómo afecta rem al zoom del navegador?
El zoom del navegador escala todo proporcionalmente (px y rem por igual). La diferencia está en las preferencias de font-size: un usuario que configura font-size grande en su navegador verá texto rem más grande pero px igual. Esto es la razón principal para usar rem en tipografía: respeta la elección de accesibilidad del usuario.