Cuándo convertir rem a px
El caso más común: estás revisando un design system o un componente que usa rem y necesitás saber el tamaño físico equivalente para validar contra un mockup en Figma. Diseñadores y desarrolladores suelen trabajar en sistemas de unidades distintas, y traducir entre ellos es parte del workflow diario.
La fórmula
px = rem * baseCon la base default de 16: 1rem = 16px, 1.5rem = 24px, 2rem = 32px. Si tu proyecto redefine el font-size del root, ajustá la base.
Cómo verificarlo en el navegador
Abrí DevTools, inspeccioná un elemento, y mirá el panel de Computed. Ahí los valores aparecen calculados en px reales, sin importar las unidades originales del CSS. Es la fuente de verdad cuando querés validar la conversión.
Cuándo NO querés convertir
Si trabajás con un design system definido en rem, mantenelo en rem. La conversión a px es para mockups o validación, no para escribir código. Convertir rem a px en producción rompe la propiedad clave del rem: que escala con preferencias del usuario.
Tabla mental para diseño
- 0.5rem = 8px: micro-spacing.
- 0.75rem = 12px: caption, ayudas.
- 1rem = 16px: body text.
- 1.25rem = 20px: subtítulo o lead.
- 1.5rem = 24px: h3.
- 2rem = 32px: h2.
- 3rem = 48px: h1 mediano.
- 4rem = 64px: hero.
Notas para diseñadores
Si trabajás en Figma con un design system, podés crear una grilla de 4 u 8 píxeles y trabajar siempre en múltiplos. Eso traduce limpio a rem (4px = 0.25rem, 8px = 0.5rem) y mantiene consistencia visual. Los sistemas de tipografía con escala 1.125, 1.25 o golden ratio (1.618) producen jerarquías equilibradas y se traducen sin redondeos raros.
Errores comunes
- Confundir base: si el proyecto usa 62.5% trick, la base es 10px no 16.
- Convertir todo a px: pierde el beneficio de accesibilidad.
- Asumir 16 universalmente: validá inspeccionando el computed value en DevTools.
Conclusión
Convertir rem a px sirve para validar mockups y comunicarse con diseño. Para escribir código, mantené el rem.