Convertir px a rem Pixels ↔ Root em Gratis En línea Seguro

Por qué los diseñadores y desarrolladores convierten px a rem

Las herramientas de diseño hablan en píxeles. Una maqueta dice que el título mide 32 px, que el espacio entre secciones es de 48 px y que el botón lleva 16 px de relleno. Las hojas de estilo bien escritas hablan en rem. El hueco entre esos dos lenguajes es donde se sitúa esta página: usted escribe un tamaño en píxeles y lo lee en rem, de modo que el número que ponga en el CSS signifique lo que quiso decir el diseñador. Convertir px a rem es un gesto pequeño, pero se repite cientos de veces en la vida de un sitio web, y una base equivocada convierte una maquetación cuidada en otra ligeramente errónea en todas partes a la vez.

El motivo para preocuparse por el rem es la accesibilidad y la flexibilidad. Un rem es un múltiplo del tamaño de letra de la raíz, que el navegador fija en 16 px salvo que se indique otra cosa y que el lector puede cambiar en sus ajustes. Una maquetación escrita en rem conserva por tanto su forma cuando una persona con poca vista aumenta el tamaño de texto predeterminado: la tipografía, los espacios y las cajas crecen juntos. Una maquetación escrita en píxeles no lo sigue, y el lector que pidió un texto mayor recibe letras más grandes en cajas apretadas, o nada en absoluto. Por eso casi todas las guías de estilo modernas dicen lo mismo: use rem para la tipografía y los espaciados.

Esta página hace la aritmética en su navegador. No se sube nada, y aquello de lo que depende la conversión, el tamaño base, está escrito más abajo y consta en un campo que usted puede cambiar, en lugar de darse por supuesto a sus espaldas. A continuación encontrará la fórmula, la tabla de tamaños habituales, las razones por las que importa la base, las trampas en las que caen quienes convierten px a rem con prisa y una breve guía para usar el resultado en hojas de estilo reales.

La fórmula y la base

El rem es igual a los px divididos entre la base

La fórmula es una sola división: rem = px ÷ base. Con la base habitual de 16 px, un tamaño de 24 px pasa a ser 1.5 rem, 32 px pasa a ser 2 rem y 8 px pasa a ser 0.5 rem. La página muestra el resultado a medida que usted escribe y muestra también la base que ha usado, de modo que la línea 24 px = 1.5 rem (16 px) le dice exactamente qué se ha supuesto.

De dónde sale el 16

La base empieza en 16 px porque es lo que usa el navegador cuando nadie dice otra cosa. No es una ley de la web; es el valor por omisión de los valores por omisión, y lleva décadas estable. Si su CSS nunca toca el tamaño de letra de la raíz, 1 rem equivale a 16 px para la mayoría de los visitantes. Si lo toca, la base es la que usted haya fijado.

El truco del 62.5 % y por qué lo usa la gente

Algunas hojas de estilo fijan el tamaño de la raíz en el 62.5 %, lo que hace que 1 rem equivalga a 10 px en un navegador con la configuración por omisión, de modo que 24 px son simplemente 2.4 rem y la aritmética se hace de cabeza. Funciona, pero tiene un coste: toda la página depende ahora de ese porcentaje, y cualquier componente que espere una base de 16 saldrá demasiado pequeño. Si su proyecto lo hace, escriba 10 en el campo de la base de esta página y todas las cifras coincidirán con su CSS.

Lo que la conversión conserva y lo que no puede saber

Conserva la proporción

Un rem es el tamaño de letra de la raíz, sea cual sea, de modo que una maquetación escrita en rem conserva su forma cuando ese tamaño cambia. Esa es toda la razón de escribirla así. Cuando convierte px a rem, el número que obtiene es la misma proporción que tenía el valor en píxeles con la base que usted eligió, expresada ahora de una manera que escala.

No puede conocer los ajustes de su lector

