Conversor de px a rem

Por qué convertir px a rem

El píxel es absoluto: 16px es siempre 16px, independientemente del usuario. El rem es relativo al tamaño de fuente del root (por default, 16px). Cuando un usuario aumenta el tamaño de fuente del navegador para mejor legibilidad, los valores en px no cambian, pero los en rem sí. Por eso rem es la unidad recomendada para tipografía y spacing.

La fórmula

rem = px / base

Con base 16: 16px = 1rem, 24px = 1.5rem, 32px = 2rem. Si querés simplificar las cuentas, podés cambiar la base a 10px con html { font-size: 62.5%; }: 24px = 2.4rem, 32px = 3.2rem. Es un truco viejo pero válido si te molesta dividir por 16.

Cuándo usar rem

• Tipografía: tamaños de fuente, line-heights.
• Spacing: padding, margin, gap.
• Anchos máximos: max-width de contenedores y prose.
• Border radius: para que escale con el sistema.

Cuándo NO usar rem

• Border widths: 1px hairline tiene que ser 1px siempre.
• Sombras: blur y offsets típicamente en px.
• Iconos pequeños: si querés que no escalen con el zoom de texto.
• Pixel-perfect grids: cuando necesitás precisión exacta.

Accesibilidad

Una de las razones más fuertes para usar rem es accesibilidad. Aproximadamente uno de cada cinco usuarios cambia el tamaño de fuente predeterminado del navegador (sea por preferencia o por dificultad visual). Si tu sitio usa px en todos lados, esos usuarios ven exactamente el mismo tamaño que vos. Con rem, todo escala. Esto se mide en auditorías de accesibilidad y mejora tu Lighthouse score.

Errores comunes

• Mezclar unidades sin criterio: usar px en algunas cosas y rem en otras sin lógica. Decidí una convención y mantenela.
• Usar rem para todo: incluyendo bordes hairline. Pierde precisión.
• Olvidar que rem es relativo: si cambiás el font-size del root, todo cambia. Útil cuando lo planeás, problemático si no.

Tabla práctica con base 16

12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem, 64px = 4rem. Memorizar las conversiones de los valores más comunes acelera mucho el desarrollo.