px a rem

rem (root em) es una unidad relativa de CSS cuyo valor equivale al tamaño de fuente del elemento raíz (<html>). Por defecto los navegadores lo fijan en 16 px, de modo que 1rem = 16 px, 1.5rem = 24 px y 2rem = 32 px. Si el usuario cambia la preferencia de tamaño de texto en su sistema o navegador, todos los elementos declarados en rem se adaptan sin tocar una sola línea de CSS.

La fórmula de conversión

rem = px ÷ font-size-raíz

Con la raíz en 16 px (valor por defecto del navegador):

px	rem
8	0.5
12	0.75
14	0.875
16	1
20	1.25
24	1.5
32	2
48	3
64	4

El truco del 62,5 %

Una práctica extendida es fijar font-size: 62.5% en <html>:

html {
  font-size: 62.5%; /* 62.5% de 16px = 10px */
}

body {
  font-size: 1.6rem; /* recupera los 16px base para el texto */
}

h1 { font-size: 3.2rem; } /* 32px */
p  { font-size: 1.6rem; } /* 16px */

Con esta configuración 1rem = 10 px y la conversión mental es px ÷ 10. El body devuelve el tamaño de fuente normal con 1.6rem para que el texto base no se vea diminuto.

¿Cuándo usar rem, em y px?

Unidad	Cuándo usarla
`rem`	Tipografía, padding, margin, tamaño de componentes
`em`	Espaciados relativos al contexto del componente (ej.: botones que escalan con su font-size)
`px`	Bordes (`1px`), sombras, posicionamiento de detalles que no deben escalar
`rem` en media queries	Sí: responden también al tamaño de fuente del sistema

Las recomendaciones de contraste WCAG (criterio 1.4.4 Resize text) exigen que el texto sea legible al 200 % de zoom sin perder contenido. Declarar tipografía en px fijos puede incumplir este requisito si el zoom se aplica solo al tamaño de fuente del navegador.

rem vs em: la diferencia clave

em es relativo al font-size del elemento padre, no de la raíz. En estructuras anidadas se multiplica en cascada: un 1.2em dentro de otro 1.2em resulta en 1.44em. Con rem ese efecto cascada desaparece porque siempre apunta al <html>.

Errores comunes

Fijar html { font-size: 16px } en px: bloquea la posibilidad de que las preferencias del usuario afecten al diseño. Usa % o simplemente no declares el font-size del <html> y deja el valor por defecto del navegador.
Usar rem en border o box-shadow: un borde de 0.0625rem (1 px) es perfectamente correcto, pero 1px es más legible y no hay motivo semántico para escalarlo con la fuente.
Mezclar rem y px sin criterio: define una política coherente en tu proyecto: fuentes y espaciado en rem, detalles visuales finos en px.

Preguntas frecuentes

¿Qué es 1rem en píxeles?

Por defecto el navegador establece el tamaño de fuente raíz en 16 px, así que 1rem = 16 px. Si el usuario cambia el tamaño de fuente de su navegador a 20 px, entonces 1rem = 20 px y todos los elementos declarados en rem se escalan automáticamente.

¿Por qué es mejor usar rem que px para tipografía?

Los rem respetan la preferencia de texto del usuario. Los píxeles son absolutos: si alguien tiene baja visión y amplía la fuente del navegador, un texto en px no crece. En rem sí lo hace, y eso es un requisito de accesibilidad (WCAG 1.4.4).

¿Hay una fórmula rápida para pasar px a rem?

Sí: rem = px ÷ font-size-raíz. Con la raíz por defecto de 16 px: 24px ÷ 16 = 1.5rem. Si configuras html { font-size: 62.5% } (que convierte 1rem a 10 px), la fórmula se simplifica a rem = px ÷ 10.