El número depende por completo de la base. Si su CSS fija otro tamaño en el elemento raíz, o el lector ha cambiado el tamaño de texto predeterminado en su navegador, cosa que muchas personas hacen y están en su derecho de hacer, entonces 1 rem no equivale a 16 px para él. La cifra de la página es correcta solo para la base que figura en el campo. No es un defecto de la herramienta, sino la naturaleza de la unidad: es relativa, y una unidad relativa no tiene un valor fijo al que convertir.

El redondeo

Dividir entre 16 da resultados limpios para muchos tamaños habituales (16, 24, 32, 48, 64) y decimales periódicos para otros (10 px son 0.625 rem; 13 px son 0.8125). La página da tantas cifras como necesita el número, y usted decide cuántas conserva en la hoja de estilo. Los navegadores manejan sin problema los decimales largos, pero un valor redondeado como 0.8125rem es más fácil de leer y de mantener que uno con diez cifras.

Tamaños habituales

La tabla al pie de la página

Debajo del conversor hay una tabla de tamaños habituales: 8 px son 0.5 rem, 10 px son 0.625, 12 px son 0.75, 14 px son 0.875, 16 px son 1, 18 px son 1.125, 20 px son 1.25, 24 px son 1.5, 32 px son 2, 48 px son 3 y 64 px son 4. Son los tamaños que más aparecen en las escalas tipográficas y en los sistemas de espaciado, y tenerlos a la vista ahorra una conversión.

Una escala construida sobre rem

Un buen hábito es elegir un conjunto pequeño de valores en rem y reutilizarlos: 0.5, 1, 1.5, 2, 3 y 4 para los espaciados, y 0.875, 1, 1.25, 1.5, 2 para la tipografía. Los diseñadores llaman a esto una escala, y mantiene la coherencia visual de un sitio. Cuando una maqueta le da un valor extraño, como 22 px, use el conversor para ver que son 1.375 rem y decida después si redondea al valor más cercano de su escala.

Cómo convertir px a rem aquí

Escriba el valor en píxeles

Introduzca el tamaño en píxeles en el primer campo. Se admiten decimales, de modo que 13.5 px funciona igual que 14.

Compruebe la base

Déjela en 16 si su CSS no cambia el tamaño de la raíz. Cámbiela si lo cambia. El resultado se actualiza a medida que escribe.

Copie el valor en rem

Lea la cifra y úsela en su CSS, con la unidad escrita detrás: font-size: 1.5rem. No olvide la unidad, ya que un número sin ella significa otra cosa en la mayoría de las propiedades.

De dónde vienen estas unidades

El píxel de CSS no es el píxel de su pantalla

Cuando las pantallas dejaron de tener una densidad previsible, una página medida en píxeles reales se convirtió en una página que encogía a medida que las pantallas se afinaban. Por eso el píxel de CSS se redefinió como una longitud de referencia: alrededor de 1/96 de pulgada, visto a una distancia cómoda de lectura. Todo lo demás de esta página se apoya en eso. El em es más antiguo que la web: en la tipografía de plomo era el ancho de un bloque fundido, llamado así por la M mayúscula, y en CSS significa el tamaño de letra vigente, razón por la cual cambia al anidar elementos. El rem se añadió precisamente para escapar de eso: es el em del elemento raíz y nunca se acumula.

Por qué existe el rem

Antes del rem, los desarrolladores dimensionaban todo en em o en porcentajes, y los elementos anidados se multiplicaban entre sí: una lista dentro de una lista dentro de una lista encogía o crecía a cada nivel. El rem les dio una única referencia fija, la raíz, y eliminó la acumulación. Si quiere comparar ambos, convierta px a em y vea cómo el mismo valor en píxeles depende del elemento en el que se encuentra.

Dónde se encuentra el rem en la práctica

Tipografía

El texto del cuerpo suele ser de 1 rem, los títulos de 1.25 a 3 rem y la letra pequeña de 0.75 a 0.875 rem. Escribirlos en rem permite que un lector amplíe toda la página cambiando un solo ajuste del navegador.

Espaciado y maquetación

