px, rem y em

Estas tres unidades aparecen en casi todo codebase frontend. Parecen intercambiables en ejemplos pequeños, pero se comportan distinto en componentes reales.

px: el valor por defecto de entrega de diseño

px es una unidad CSS absoluta. 16px significa dieciséis píxeles CSS independientemente del font-size del padre.

Usa px cuando:

• Coincidas con un borde, sombra o divisor fijo
• Trabajes con canvas, anchos de trazo SVG o assets pixel-perfect
• Traduces una especificación puntual donde aún no hay tokens rem definidos

Evita usar px para toda la tipografía si tu design system espera escalado basado en rem.

rem: relativo al elemento raíz

1rem equivale al font-size calculado del elemento raíz (html), normalmente 16px por defecto.

html {
  font-size: 16px;
}

.title {
  font-size: 1.5rem; /* 24px */
}

Usa rem cuando:

• Construyas tokens de diseño para font-size, espaciado y radio
• Quieras que los tamaños escalen si el proyecto cambia el font-size raíz
• Necesites valores consistentes entre componentes no relacionados

em: relativo al font-size del elemento actual

1em equivale al font-size calculado del propio elemento (o del padre para propiedades como padding en algunos casos de herencia).

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;
}

Aquí el padding escala con el font-size del botón automáticamente.

Usa em cuando:

• El espaciado debe seguir la tipografía local dentro de un componente
• Iconos o badges deben escalar con el texto cercano
• Quieres intencionalmente comportamiento de tamaño anidado

Comparación rápida

Unidad	Mejor para	Cuidado con
px	Bordes, assets precisos	No escala con ajustes raíz
rem	Tokens globales, tipografía	Asume font-size raíz estable
em	Ritmo interno del componente	Se compone en texto muy anidado

Error habitual: mezclar contextos

Un diseñador da texto de cuerpo 20px. Escribes 20px en CSS. Más tarde el equipo cambia a html { font-size: 62.5%; } para facilitar el cálculo rem, y tus valores px ya no alinean con tokens rem.

Mejor flujo: convierte px a rem una vez, almacena tokens y reutilízalos.

Conclusión clave

Usa px para detalles físicos fijos, rem para tokens de todo el sistema y em para tamaños que deben seguir el texto local.

Convierte px de diseño a rem con el Conversor de unidades CSS / Generador clamp y configura el font-size raíz para que coincida con tu proyecto antes de copiar valores.