Convertidor de PX a REM

En el desarrollo web, los píxeles (px) son unidades de tamaño fijo, lo que significa que no se escalan con la configuración de tamaño de fuente del usuario. REM (Root EM) es una unidad relativa, donde 1 REM equivale al tamaño de fuente del elemento HTML raíz (normalmente la etiqueta html). Esto hace que las unidades REM sean ideales para crear diseños responsivos que se adaptan a las preferencias del usuario y a diferentes tamaños de pantalla.

Convertir entre REM y píxeles es una tarea habitual para los desarrolladores front-end, y garantiza consistencia y capacidad de respuesta en sus proyectos. La misma lógica de multiplicar o dividir se aplica a otras conversiones cotidianas, como el Convertidor de Peso para recetas o cálculos de envío.

Convertir un valor en píxeles a rem usa una fórmula: divide entre tu tamaño de fuente base en píxeles. La dirección inversa, de rem a px, multiplica el valor en rem por ese mismo tamaño de fuente base. La mayoría de los navegadores usan 16px como tamaño de fuente base predeterminado, salvo que una página lo modifique.

El campo Tamaño de Fuente Base de esta herramienta te permite anular el valor predeterminado de 16px antes de convertir. Cámbialo para que coincida con el tamaño de fuente raíz de tu proyecto, y cada resultado se recalcula al instante. Si necesitas el equivalente en píxeles de una altura de línea en REM, prueba la Calculadora de Altura de Línea.

Estos cinco ejemplos cubren las conversiones más habituales, desde una correspondencia exacta 1:1 hasta el truco del tamaño de fuente base al 62.5%. Cada fila muestra la fórmula, el resultado y qué hacer con él.

Establecer html {'{'} font-size: 62.5%; {'}'} reduce el tamaño de fuente raíz desde el valor predeterminado del navegador de 16px hasta 10px. Como el 62.5% de 16px equivale a 10px, cada 1rem equivale entonces a 10px en lugar de una fracción incómoda, tal como muestra el ejemplo de 24px a 2.4rem anterior.

Las especificaciones de diseño de Figma o Sketch casi siempre indican los tamaños de fuente en píxeles, pero el CSS de producción debería usar rem. Toma el valor en píxeles de tu archivo de diseño, conviértelo con la herramienta de arriba y luego pega el valor en rem en tu hoja de estilos.

Las utilidades de espaciado, tipografía y tamaño de Tailwind CSS son en rem de forma predeterminada, asumiendo el tamaño de fuente raíz estándar de 16px. Si tu proyecto usa un tamaño de fuente raíz distinto, las clases de Tailwind se escalan según ese valor, excepto dentro de los puntos de ruptura de las media queries.

/* Especificación de Figma: font-size: 24px; */
font-size: 1.5rem;

Este convertidor funciona completamente en el lado del cliente, dentro de tu navegador. Tus valores de entrada nunca se envían a un servidor, por lo que cada cálculo permanece privado mientras trabajas.

Este convertidor gestiona algunas entradas de forma distinta a un simple número positivo. Entender estos casos límite te ayuda a confiar en el resultado en lugar de dudar de él.

Si conviertes con frecuencia otras unidades técnicas con sus propias peculiaridades de redondeo, el Convertidor de Datos cubre bytes, kilobytes y más.

Elegir entre rem, px y em depende de si un valor debe respetar las preferencias de tamaño de fuente del usuario. Si también necesitas convertir unidades de longitud absolutas como pulgadas o centímetros, el Convertidor de Longitud se encarga de esas conversiones por separado.

La siguiente tabla compara cómo se comporta cada unidad frente al zoom, la configuración de accesibilidad y los casos de uso habituales. Una excepción importante para el diseño responsivo: las unidades rem dentro de una media query de CSS siempre se resuelven según el tamaño de fuente predeterminado del navegador, ignorando cualquier tamaño de fuente raíz personalizado de la página.