Conversor de px a rem

En CSS, rem (root em) es una unidad relativa al tamaño de fuente del elemento raíz (html), que por defecto es 16px en los navegadores. Usar rem en lugar de px hace que tu diseño respete las preferencias de tamaño de texto del usuario y escale correctamente. Esta calculadora convierte entre px y rem en ambas direcciones.

px

Resultado

  • Resultado
    1.5 rem

Hecho con LDX Software · ldxsoftware.com.pe

¿Qué es el rem y por qué usarlo?

rem significa "root em": es relativo al font-size del elemento <html>. Si html { font-size: 16px }, entonces 1rem = 16px, 1.5rem = 24px, 0.75rem = 12px. A diferencia de px (píxeles fijos), rem escala cuando el usuario cambia el tamaño de fuente en su navegador — algo que hacen muchos usuarios con baja visión. Esto lo convierte en la unidad recomendada para tipografía, espaciados y tamaños en diseño accesible y responsivo.

Fórmula de conversión px ↔ rem

px a rem: rem = px / tamaño_base. rem a px: px = rem × tamaño_base. Con base 16px: 24px / 16 = 1.5rem. Con base 10px (truco del 62.5%): 24px / 10 = 2.4rem. El "truco del 62.5%" consiste en poner html { font-size: 62.5% } para que 1rem = 10px, facilitando el cálculo mental. Sin embargo, esto rompe las preferencias de fuente del usuario si no se gestiona bien.

Ejemplo: tipografía escalable con rem

Diseño con base 16px. Tamaño de párrafo: 16px → 1rem. Encabezado H1: 48px → 3rem. Encabezado H2: 32px → 2rem. Espaciado entre secciones: 64px → 4rem. Si el usuario tiene su navegador configurado a 20px de fuente base, todos estos valores escalan proporcionalmente: el párrafo pasa a 20px, el H1 a 60px, etc. — sin tocar una sola línea de CSS.

Cuándo usar px y cuándo rem

Usa rem para: tamaños de fuente, alturas de línea, márgenes, paddings, anchos de contenedores y media queries (con media queries en em/rem, los breakpoints también respetan el zoom del usuario). Usa px para: bordes (border: 1px solid), sombras, outline, y elementos que deben tener un tamaño físico fijo independientemente del zoom (como un ícono de 24px en una barra de navegación). En Tailwind CSS v4, la escala de spacing usa rem internamente con base 4px (0.25rem = 1px de grid).

Preguntas frecuentes

¿Em y rem son lo mismo?

No. em es relativo al font-size del elemento padre inmediato, lo que puede causar efecto cascada (un em dentro de otro em multiplica los tamaños). rem siempre es relativo al elemento raíz (html), sin cascada. Para tipografía y espaciados, rem es más predecible.

¿Cuál es el tamaño base por defecto en los navegadores?

La mayoría de navegadores (Chrome, Firefox, Safari, Edge) usan 16px como tamaño de fuente por defecto para el elemento html, a menos que el usuario lo cambie en la configuración. Por eso, la base por defecto de esta calculadora es 16px.

¿Puedo usar rem en media queries de CSS?

Sí y es recomendable. Las media queries en rem (ej. @media (min-width: 48rem)) respetan el zoom y las preferencias de fuente del usuario, mientras que en px no. 48rem con base 16px equivale a 768px (el breakpoint md de Tailwind).

¿Tailwind CSS usa rem o px?

Tailwind usa rem para casi todo. La clase text-base equivale a 1rem (16px), text-xl a 1.25rem (20px), p-4 a 1rem (16px), etc. Los valores px solo aparecen en bordes y algunas utilidades específicas. En Tailwind v4 puedes personalizar la escala con variables CSS.

Más de Diseño

Conversor de color HEX / RGB / HSLVerificador de contraste (WCAG)

Herramienta gratuita de LDX Software. Resultados referenciales; verifica siempre con la fuente oficial.