Convertidor PX a REM
Para convertir px a rem, divide el valor en píxeles entre el tamaño de fuente raíz: rem = px / raíz. Con la raíz predeterminada del navegador de 16px, 24px / 16 = 1.5rem. Cambia la base abajo (14px para Ant Design, 10px para el truco del 62,5 %) y los valores rem y em la siguen; el valor en puntos, en cambio, depende de los píxeles, porque 1px siempre son 0,75pt.
El campo em asume que el elemento hereda el tamaño de fuente base de arriba. En CSS, em se resuelve contra el tamaño de fuente del propio elemento, y contra el del padre cuando lo usas en la propia propiedad font-size.
Conversión en bloque: pega CSS o una lista de valores en px
Cada valor en px se reescribe en rem según el tamaño de fuente base de arriba.
¿Cómo convierto px a rem?
La fórmula es rem = px / tamaño de fuente raíz, y a la inversa px = rem x tamaño de fuente raíz. Solo cuenta el tamaño de fuente del elemento html raíz, por muy anidado que esté el elemento, y eso es lo que hace predecible la aritmética con rem. Con la raíz predeterminada de 16px: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem y 40px = 2.5rem.
No redondees el resultado. 15px son exactamente 0.9375rem con una raíz de 16px; redondear a 0.94rem lleva el tamaño renderizado a 15.04px y rompe la alineación de una rejilla. Los navegadores calculan longitudes subpíxel y las ajustan a la rejilla de píxeles del dispositivo al pintar, así que copia el valor exacto que te da el convertidor. El convertidor imprime hasta seis decimales: exactos con raíces que dividen sin resto, como 16px y 10px, y con una precisión de una millonésima de rem cuando no lo hacen, como 14px.
Tabla px a rem con raíz de 16px, 14px y 10px
El mismo valor en píxeles se convierte en tres valores rem distintos según la raíz que fije tu proyecto, así que esta tabla los recoge los tres, más el equivalente en puntos (CSS define 1px como 1/96 de pulgada y 1pt como 1/72, de modo que 1px = 0.75pt). Las columnas de 16px y 10px son exactas. Con una raíz de 14px la división casi nunca es exacta, así que esos valores se redondean a cuatro decimales y se marcan con el signo de aproximación; el convertidor de arriba muestra más dígitos.
| Píxeles | rem (raíz 16 px) | rem (raíz 14 px) | rem (raíz 10 px) | Puntos |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem o em: ¿qué unidad debo usar?
El reparto práctico: rem para todo lo que deba seguir el tamaño de texto del lector, em para valores que deban seguir el tamaño de fuente del propio elemento, y px solo donde una longitud tenga que quedarse físicamente fija. La columna de ejemplo asume una raíz de 16px y un padre de 16px.
| Unidad | Relativa a | 20px equivale a | Mejor para | Sigue el tamaño de texto del lector |
|---|---|---|---|---|
| px | Nada: es absoluta (1px = 1/96 de pulgada) | 20px | Bordes de un píxel, anillos de foco, iconos de tamaño exacto | No |
| rem | El tamaño de fuente del elemento html raíz | 1.25rem | Tamaños de fuente, espaciado, breakpoints, escalas tipográficas | Sí |
| em | El tamaño de fuente del propio elemento (el del padre al fijar font-size) | 1.25em | Relleno que debe crecer con la etiqueta que envuelve | Sí |
| % | El valor del padre para esa propiedad | 125% | Anchos fluidos y árboles antiguos de font-size | Sí (font-size) |
¿Debo usar px o rem para relleno, márgenes y bordes?
Usa rem para rellenos y márgenes que deban respirar cuando crece el texto: relleno de botones, huecos de tarjetas, espaciado de secciones, separación de rejilla. Deja px para las líneas finas. Un borde de 1px es un píxel independiente del dispositivo y bien nítido, mientras que ese mismo borde escrito como 0.0625rem puede redondearse a cero o verse borroso con ciertos niveles de zoom, y lo mismo vale para anillos de foco y separadores de 2px. Por eso la conversión en bloque de arriba deja intactos los valores de 1px y 2px y reescribe todo lo demás.
Las media queries son el otro sitio donde rem se gana su sueldo. Dentro de una media query, rem se resuelve contra el tamaño de fuente inicial del navegador y no contra tu regla html, así que un breakpoint de 48rem son 768px para quien use los valores por defecto y crece para quien haya aumentado su tamaño de texto. Los breakpoints en px no se mueven nunca.
¿Cómo convierto px a rem en Figma, VS Code y Tailwind?
Figma mide en px, pero Dev Mode puede emitir rem: abre los ajustes de Inspect, elige «Set unit scale» e introduce tu tamaño de fuente raíz (por defecto, 1rem = 16px). Las extensiones de VS Code como cssrem convierten mediante autocompletado y exponen la raíz como opción (cssrem.rootFontSize, 16 por defecto), así que comprueba que coincide antes de fiarte del resultado en un proyecto de 14px. Para un archivo entero, pégalo en el cuadro de conversión en bloque de arriba y fija antes la base. La escala predeterminada de Tailwind ya está en rem con raíz de 16px: una unidad de espaciado son 0.25rem (4px), así que 16px es 4, 24px es 6 y 40px es 10.
Fuentes
Acerca de Convertidor PX a REM
Este convertidor de px a rem responde a una sola pregunta: ¿en qué se convierte, dentro del CSS, un valor en píxeles de tu archivo de diseño, con el tamaño de fuente raíz que tu proyecto usa de verdad? Mueve el control de la base (16px es el valor predeterminado del navegador, 14px el de Ant Design, 10px el viejo truco del 62,5 %) y cada valor rem y em de la página se recalcula contra ella, así que nunca tendrás que recordar para qué base se escribió un número.
La base que debes escribir es la que tu hoja de estilos fija en el elemento html, no en body ni el tamaño de fuente del componente que estás maquetando. Si ninguna regla la fija, se aplica el valor predeterminado del navegador: 16px, salvo que el lector lo haya subido. En DevTools, selecciona el nodo html y lee su font-size calculado; ese número es el divisor de toda la hoja. Los cuatro botones de framework lo rellenan por ti para Tailwind, Bootstrap, Material UI y Ant Design.
Lo que distingue a esta página es el modo en bloque: pega una hoja de estilos, un volcado de especificaciones de Figma o una simple lista de números y recibirás la versión en rem con un recuento de lo que cambió, lista para copiar o descargar en CSV. Debajo de la herramienta encontrarás la fórmula en ambos sentidos, una tabla de 1px a 96px con tres raíces y sus equivalentes en puntos, una tabla comparativa de unidades y diez preguntas respondidas a fondo.
Casos de uso
Cómo usar
Fija el tamaño de fuente base (raíz): 16px es el valor predeterminado del navegador, 14px coincide con Ant Design y 10px te da el truco del 62,5 %.
Escribe el valor en píxeles en el campo Píxeles. Los campos rem, em y pt se actualizan mientras escribes.
O hazlo al revés: introduce un valor en rem y lee el tamaño en píxeles que produce con la raíz actual.
Toca cualquier valor de la tabla rápida de 8px a 96px para cargarlo, o consulta la tabla completa para raíces de 16px, 14px y 10px.
Pega un bloque CSS entero en la conversión en bloque para reescribir todos los valores en px de una vez, conservando los bordes de 1px y 2px.
Copia la declaración CSS generada o descarga los pares px/rem convertidos en CSV para la entrega a diseño.
Consejos Pro
- Fija primero el tamaño de fuente base: determina todos los valores rem y em de la página (los campos, los botones rápidos y la conversión en bloque), así que pasar a una raíz de 14px los reescribe todos a la vez.
- Deja los bordes de 1px y 2px en px. Los bordes subpíxel pueden redondearse a cero con ciertos niveles de zoom, y por eso el modo en bloque los omite de forma predeterminada.
- pt no depende de la raíz: 24px son 18pt tanto si tu base es de 16px como de 10px, así que el campo de puntos no se mueve cuando desplazas el control.
- El modo en bloque se vuelve a ejecutar cada vez que mueves el control de la base, así que puedes ver la misma hoja de estilos con raíz de 16px y de 14px sin pegarla dos veces.
- Recurre a em solo cuando un valor deba seguir el tamaño de fuente de su propio elemento, como el relleno de un botón alrededor de su etiqueta, y deja el resto en rem para que nada se acumule.
Preguntas frecuentes
Divide el valor en píxeles entre el tamaño de fuente raíz: rem = px / raíz. La raíz predeterminada del navegador es 16px, así que 24px / 16 = 1.5rem y 10px / 16 = 0.625rem. Para rem solo importa el tamaño de fuente del elemento raíz, por muy anidado que esté el elemento, y eso es justo lo que hace la aritmética predecible en toda una hoja de estilos.
Con la raíz predeterminada de 16px, 1rem = 16px, 1.5rem = 24px y 2rem = 32px; aquí se multiplica en vez de dividir: px = rem x raíz. Si la raíz es de 14px, como en Ant Design, 1rem baja a 14px y 1.5rem pasa a ser 21px. Una cifra en rem no significa nada sin su raíz, así que indica siempre la base junto a ella.
Un tamaño de fuente en px ignora el tamaño de texto que el lector eligió en su navegador: quien haya puesto 20px por defecto seguirá recibiendo tus 14px fijos. rem se mide contra esa preferencia, así que todos los tamaños escalan juntos. El criterio de conformidad 1.4.4 de WCAG 2.2 espera que el texto aguante una ampliación al 200 %, y una escala tipográfica en rem lo consigue sin una sola media query extra.
rem siempre es relativo al tamaño de fuente del elemento html raíz. em es relativo al tamaño de fuente del elemento en el que se escribe, salvo dentro de la propia propiedad font-size, donde se resuelve contra el tamaño de fuente del padre. Por eso los tamaños de fuente anidados se acumulan: 0.9em dentro de 0.9em dentro de 0.9em es 0.729 del original. rem nunca se acumula, y por eso es la opción más segura para escalas tipográficas y espaciado de maquetación.
Usa rem para rellenos y márgenes que deban respirar cuando crece el texto: relleno de botones, huecos de tarjetas, espaciado de secciones. Deja px para las líneas finas: un borde de 1px se mantiene nítido, mientras que su equivalente en rem puede redondearse a cero o desenfocarse con ciertos niveles de zoom. Por eso la conversión en bloque de esta página deja los valores de 1px y 2px en px de forma predeterminada.
Quédate con 16px salvo que un framework obligue a otra cosa, porque coincide con el valor predeterminado del navegador. Ant Design viene con una raíz de 14px. El truco del 62,5 % fija html { font-size: 62.5% } para que 1rem = 10px y la cuenta sea px / 10: 24px son 2.4rem. Sigue respetando la preferencia del lector (el 62,5 % de un valor por defecto de 20px son 12.5px), pero luego tienes que poner body { font-size: 1.6rem } o cada párrafo se renderiza a 10px, y los componentes de terceros pensados para una raíz de 16px se ven demasiado pequeños. Las tres raíces están en la tabla de arriba.
Lee el valor en el inspector y divídelo entre tu raíz: un titular de 28px son 1.75rem con raíz de 16px, y un pie de foto de 12px son 0.75rem. Dev Mode también puede escribir rem por ti: abre los ajustes de Inspect junto al desplegable de lenguaje, elige «Set unit scale» e indica tu tamaño de fuente raíz (por defecto, 1rem = 16px). Pega un bloque exportado entero en el cuadro de conversión en bloque de arriba para reescribir todos los valores de una vez.
Sí, y suele ser mejor. Dentro de una media query, rem se resuelve contra el tamaño de fuente inicial del navegador y no contra tu regla html, así que un breakpoint de 48rem equivale a 768px con los valores por defecto y crece para quien haya ampliado su texto. em se comporta igual ahí. Los breakpoints escritos en px se quedan fijos elija lo que elija el lector.
No. Los navegadores calculan longitudes subpíxel y las ajustan a los píxeles del dispositivo al pintar, así que 0.9375rem se renderiza exactamente como 15px con una raíz de 16px. Redondear a 0.94rem lo lleva a 15.04px, y ese error se acumula a lo largo de una rejilla o de un ritmo vertical. Copia el valor exacto que imprime el convertidor y deja el ajuste al navegador.
CSS define 1px como 1/96 de pulgada y 1pt como 1/72, así que 1px = 0.75pt y 16px = 12pt; esa es la proporción que hay detrás de la columna de puntos de la tabla. El dp de Android es un sistema aparte en el que 1dp = 1px a 160 ppp, y por eso un espaciado Material de 16dp acaba cerca de 16px en la web en lugar de en una conversión a rem.