Diseño
Conversor px → rem / em
Convierte píxeles a rem y em (y viceversa) con base configurable. Imprescindible para tipografía fluida y layouts responsivos.
px
Los navegadores usan 16px por defecto (1rem = 16px). Cámbialo si tu CSS redefine el font-size de html — por ejemplo, html { font-size: 62.5%; } hace que 1rem = 10px — o si tu framework o CMS establece una base distinta.
px → rem / em
Escribe los píxeles — los resultados se calculan al instante.
px
rem / em → px
Escribe un valor en rem o em — el equivalente en px se calcula al instante.
rem/em
px
Tabla de referencia rápida
Base: 16px
| px | rem | em |
|---|
Conceptos clave
rem (root em) es una unidad relativa al
font-size del elemento raíz (<html>). Con una base de 16px, 1rem = 16px. Cambiar el font-size del documento escala todos los valores rem proporcionalmente, lo que simplifica el diseño responsivo global.
em es relativo al
font-size del elemento padre (o del propio elemento cuando se usa para font-size). Esto puede crear efectos acumulativos en elementos anidados. rem evita ese problema al ser siempre relativo a la raíz. Para espaciados y tamaños dentro de componentes autocontenidos, em puede ser preferible.
Los píxeles son fijos y no respetan la preferencia de tamaño de fuente del usuario en el navegador. Con
rem, si el usuario aumenta el tamaño base de fuente en su navegador, todo el contenido escala correctamente, mejorando la accesibilidad. WCAG 1.4.4 también recomienda que el texto pueda escalarse hasta el 200% sin pérdida de funcionalidad.
Algunos proyectos usan el truco de
html { font-size: 62.5%; } para que 1rem = 10px, facilitando el cálculo mental. Otros frameworks o CMS pueden usar una base diferente. Usa el campo de base para adaptar el conversor a tu proyecto específico.
Además de
rem y em, CSS ofrece unidades de viewport: vw (1% del ancho), vh (1% del alto), vmin y vmax. CSS moderno añade unidades de contenedor (cqi, cqb) y las funciones clamp() y calc() que combinan unidades. Para tipografía fluida que escala automáticamente, clamp(1rem, 2.5vw, 2rem) crea tamaños con un mínimo y un máximo definidos — sin necesidad de media queries.
Usa rem para: tamaños de fuente globales, espaciados del layout principal y cualquier valor que deba escalar con el documento. Usa em para: espaciados internos de componentes autocontenidos (botones, badges, tooltips) que deben escalar con el propio texto del componente. La regla práctica:
rem si quieres que algo escale con el documento raíz; em si quieres que escale con el componente donde está. Mezclar ambos estratégicamente da gran flexibilidad al sistema de diseño.
Bootstrap 5 define sus breakpoints en
em (no en rem) para que las media queries respondan al zoom del navegador: el breakpoint md es @media (min-width: 48em), equivalente a 768px con base 16px. Los espaciados del sistema de utilidades (p-3, m-2, etc.) están definidos en rem, por lo que respetan automáticamente el tamaño base del navegador del usuario. Esto hace que Bootstrap sea accesible sin configuración adicional cuando se usan sus clases de espaciado.
Desarrolladores front-end lo usan constantemente para convertir los valores en píxeles de los diseños de Figma o Sketch a rem antes de escribir CSS, garantizando que la tipografía y el espaciado se adapten al tamaño de fuente del usuario. Diseñadores web con conocimientos de código lo consultan para entender la equivalencia entre las métricas visuales del prototipo y las unidades CSS relativas que se usarán en producción. Equipos que usan frameworks CSS como Tailwind o Bootstrap necesitan convertir sus valores de diseño a las escalas de espaciado basadas en rem que estos frameworks usan internamente. Especialistas en accesibilidad web lo usan para asegurarse de que los tamaños de fuente mínimos (normalmente 16px base / 1rem) cumplan con las recomendaciones WCAG y respeten el zoom del navegador. Estudiantes de desarrollo web lo usan como referencia de aprendizaje para consolidar la relación entre px y las unidades relativas.
En el escritorio, pulsa Ctrl + D (Windows/Linux) o Cmd + D (Mac) en Chrome, Firefox o Edge para añadir esta página a tus marcadores al instante. En Safari para Mac usa Cmd + D o ve a Marcadores → Añadir marcador. En el móvil con Chrome (Android), toca el menú de tres puntos (⋮) y elige «Añadir a pantalla de inicio» o «Añadir a marcadores». En el móvil con Safari (iPhone/iPad), toca el botón de compartir (□↑) y luego «Añadir a pantalla de inicio». Muchos desarrolladores la tienen fijada en la barra de favoritos del navegador junto a sus herramientas de código más usadas.