¿Qué es 1rem en píxeles? La guía completa y sin tecnicismos

¿Qué es 1rem en píxeles? La guía completa y sin tecnicismos

Si has estado incursionando en el diseño web o escribiendo CSS últimamente, probablemente te hayas topado con el término «rem» e inmediatamente te hayas preguntado: Espera, ¿por qué no podemos usar simplemente píxeles? Y lo que es más importante, ¿qué es exactamente 1rem en píxeles?

Aquí tienes la respuesta corta y directa: Por defecto, 1rem equivale a 16 píxeles.

Pero antes de que te pongas a escribir 16px en todas partes, hablemos de por qué existe rem en primer lugar, y por qué confiar únicamente en píxeles rígidos podría estar haciendo que tu sitio web sea mucho menos accesible de lo que crees.

¿Qué es exactamente un «Rem»?

«Rem» significa Root EM (EM de raíz). No te preocupes demasiado por la historia centenaria de la tipografía de donde proviene el «em». En el diseño web moderno, la «raíz» simplemente se refiere a tu documento HTML principal.

Piénsalo como si estuvieras horneando galletas. La «raíz» es tu receta maestra. Si la receta maestra dice «1 tanda = 16 galletas», entonces pedir 2 tandas (2rem) te da 32 galletas.

Si decides cambiar la receta maestra más tarde para que 1 tanda equivalga a 20 galletas, de repente 2rem significa 40 galletas. No tuviste que ir cambiando la instrucción de «2 tandas» en todas partes; simplemente actualizaste el plan maestro y todo lo demás se escaló perfectamente.

Píxeles vs. Rems: El enfrentamiento

Los píxeles son rígidos. Son como tallar instrucciones en una tableta de piedra. 16px son exactamente 16 píxeles en una pantalla, pase lo que pase.

Entonces, ¿qué sucede si un usuario con discapacidad visual cambia el tamaño de fuente predeterminado de su navegador a 24px para poder leer cómodamente sin forzar la vista? Si tu sitio está construido estrictamente con píxeles, tu texto se queda obstinadamente estancado en 16px. Básicamente, has ignorado la configuración de su navegador.

Sin embargo, si usas rem, tu sitio escucha activamente al usuario. 1rem básicamente significa «1 vez lo que sea el valor predeterminado del usuario». Si su valor predeterminado es 16px, ven 16px. Si su valor predeterminado es 24px, tu texto de 1rem se escala sin problemas a 24px. Es una victoria instantánea en accesibilidad que mejora tu sitio para todos.

Haciendo las cuentas (y cómo evitarlo)

Convertir rems a píxeles es solo una multiplicación básica. Tomas tu tamaño de píxel base (normalmente 16) y lo multiplicas por tu valor rem.

• 0.5rem = 8px (16 x 0.5)

• 1.5rem = 24px (16 x 1.5)

• 2rem = 32px (16 x 2)

Pero seamos realistas: a nadie le gusta hacer cálculos mentales mientras está sumergido en el código. Si estás tratando de averiguar cuánto es 2.125rem sobre la marcha, no necesitas sacar una calculadora. Deja que las herramientas hagan el trabajo pesado por ti.

Guarda en tus marcadores estos conversores increíblemente útiles para ahorrar tiempo:

• ¿Tienes un valor rem pero necesitas saber qué tan grande se verá en realidad? Usa este Convertidor de rem a píxeles.

• ¿Estás mirando un diseño de Figma perfecto al píxel y necesitas traducirlo a CSS? Pásate por el Convertidor de píxeles a rem.

La hoja de trucos del desarrollador

Si solo necesitas una referencia rápida para los tamaños más comunes, aquí tienes tu hoja de trucos. Esto asume el tamaño base predeterminado del navegador de 16px.

Caso de uso común	Equivalente en píxeles	Valor REM
Espaciado pequeño de IU o bordes	4px	0.25rem
Márgenes, padding, espacios pequeños	8px	0.5rem
Texto pequeño, subtítulos, metadatos	12px	0.75rem
Texto de cuerpo predeterminado	16px	1rem
Subencabezados, párrafos de introducción	20px	1.25rem
Encabezados H3, botones grandes	24px	1.5rem
Encabezados H2, títulos de sección	32px	2rem
Encabezados H1, texto principal (hero)	48px	3rem