Los márgenes, el relleno y los huecos en rem mantienen el espacio en blanco proporcional a la tipografía. Cuando el texto crece, el espacio que lo rodea crece también, y la maquetación sigue equilibrada en lugar de meter letras mayores en las cajas de antes.

Consultas de medios

Los puntos de corte escritos en em o en rem responden al tamaño de texto del lector, de modo que una maquetación pasa antes a su forma estrecha para quien ha ampliado el texto. Es un refinamiento que conviene conocer, aunque los píxeles siguen siendo habituales en los puntos de corte.

Lo que conviene dejar en píxeles

Los bordes finos, las sombras y los iconos delgados suelen quedar mejor con tamaños fijos en píxeles, porque un borde de 0.0625rem que crece hasta 0.1rem con un texto grande no ayuda a nadie. Use rem para lo que debe escalar y píxeles para lo que no.

Trampas al convertir px a rem

Olvidar que la base no siempre es 16

Si un proyecto fija html { font-size: 62.5% }, o usa un tamaño de raíz fluido, el factor es distinto. Compruebe la hoja de estilo antes de fiarse de un número de cualquier conversor, incluido este.

Convertir el propio tamaño de la raíz

Si fija el tamaño de la raíz en píxeles, se anula el ajuste del navegador del lector y se pierde la ventaja del rem. Fije la raíz como porcentaje, o déjela como está, para que se respete la preferencia del usuario.

Usar rem dentro de un componente que fija su propio tamaño de letra

El rem se refiere siempre a la raíz, no al componente. Un botón con un tamaño de letra de 14 px y un relleno de 1rem tiene un relleno que no sigue el texto del propio botón. Si quiere un espaciado que siga el texto del elemento, esa es tarea del em.

Mezclar unidades sin un plan

Una hoja de estilo que usa px para un margen, rem para el siguiente y em para un tercero es difícil de razonar. Elija una regla: rem para la tipografía y los espaciados, píxeles para los bordes y las sombras, y manténgala.

Preguntas habituales antes de convertir

¿Cuántos rem son 16 px?

Uno, en un navegador con la configuración por omisión. Dieciséis dividido entre la base de dieciséis.

¿Es mejor el rem que el px?

Para la tipografía y los espaciados, es la mejor opción en la mayoría de los proyectos, porque respeta los ajustes del lector. Los píxeles siguen siendo lo adecuado para lo que no debe escalar.

¿Por qué mi resultado difiere del de otro sitio?

Probablemente por una base distinta. Revise el campo: algunas herramientas suponen 10, otras 16, otras 14. Esta página muestra la base junto al resultado.

¿Tengo que redondear?

No. Los navegadores aceptan decimales largos. Redondee solo por legibilidad.

¿Se sube mi número?

No. La aritmética se ejecuta en su navegador y no se envía nada a ninguna parte.

¿Cómo se hace el camino de vuelta?

Con rem a px, que multiplica en lugar de dividir.

Cómo elegir bien al convertir px a rem

Decida una base para el proyecto y respétela

Sea cual sea la que elija, convierta esa elección en una decisión y déjela por escrito en la documentación del proyecto. Un equipo que discrepa sobre la base produce componentes que no encajan entre sí.

Convierta en la fase de diseño, no en el último momento

Si convierte px a rem mientras lee la maqueta, incorpora la escala al diseño y detecta pronto los valores raros. Si lo hace al final, los descubre como un montón de números incoherentes.

Considere también las unidades de la ventana

Para los títulos que deben llenar la pantalla, px a vw expresa un tamaño como una parte de la ventana. Escala de forma distinta al rem, y a menudo se combinan.

Hábitos que facilitan convertir px a rem

Lleve una tabla de conversión en la cabeza

Con una base de 16, unos pocos puntos de referencia cubren la mayor parte del trabajo: 4 px son 0.25 rem, 8 px son 0.5, 12 px son 0.75, 16 px son 1, 24 px son 1.5 y 32 px son 2. Cuando una maqueta le da un valor intermedio, puede estimarlo antes de convertir px a rem en la página y usar el conversor solo para confirmar. Al cabo de unas semanas se sabrá la tabla sin mirarla.

