También disponible en: English · Português · Français · العربية
Convertidor de px a rem
Convierte entre px y rem con el tamaño de raíz que quieras, y descubre por qué esa raíz es una decisión y no una constante.
Qué es un convertidor de px a rem
Un píxel es una longitud absoluta. Un rem es relativa: significa el tamaño de fuente del elemento raíz, que en cualquier página web es el elemento html. Convertir entre ambos es una división —px entre la raíz da rem, rem por la raíz da px— y la única pregunta es cuál es esa raíz en realidad.
Casi todos los conversores responden 16 y siguen adelante. Es el número con el que vienen los navegadores, y acierta la mayoría de las veces, pero es un valor por defecto del navegador y no algo que exija el estándar. CSS define el valor inicial de font-size como la palabra clave medium y deja que el navegador decida cuántos píxeles son. La especificación no fija en ningún sitio un valor en píxeles para eso.
Por eso aquí la raíz es un control y no una constante. Cámbiala y la conversión, la tabla de referencia y el panel de escalado la siguen: es la forma honrada de presentar una unidad cuyo sentido entero es que se mueve.
Cómo usar el convertidor
- Elige la dirección y escribe tu valor. De px a rem para pasar una entrega de diseño, de rem a px para comprobar qué va a pintar realmente una hoja de estilos. Todo se actualiza mientras escribes.
- Fija el tamaño de fuente raíz. Déjalo en 16 para igualar el valor habitual del navegador, o muévelo para ver qué hace tu hoja de estilos con quien ha elegido texto más grande. La tabla de abajo se recalcula con lo que elijas.
- Lee el panel de escalado antes de copiar nada. Muestra lo que dan tres declaraciones de raíz distintas a un lector en cada ajuste del navegador, y el panel de em de debajo enseña qué pasa si echas mano de em.
Por qué se recomienda rem, y cómo anular la ventaja sin querer
La razón por la que las guías de accesibilidad señalan a rem es que hereda la decisión del propio lector. Quien ha puesto el texto de su navegador en 24px te ha dicho que necesita el texto una vez y media más grande que por defecto, y una maquetación hecha en rem se lo da en todas partes de golpe.
Es fácil tirar eso por la borda en una línea. Escribir html { font-size: 16px } sustituye el ajuste del lector por el tuyo. A partir de ahí todos los rem de la página se resuelven contra 16 elige él lo que elija, así que nuestro lector de 24px recibe exactamente dos tercios de lo que pidió —un tercio menos— y ningún rem más abajo en la hoja de estilos puede recuperarlo. Las unidades son relativas; aquello a lo que son relativas acaba de convertirse en una constante.
Los porcentajes no tienen ese problema, y aquí es donde el folclore se equivoca. El truco del 62,5 %, que pone html { font-size: 62.5% } para que 1rem sean unos cómodos 10px, se describe a menudo como un peligro para la accesibilidad. No lo es. Un porcentaje multiplica lo que el lector haya elegido: con su ajuste por defecto da 10px, con 24px da 15px, y toda la página escala con él exactamente como debe. Lo que rompe la accesibilidad es la unidad, no el número: px congela, el porcentaje escala.
La tabla de escalado de esta página hace ese cálculo por ti con cinco ajustes de navegador. La única fila que se queda corta es siempre la del píxel fijado.
Por qué no em, y una regla del estándar que conviene saber
em parece intercambiable con rem y se comporta de forma completamente distinta. em es relativo al tamaño de fuente del elemento en el que se usa, así que anidar multiplica. Cuatro niveles de elementos puestos cada uno a 1.25em no salen un 25 % más grandes que la base: salen a 1,25 elevado a cuatro, que son 2,44 veces, y el último es casi dos veces y media el tamaño que creías estar especificando. El panel de em de arriba muestra la cadena con el factor que escribas.
rem no se acumula, porque todos los rem de la página se miden contra la misma raíz. Esa única diferencia es la razón por la que se introdujo la unidad, y es la base entera del consejo habitual: em para lo que de verdad deba escalar con su contexto local, como el relleno de un botón que crece con su etiqueta, y rem para todo lo que quieras que sea previsible.
Hay una regla que conviene conocer porque parece que debería ser circular y no lo es. Cuando rem aparece dentro del propio font-size del elemento raíz, se refiere al valor inicial de esa propiedad y no a sí mismo. Así que html { font-size: 2rem } es el doble del valor inicial y no recursa. Es un rincón que visitarás poco, pero es comportamiento definido y no indefinido.
Límites honestos
Esta herramienta no puede decirte cuál es el tamaño de fuente raíz de un lector concreto. Nada puede, desde fuera: para eso está el ajuste. Lo que sí puede es enseñarte qué le da tu hoja de estilos con cada valor plausible, para que decidas si tu diseño lo aguanta.
Las cifras en rem se muestran con cuatro decimales y no se redondean más, porque 15px con una raíz de 16px son 0,9375rem exactos y 0,94rem es otro tamaño. Cuando un valor no cae en un número limpio, la herramienta lo dice en vez de redondear a la callada, y todo valor que muestra vuelve a convertirse en el píxel del que partiste.
Una cosa queda fuera de su alcance: el zoom del navegador no es lo mismo que una preferencia de tamaño de fuente. El zoom amplía todo, píxeles incluidos, así que una maquetación en px también se agranda con el zoom, y por eso justamente puede parecerle correcta a quien la prueba con zoom y aun así fallarle al lector que cambió su tamaño de texto por defecto. Son dos ajustes distintos y rem solo responde a uno.
¿Por qué es gratis?
Porque una división no nos cuesta nada. Toda la herramienta son unos pocos kilobytes de JavaScript corriendo en tu propio navegador: no se sube ningún valor, no se guarda nada y no hay servidor alguno que pudiera ver lo que estás diseñando.
Así que no hay cuenta, ni registro, ni límite. Convierte los espaciados de un sistema de diseño entero si quieres; es igual de gratis la milésima vez que la primera.