Font-size raíz y px a rem

La mayoría de la confusión px → rem proviene de ignorar el contexto del font-size raíz.

El modelo mental por defecto

Si:

html {
  font-size: 16px;
}

Entonces:

px	rem
8px	0.5rem
16px	1rem
24px	1.5rem
32px	2rem

Fórmula:

rem = px / rootFontSize

Cuando los equipos cambian la raíz

Algunos proyectos usan:

html {
  font-size: 62.5%; /* a menudo resuelve a 10px si el valor por defecto del navegador es 16px */
}

Ahora 1rem puede equivaler a 10px, no a 16px. Eso facilita el cálculo mental (24px → 2.4rem) pero rompe suposiciones si se mezcla con valores convertidos desde base 16px.

Confirma siempre la estrategia raíz del proyecto antes de convertir un archivo de diseño.

Flujo de entrega de diseño

1. Confirma el font-size raíz en el codebase objetivo.
2. Convierte valores px de espaciado y tipografía a tokens rem.
3. Mantén bordes y sombras en px si el design system lo hace.
4. Documenta la base en README o archivo de tokens.

Ejemplo de salida de tokens:

:root {
  --space-4: 1rem;    /* 16px con raíz 16px */
  --space-6: 1.5rem;  /* 24px */
  --text-lg: 1.125rem; /* 18px */
}

em entra cuando el padre difiere

Si un componente define:

.callout {
  font-size: 0.875rem;
}

Entonces el padding 1em dentro de .callout es relativo a 0.875rem, no a la raíz. Para matemática de componentes anidados, configura el font-size del padre en el contexto de tu conversor.

Errores habituales

• Convertir px a rem con la base raíz incorrecta
• Copiar valores rem de un proyecto a otro con distintos ajustes raíz
• Usar rem para anchos que deben seguir escala local del componente (em puede encajar mejor)

Conclusión clave

px → rem es división simple solo después de conocer el font-size raíz. Trata el font-size raíz como parte de la entrada de conversión, no como un detalle posterior.

Usa la pestaña de conversión de unidades del Conversor de unidades CSS / Generador clamp con el font-size raíz configurado a la base de tu proyecto antes de copiar tokens rem.