§ CALCULADORA
Conversor REM, PX y EM
Ingresa un valor en cualquier unidad y obtén las equivalencias en las otras dos. Configura la base font-size si tu proyecto la modifica.
Equivalencias comunes
| px | rem | em |
|---|---|---|
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 32px | 2rem | 2em |
| 48px | 3rem | 3em |
(Asumiendo root font-size de 16px.)
Cómo funciona
El navegador por defecto aplica font-size 16px al elemento html. Esa es la base para rem. Si tu CSS define html con font-size distinto (10px es un truco popular para que 1rem = 10px y los cálculos sean directos), todo se escala respecto a ese nuevo valor.
em funciona igual pero respecto al font-size del elemento padre. Eso permite componentes que escalan internamente: si pones padding 1em en un botón, el padding cambia automáticamente si cambias el font-size del botón. Útil para sistemas de tamaños de botón (sm, md, lg).
La calculadora asume que cuando conviertes a em, el padre tiene el mismo font-size que la base. En la práctica un em anidado depende del contexto. Para conversiones limpias y predecibles, usa rem.
Preguntas frecuentes
¿Cuándo usar rem vs em?
rem para tipografía global y espaciados. em para componentes que deben escalar respecto a su contexto.
¿Qué es el root font-size?
El font-size del elemento html. Por defecto 16px en todos los navegadores.
¿1rem siempre es 16px?
No, solo si nadie lo cambió. Si el usuario sube el tamaño base, 1rem crece.
¿Qué pasa en accesibilidad?
Usar rem permite que los usuarios con baja visión escalen toda la UI desde el navegador. Buena práctica WCAG.
Esta calculadora es parte de la suite aGo Tools. Para diseñar gradientes y otros valores CSS: Abrir CSS Gradient
¿Necesitas un design system completo con tokens y escalas tipográficas? Conversemos con aGo lab
§ aGo lab estudio
¿Tu equipo necesita una calculadora similar integrada?
Si el cálculo que hace esta calculadora es parte de tu operación diaria, aGo lab puede integrarlo a tu sistema interno.