Convertir píxeles a rem con el tamaño de fuente raíz correcto

Para convertir píxeles CSS a rem, divide el valor en píxeles entre el tamaño de fuente del elemento raíz: valor en rem = valor en px ÷ tamaño raíz en px. Con una raíz de 16 px, 24 px equivalen a 1,5 rem. Con una raíz de 20 px, esos mismos 24 px equivalen a 1,2 rem.

El convertidor de PX a REM hace esta división. Su campo de tamaño raíz empieza en 16, pero no lee tu hoja de estilos. Comprueba la base antes de convertir un tamaño de texto o un espaciado.

Encontrar el tamaño raíz de tu página

Un rem se refiere al tamaño de fuente del elemento raíz, normalmente html. El valor de 16 px es habitual, pero no universal: los estilos del sitio y las preferencias del navegador pueden cambiarlo. MDN explica esta referencia de la unidad rem.

1. Abre la página de tu proyecto en el navegador. Inspecciona el elemento html con las herramientas de desarrollo.
2. En el panel de estilos calculados, busca font-size y anota su valor en píxeles. No uses el de body ni el del título que quieres convertir.
3. Otra opción: ejecuta getComputedStyle(document.documentElement).fontSize en la consola de esa misma página. Una respuesta «20px» indica una base de 20 para el convertidor.
4. Vuelve a comprobar el valor si una regla de diseño adaptable o un ajuste cambia el tamaño raíz. La medición describe la página en su estado actual.

Este método utiliza los estilos realmente aplicados, como explica la documentación de getComputedStyle.

Convertir y aplicar el valor

1. Introduce 24 en el campo «Valor CSS en píxeles», sin añadir px.
2. Introduce la base que has consultado, por ejemplo 16, en «Tamaño de fuente raíz (px)». La base debe ser estrictamente positiva; el valor que quieres convertir puede ser cero, pero no negativo.
3. Pulsa «Convertir a rem». La herramienta en español muestra «24px ÷ 16px = 1,5rem». Para una declaración CSS, utiliza únicamente el valor en rem y cambia la coma por un punto: 1.5rem, por ejemplo «font-size: 1.5rem;».
4. Comprueba cómo se ve en tu página. Si la raíz es de 20 px, usa el resultado 1.2rem para obtener 24 px. Mantener 1.5rem produciría 30 px.

En español se escribe 1,5 en una explicación; el código CSS exige el punto decimal: 1.5rem. Los píxeles de esta conversión son píxeles CSS, no los píxeles físicos de la pantalla. No apliques ningún multiplicador relacionado con su densidad. MDN detalla esta distinción.

Entender la diferencia entre rem y em

Los rem permiten compartir una referencia común entre componentes. Los em dependen del tamaño de fuente del elemento; en una declaración font-size, dependen del tamaño de fuente del elemento padre. Por eso, los tamaños de texto en em pueden multiplicarse al anidar elementos. Elige em si buscas esa dependencia del componente y rem si quieres una referencia a la raíz. El módulo CSS Values and Units define estas unidades.

Evitar errores de base y de precisión

No cambies el tamaño raíz solo para que un cálculo dé el resultado deseado: también modificarías las dimensiones en rem que ya existen. Corrige la base introducida y vuelve a calcular.

El resultado se redondea a un máximo de seis decimales. Así, 17 px con una raíz de 18 px dan 0.944444rem en CSS; la herramienta en español lo muestra como 0,944444rem. No se conservan los ceros finales innecesarios.

Un valor muy pequeño puede desaparecer al mostrar el resultado: 0.000001 px ÷ 16 produce 0rem después del redondeo. Eso no significa que el cociente matemático sea cero. Compruébalo antes de sustituir un valor muy pequeño en tu CSS. Se rechazan los números no finitos y los resultados que superan el rango numérico admitido.

Comprobar también el cambio de tamaño del texto

Usar rem no garantiza la accesibilidad. Prueba el zoom hasta el 200 %, además del aumento de tamaño del texto y las preferencias de fuente: los títulos, los botones y los campos deben seguir siendo legibles y utilizables. Revisa si el texto queda cortado o se superpone dentro de contenedores rígidos. Una dimensión en px no es automáticamente inaccesible: el zoom de la página también la amplía. El criterio WCAG 1.4.4 trata del cambio de tamaño sin pérdida de contenido ni de funcionalidad, no de la obligación de usar una unidad concreta.

Preguntas frecuentes

¿Cuántos rem son 16 px?

1rem con una raíz de 16 px; 0.8rem con una raíz de 20 px, expresados como valores CSS. Para responder, hace falta conocer la base.

¿Hay que convertir todos los valores px a rem?

No. Elige la unidad según el comportamiento que buscas: seguir la tipografía raíz, la del componente o mantener una longitud CSS independiente de la fuente.

¿Por qué mi resultado no coincide con el del convertidor?

Comprueba el tamaño calculado de html, las reglas CSS que sustituyen tu declaración y el redondeo. El convertidor solo calcula a partir de los dos valores proporcionados.