Convertidor de PX a REM

El Convertidor de PX a REM convierte valores de píxeles en unidades rem o em — y viceversa — usando el tamaño de fuente raíz que realmente utiliza tu proyecto. Pega un solo valor o una escala tipográfica completa y obtendrás los números convertidos, un bloque CSS listo para copiar con los píxeles originales conservados como comentarios, una regla que muestra cada tamaño a escala real y una vista previa de cómo responden tus valores rem cuando un visitante aumenta el tamaño de fuente de su navegador.

Fórmula de PX a REM

Convertir entre píxeles y rem requiere una sola división — lo único que necesitas saber es el tamaño de fuente raíz del documento.

Con el tamaño de fuente raíz predeterminado del navegador de 16 px, se obtiene 24px ÷ 16 = 1.5rem y 1.5rem × 16 = 24px. Si tu hoja de estilos establece html { font-size: 62.5%; }, el tamaño raíz pasa a ser de 10 px y los mismos 24 px equivalen a 2.4rem.

Tabla de conversión de PX a REM (raíz de 16px)

rem frente a em: por qué el anidamiento lo cambia todo

rem se mide respecto al elemento raíz (html), por lo que significa lo mismo en todo el documento. em se mide respecto al tamaño de fuente calculado del elemento padre, por lo que valores em idénticos se acumulan al anidarlos. Este diagrama muestra el mismo multiplicador de 1.5 aplicado a tres niveles de profundidad, comenzando con una raíz de 16 px:

La regla práctica a la que llegan la mayoría de los equipos: usa rem para tamaños de fuente, espaciado de diseño y puntos de ruptura; usa em deliberadamente para elementos que deban escalar con su propio componente, como el relleno dentro de un botón o el tamaño de un icono junto al texto.

¿Por qué usar rem en lugar de px?

• Accesibilidad. Un visitante que establece el tamaño de fuente predeterminado de su navegador en 20 px ve crecer proporcionalmente todos los tamaños basados en rem. Los tamaños fijados en px ignoran por completo esa preferencia.
• Un único control para el escalado global. Cambia el tamaño de fuente raíz en una media query y toda la escala tipográfica y el ritmo de espaciado cambiarán juntos, sin sobrescrituras por componente.
• Ritmo de espaciado coherente. Expresar el padding y los márgenes en rem mantiene el ritmo vertical ligado a la escala tipográfica en lugar de dejar que se separen.
• Compatible con tokens de diseño. Los sistemas de diseño modernos (y la escala predeterminada de Tailwind) publican tamaños en rem, por lo que convertir tus valores px existentes facilita la transferencia.

El truco del 62.5% para el tamaño de fuente raíz

Muchos equipos añaden esta regla para que 1rem equivalga a 10 px exactos, lo que hace trivial la conversión mental:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* volver a 16px legibles */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Como 62.5% es un porcentaje del valor predeterminado del navegador y no un valor fijo en píxeles, sigue respetando la preferencia de tamaño de fuente del visitante. Lo único que debes recordar es restablecer body a aproximadamente 1.6rem; de lo contrario, el texto predeterminado será de 10 px. Establece el campo de tamaño de fuente raíz de arriba en 10 para convertir con esta configuración.

rem en media queries

Dentro de una media query, rem se resuelve respecto al tamaño de fuente raíz inicial del navegador, no respecto al tamaño de fuente html que establezcas en CSS. Por eso @media (min-width: 48rem) siempre equivale a 768 px, incluso si tu hoja de estilos declara html { font-size: 10px }. Esto hace que los puntos de ruptura en rem sean seguros y predecibles, y es uno de los pocos lugares donde em y rem se comportan de forma idéntica.

Cuándo todavía debes usar px

• Bordes finos y divisores — un borde de 1 px debe seguir siendo de 1 px; escalarlo produce líneas borrosas de subpíxeles.
• Recursos de tamaño fijo — desplazamientos de sprites, desplazamientos precisos de sombras e imágenes con un tamaño intrínseco conocido.
• Canvas y salida impresa — cuando una medida física o en píxeles del dispositivo es realmente lo que quieres expresar.

Cómo usar este convertidor

1. Elige una dirección: px → rem, rem → px, px → em o em → px.
2. Introduce tus valores: un número o una escala completa separada por comas o espacios (hasta 20 cada vez). Se aceptan unidades finales como 24px y se ignoran.
3. Establece el tamaño de fuente raíz: mantén 16 para los valores predeterminados del navegador o pulsa un chip predeterminado para 10 (truco del 62.5%), 12, 14, 18 o 20.
4. Pulsa Convertir: consulta la tabla de resultados, la regla de tamaños a escala real, la vista previa de accesibilidad y el bloque CSS.
5. Copia el CSS: un botón copia todas las declaraciones de font-size conservando el valor de píxeles original en un comentario.

Preguntas frecuentes

¿Cómo convierto px a rem?

Divide el valor en píxeles por el tamaño de fuente raíz. Con el tamaño de fuente raíz predeterminado del navegador de 16 px, 24 px ÷ 16 = 1.5rem. Para hacerlo al revés, multiplica el valor rem por el tamaño de fuente raíz: 1.5rem × 16 = 24 px.

¿Cuántos px son 1rem?

1rem equivale al tamaño de fuente raíz de la página. En los principales navegadores, el valor predeterminado es 16 px, por lo que 1rem son 16 px, salvo que el elemento html o la configuración del navegador del visitante lo cambien.

¿Cuál es la diferencia entre rem y em?

rem siempre es relativo al tamaño de fuente raíz del elemento html, por lo que 1.5rem tiene el mismo tamaño en cualquier parte del documento. em es relativo al tamaño de fuente del elemento padre, por lo que los elementos anidados se acumulan: 1.5em dentro de otro 1.5em se muestra a 2.25 veces el tamaño base.

¿Cuál es el truco del 62.5% para el tamaño de fuente raíz?

Establecer html { font-size: 62.5%; } hace que la raíz sea de 10 px en lugar de 16 px, por lo que 1rem equivale a 10 px y el cálculo mental se vuelve trivial: 24 px son 2.4rem. También se adapta a las preferencias de tamaño de fuente del navegador del visitante, porque 62.5% es relativo y no un valor de píxeles absoluto.

¿Debo usar px o rem para los tamaños de fuente?

Usa rem para tamaños de fuente, espaciado y media queries, de modo que el diseño crezca cuando un visitante aumente el tamaño de fuente predeterminado de su navegador. Reserva px para valores que no deban escalar, como bordes finos, divisores de un píxel y algunos desplazamientos de sombra.

¿Los valores rem deben ser números enteros?

No. Los navegadores gestionan correctamente los valores rem fraccionarios y calculan internamente tamaños inferiores a un píxel. Si prefieres números limpios, elige un tamaño de fuente raíz que divida tu escala de manera uniforme, como 10 px u 8 px, o usa la opción de precisión decimal de este convertidor.

¿Funciona rem para padding, margin y media queries?

Sí. rem es válido en cualquier lugar donde CSS acepte una longitud, incluidos padding, margin, width, gap y border-radius. En las media queries, rem se resuelve respecto a la raíz inicial de 16 px y no respecto a tu tamaño de fuente html personalizado, por lo que un punto de ruptura de 48rem siempre equivale a 768 px.

Recursos adicionales

• Unidades de longitud de CSS - MDN
• Longitudes relativas a la fuente - Valores de CSS del W3C