Conversor de PX a REM

Esta herramienta convierte valores en píxeles (px) a unidades rem para CSS. La unidad rem siempre es relativa al font-size del elemento raíz (el elemento html), lo que la convierte en la unidad ideal para diseños responsivos y accesibles. Define tu tamaño de fuente raíz, escribe un valor en píxeles y el equivalente en rem aparece al instante, listo para pegar en tu hoja de estilos.

La mayoría de navegadores usan 16px como raíz, por lo que 16px = 1rem. Si tu proyecto cambia el font-size del html, ajusta la base en los ajustes.

Por Qué los Desarrolladores Eligen REM

Escalado Responsivo

Cambia un solo font-size raíz en una media query y todo el diseño escala proporcionalmente, sin editar elemento por elemento.

Accesibilidad

rem respeta la preferencia de tamaño de fuente del navegador, así el texto y el espaciado crecen para quienes necesitan letra más grande.

Tamaños Predecibles

Como rem nunca se acumula al anidar, un valor significa lo mismo en cualquier parte de la página.

Cómo Convertir PX a REM

1

Define el Tamaño de Fuente Raíz

Introduce el font-size raíz (html) de tu proyecto en el campo Tamaño de Fuente Base. El valor predeterminado es 16px, la línea base estándar del navegador.

2

Introduce un Valor en Píxeles

Selecciona la pestaña de unidad px y escribe el valor en píxeles a convertir. El equivalente en rem se actualiza en vivo mientras escribes.

3

Lee el Resultado

El valor en rem aparece al instante en el panel de resultados, junto a los equivalentes en em y px. Usa el ajuste de decimales para controlar la precisión del redondeo.

4

Copia a tu CSS

Haz clic en el botón de copiar junto al resultado en rem y pégalo directamente en tu hoja de estilos.

La fórmula: rem = px ÷ font-size raíz. Por ejemplo, 24px ÷ 16px = 1.5rem.

REM vs PX vs EM

Elegir la unidad correcta depende de si quieres un tamaño fijo o uno que responda al contexto. Así se comparan las tres unidades.

Unidad	Relativa a	Escala con ajustes del usuario	Ideal para
px	Nada (absoluta)	No	Bordes, sombras, líneas finas
rem	Font-size raíz	Sí	Tipografía, diseño, espaciado
em	Font-size del padre	Sí	Dimensionamiento local de componentes

Buena práctica: usa rem para tamaños de fuente, márgenes y relleno para que tu interfaz sea totalmente escalable, y reserva px para cosas que nunca deben cambiar de tamaño, como bordes de 1px.

Conversiones Comunes de PX a REM

Valores de referencia con un tamaño de fuente raíz de 16px. Ajusta la base en la herramienta para recalcular con cualquier otra raíz.

Píxeles	REM (raíz 16px)	Uso típico
12px	`0.75rem`	Leyendas, letra pequeña
14px	`0.875rem`	Texto secundario, etiquetas
16px	`1rem`	Texto base del cuerpo
18px	`1.125rem`	Tamaño de lectura cómodo
24px	`1.5rem`	Títulos de sección
32px	`2rem`	Títulos de página

Preguntas Frecuentes

¿Qué es el tamaño de fuente base y por qué importa?

Es el font-size raíz (html) contra el que se calcula rem. Los navegadores lo establecen en 16px por defecto, así que 1rem normalmente equivale a 16px. Si tu CSS define un tamaño de raíz distinto, cambia este campo a ese valor para obtener conversiones precisas.

¿Cómo se convierte px a rem?

Divide el valor en píxeles entre el tamaño de fuente raíz: rem = px ÷ raíz. Con una raíz de 16px, 24px se convierte en 1.5rem. La herramienta lo calcula al instante y redondea según el número de decimales que elijas.

¿Es rem mejor que px para la accesibilidad?

En general, sí. Como rem escala con la preferencia de tamaño de fuente del navegador, quienes aumentan su texto predeterminado obtienen una interfaz proporcionalmente más grande. Los valores fijos en px ignoran esa preferencia, lo que puede perjudicar la legibilidad.

¿Se acumula rem cuando los elementos se anidan?

No. A diferencia de em, rem siempre hace referencia al font-size raíz, por lo que el mismo valor rem se renderiza de forma idéntica sin importar cuán anidado esté el elemento. Esta previsibilidad es una de las mayores ventajas de rem.

¿La conversión se hace en mi navegador?

Sí. El cálculo se ejecuta totalmente en el cliente mientras escribes. No se sube nada a un servidor, por lo que los resultados son instantáneos y la herramienta sigue funcionando sin conexión una vez cargada.