Deje que el sistema de diseño haga el trabajo

Si su equipo mantiene tokens de diseño, como spacing-2 o font-lg, guárdelos en rem una sola vez y deje que todos se refieran a los nombres. Así nadie necesita volver a convertir px a rem, y un cambio de escala se hace en un solo lugar. El conversor es la herramienta que se usa al escribir los tokens, no al usarlos.

Escriba el valor en píxeles en un comentario

Una línea como padding: 1.25rem; /* 20px */ cuesta unos pocos caracteres y ahorra al siguiente desarrollador tener que buscar una calculadora. También deja constancia de la base que supuso, lo que ayuda si más adelante cambia el tamaño de la raíz.

Pruebe con un ajuste del navegador cambiado

La prueba de que una página está construida en rem es que sobrevive a un tamaño de texto predeterminado mayor. Cambie el ajuste en su navegador, recargue y mire. Los componentes que se rompen son aquellos en los que algo se dejó en píxeles o en los que una altura fija cortó el texto.

Conversores relacionados

La misma familia de herramientas cubre las conversiones vecinas. Para volver a píxeles, use rem a px. Para tamaños relativos al elemento, están px a em y em a px, y para tamaños relativos a la pantalla, px a vw y vw a px. Si su trabajo incluye colores además de tamaños, HEX a RGB, RGB a HEX y HEX a HSL se ocupan de las notaciones de la hoja de estilo.

Un ejemplo práctico

Supongamos que una maqueta da un título de tarjeta de 28 px, un relleno de tarjeta de 20 px y un hueco de 12 px entre tarjetas, y que su proyecto usa la base predeterminada de 16 px. Escribe 28 y lee 1.75 rem, escribe 20 y lee 1.25 rem, escribe 12 y lee 0.75 rem. En la hoja de estilo escribe font-size: 1.75rem, padding: 1.25rem y gap: 0.75rem. Un visitante que sube el tamaño de texto del navegador a 20 px ve la misma tarjeta, ampliada en una cuarta parte: el título pasa a 35 px, el relleno a 25 px y el hueco a 15 px, todo en proporción. Si hubiera escrito píxeles, el título se habría quedado en 28 y la tarjeta habría quedado mal.

Una lista de comprobación breve

Antes de convertir

Averigüe la base que usa su CSS. Decida qué tamaños deben escalar y cuáles no.

Mientras convierte

Escriba el valor en píxeles, compruebe la base que se muestra junto al resultado y copie la cifra en rem con su unidad.

Después de convertir

Pruebe la página con un tamaño de texto predeterminado mayor en el navegador y busque las cajas que ya no contienen su texto.

Errores frecuentes

Suponer que 1 rem son siempre 16 px

Solo lo es cuando nadie ha cambiado el tamaño de la raíz, y algunos lectores lo han hecho. Escriba la maquetación de modo que funcione también con otros tamaños.

Fijar el tamaño de la raíz en píxeles

Anula la elección del lector. Use un porcentaje, o no lo fije.

Convertirlo todo

No todos los tamaños deben escalar. Deje los bordes y las sombras en píxeles.

Sus números se quedan en su dispositivo

El cálculo se hace en local. Su propio navegador usa los valores y no se envía nada a ninguna parte. No hay nada que borrar después ni una cuenta que crear. Esa es la manera sencilla de convertir px a rem.

Resumen

Para convertir px a rem aquí, escriba el tamaño en píxeles y léalo al instante en rem, con la fórmula rem = px ÷ base. La base empieza en 16 px, el valor predeterminado de un navegador, y puede cambiarla para que coincida con su CSS. La conversión conserva la proporción: una maquetación escrita en rem conserva su forma cuando cambia el tamaño de letra de la raíz. No puede conocer los ajustes de su lector, así que la cifra es correcta solo para la base que figura en el campo. Los tamaños habituales de la tabla bajo el conversor, de 8 px con 0.5 rem a 64 px con 4 rem, le ahorran repetir la aritmética. No se sube nada.