Conversión de px a rem en ambos sentidos con tamaño raíz personalizado Muestra también los equivalentes en pt y porcentaje Tabla de tamaños habituales de 1px a 128px, clicable Conversor masivo que reescribe todos los px de un fragmento CSS Opción para mantener en px los bordes finos de 1px

Conversor de PX a REM

Escribe en cualquiera de los campos. Haz clic en una fila de la tabla para cargarla o pega CSS abajo para convertirlo todo.

Tamaño de fuente raízpxLos navegadores usan 16px salvo que el usuario o html { font-size } lo cambien.

pxrem / em

24px = 1.5rem = 18pt = 150%

Tabla de conversión (base 16px)

px	rem	pt
1px	0.0625rem	0.75pt
2px	0.125rem	1.5pt
4px	0.25rem	3pt
6px	0.375rem	4.5pt
8px	0.5rem	6pt
10px	0.625rem	7.5pt
12px	0.75rem	9pt
14px	0.875rem	10.5pt
16px	1rem	12pt
18px	1.125rem	13.5pt
20px	1.25rem	15pt
24px	1.5rem	18pt
28px	1.75rem	21pt
32px	2rem	24pt
36px	2.25rem	27pt
40px	2.5rem	30pt
48px	3rem	36pt
56px	3.5rem	42pt
64px	4rem	48pt
72px	4.5rem	54pt
80px	5rem	60pt
96px	6rem	72pt
128px	8rem	96pt

Convertir un fragmento CSS

Mantener bordes de 1px en px

6 valores convertidos

.card {
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

¿Qué diferencia hay entre px y rem?

El px es una unidad CSS fija, mientras que 1rem equivale al tamaño de fuente del elemento raíz html, 16px por defecto en todos los navegadores. Usar rem para texto, espaciados y diseño hace que todo escale a la vez cuando el usuario aumenta el tamaño de fuente predeterminado en su navegador, un requisito de accesibilidad importante (WCAG 1.4.4, Cambio de tamaño del texto). La fórmula es sencilla: rem = px / tamaño raíz, así que 24px son 1,5rem con base 16px. El em funciona igual pero respecto al tamaño de fuente del elemento padre, y se acumula al anidar elementos.

Funciones

• Conversión de px a rem en ambos sentidos con tamaño raíz personalizado
• Muestra también los equivalentes en pt y porcentaje
• Tabla de tamaños habituales de 1px a 128px, clicable
• Conversor masivo que reescribe todos los px de un fragmento CSS
• Opción para mantener en px los bordes finos de 1px

Funciona en local

Todas las conversiones ocurren en tu navegador, incluido el CSS que pegues. No se sube nada.

Cálculo instantáneo, 100% en el cliente.

Cómo usar: PX a REM

1
Comprueba el tamaño de fuente raíz: deja 16px salvo que tu proyecto defina otro valor en html { font-size }, como 10px o 62,5%.
2
Escribe un valor en el campo px para obtener rem, o en el campo rem para obtener px. La línea de abajo muestra también pt y porcentaje.
3
Haz clic en cualquier fila de la tabla para cargar tamaños habituales de 1px a 128px.
4
Pega un bloque de CSS en el conversor masivo: cada px pasa a rem, 0px pasa a 0 y los bordes de 1px pueden quedarse en px. Copia el resultado en tu hoja de estilos.

Ejemplos prácticos

Escala tipográfica

Una escala de 14 / 16 / 20 / 24 / 32px se convierte en 0,875 / 1 / 1,25 / 1,5 / 2rem, así los titulares crecen cuando el usuario agranda el texto en su navegador.

Migrar una hoja de estilos antigua

Pega CSS heredado en px y convierte de una vez paddings, márgenes y tamaños de fuente; después revisa las media queries y deja en px los bordes finos.

Ajustarse a un diseño de Figma

Los diseñadores entregan medidas en px. Convierte tokens de espaciado como 4, 8, 12, 16 y 24px en 0,25, 0,5, 0,75, 1 y 1,5rem para un sistema de diseño.

El truco del 62,5%

Algunos proyectos usan html { font-size: 62.5% } para que 1rem = 10px. Pon 10 como tamaño raíz y 24px serán unos sencillos 2,4rem.

Preguntas frecuentes

¿Uso rem o px?+

Usa rem para tamaños de fuente y la mayoría de espaciados, así el diseño respeta la preferencia de tamaño del usuario. Los px siguen siendo válidos para bordes, sombras y detalles finos.

¿Qué diferencia hay entre rem y em?+

rem depende del tamaño de fuente de html y es predecible. em depende del elemento padre, de modo que los em anidados se multiplican: útil en componentes, pero fácil de equivocar.

¿La base es siempre 16px?+

Es el valor por defecto en todos los navegadores, pero el usuario puede cambiarlo y tu CSS puede sobrescribirlo en html. Convierte siempre con el tamaño raíz que use tu proyecto.

¿Las media queries deberían usar rem?+

Las media queries en em o rem dependen del tamaño de fuente predeterminado del navegador, no de tu regla html, y se adaptan cuando el usuario amplía el texto. Por eso muchos equipos usan em en ellas.