Conversor de px a rem
Pasar un valor en píxeles a rem es una división sencilla; lo importante en la práctica es el sistema de tamaños que lo rodea. Una escala completa necesita mantener una misma proporción, los titulares responsivos deben crecer con suavidad entre anchos de pantalla y las hojas de estilos antiguas suelen requerir una reescritura segura de muchos valores en px. Esta herramienta reúne esas tareas. Enlaza px, rem, em, pt y porcentaje respecto a un tamaño de fuente raíz que tú eliges: edita cualquiera y los otros cuatro se actualizan al momento. A partir de ahí, la pestaña de escala tipográfica convierte un valor base y una proporción en una serie de pasos en rem, la pestaña de clamp() fluido dibuja el tamaño frente al viewport para mostrar dónde empieza a crecer y dónde se limita, y la pestaña por lotes reescribe los px de un bloque de CSS a rem en una sola pasada. El panel de accesibilidad muestra otro detalle fácil de pasar por alto: cuando un lector sube el tamaño de fuente del navegador, los tamaños en rem crecen con él, mientras que los tamaños en px quedan fijos. Todo el cálculo se ejecuta en tu navegador, y pegar código de producción nunca lo envía a ninguna parte.
- Enlaza px, rem, em, pt y porcentaje en tiempo real respecto a un tamaño de fuente raíz y padre ajustable
- Ve en un panel en vivo cómo rem crece con el tamaño de fuente del lector mientras px se queda quieto
- Convierte un tamaño base y una proporción musical en una escala tipográfica modular, exportada como variables :root
- Construye tipografía fluida con clamp() junto a una gráfica de tamaño frente a viewport y un ancho de vista previa arrastrable
- Reescribe cada px de un bloque CSS a rem de una vez, con opción de conservar los valores finos de 0 y 1px
La fuente raíz define rem (16px por defecto); em y % se rigen por la fuente padre de al lado.
El veloz zorro marrón
Los navegadores dejan al lector fijar su tamaño de fuente por defecto. rem crece con esa elección; px queda fijo. Así se comporta el mismo tamaño cuando el lector sube la raíz.
Resumen
La aritmética de unidades es el paso más llevadero de todo esto. Lo que de verdad te frena es sostener un juego entero de tamaños en una sola proporción, hacer que el tamaño fluido se porte bien y rehacer una hoja de estilos vieja llena de px. Por eso esas tareas están junto a la conversión, a una pestaña de distancia.
- 01
Cinco unidades, una edición
Escribe en cualquiera de px, rem, em, pt o porcentaje y las otras cuatro se recalculan según la raíz y la fuente padre que fijes, cada fila con su propio botón de copiar.
- 02
La accesibilidad, a la vista
El mismo valor aparece en paralelo con raíces de navegador de 16, 20 y 24px: rem crece con el ajuste, px queda fijo y la diferencia se ve sin explicación adicional.
- 03
Una escala tipográfica modular
Fija un tamaño base, elige una proporción —tercera mayor, áurea, la que sea—, decide cuántos pasos suben y bajan, y cada peldaño lista su px y su rem juntos.
- 04
Un generador de clamp() fluido
Da a un viewport mín. y máx. su propio tamaño y obtienes un clamp() en rem, más una gráfica que muestra cómo viaja el tamaño entre esos dos anchos.
- 05
Reescritura de una hoja de estilos
Pega un bloque de CSS y cambia px por rem en una pasada —también al revés— con la opción de conservar valores finos como 0 y 1px.
- 06
Salida lista para pegar
Los pasos de la escala se exportan como variables CSS, clamp() sale en rem y los resultados por lotes conservan tu sangría y tu formato, así que vuelven a su sitio tal cual.
Cómo usarla
Sin salir de la página ni recurrir a una calculadora, pasa de una sola conversión a un sistema de tamaños que se mantiene coherente y trata la accesibilidad como parte del trabajo.
- 01
En Convertir, fija el tamaño de fuente raíz, escribe un valor en cualquier unidad y lee px, rem, em, pt y % a la vez.
- 02
Echa un vistazo al panel de accesibilidad para calibrar cuánto crece el valor para lectores que suben la fuente del navegador.
- 03
Cambia a Escala tipográfica, asienta una base y una proporción, y copia los pasos en rem generados como variables CSS.
- 04
Abre clamp() fluido, da a dos viewports un tamaño mín. y máx., y copia la expresión clamp() que devuelve.
- 05
Ve a CSS por lotes, pega tu hoja de estilos, convierte cada px en rem de una pasada y pégala de vuelta.
Detalles
El tamaño en la web es, en el fondo, una relación entre un valor, una raíz y las propias preferencias del lector. Por eso la herramienta deja cada parte a la vista, en vez de dar por hecho que todo el mundo está clavado en unos 16px fijos.
- Un tamaño de fuente raíz ajustable, para encajar con proyectos que fijan la raíz por encima o por debajo de 16px
- Una entrada de fuente padre aparte, para que em y % se calculen en su contexto y no forzados sobre la raíz
- Cinco unidades sincronizadas, así que edites la que edites, las otras cuatro siguen el paso
- Un panel de accesibilidad que alinea rem frente a px con raíces del lector de 16, 20 y 24px
- Ocho proporciones, de segunda menor a áurea, con lo que una escala tipográfica queda a un clic
- Pasos de la escala exportados como propiedades personalizadas en :root, con el equivalente en píxeles anotado en un comentario
- Un generador de clamp() fluido con gráfica y ancho de vista previa arrastrable, para ver subir el tamaño
- Conversión por lotes de todo un bloque CSS, con opción de conservar 0 y 1px para que sobrevivan los bordes finos
- Un recuento tras cada pasada por lotes, para que ningún valor se te escape
- Conversión, escalas, clamp() y lotes corren en local — nada se sube, nada se guarda
Casos de uso
Convertir px a rem rara vez es algo puntual. Detrás suele haber una escala que mantener, un titular fluido que afinar o una hoja de estilos vieja que modernizar — y cada una tiene aquí su propia pestaña.
-
Pasar un diseño a rem
Traduce los valores en píxeles de un mockup a rem para que el texto y el espaciado sigan los ajustes de fuente del navegador del lector, con la accesibilidad cubierta.
-
Construir una escala tipográfica
Genera un juego coherente de tamaños de fuente a partir de una base y una proporción, y suelta esas variables en rem directamente en un sistema de diseño.
-
Titulares fluidos y responsivos
Afina un titular que pasa con suavidad del móvil al escritorio con clamp(), previsualizando su tamaño exacto en cualquier ancho de viewport antes de publicarlo.
-
Modernizar una hoja de estilos vieja
Pega un CSS antiguo con px escrito a mano por todas partes, conviértelo por lotes a rem y deja los bordes finos y los ceros tal como estaban.
-
Unificar la unidad del equipo
Venga la especificación en px, pt o em, conviértela a la unidad que tu base de código adoptó sin calcular la proporción de cabeza.
-
Explicar rem a un compañero
Abre el panel de accesibilidad en una revisión para mostrar sin rodeos por qué un componente en rem honra el zoom del usuario y uno en px no.
-
Trabajar con una raíz no predeterminada
Algunos proyectos fijan la raíz al 62.5% o a otro valor a propósito; con la raíz expuesta como entrada, el rem sigue saliendo bien.
-
Espaciado y huecos fluidos
Lleva el mismo enfoque de clamp() al relleno, los márgenes y los huecos de la cuadrícula para que el espacio también se estire con el viewport, no solo el texto.
Ver también
Con los tamaños asentados, lo siguiente es la maquetación, así que arma la estructura con el Generador de Flexbox y Grid , y cuando esos elementos ya dimensionados se muevan o hagan transición, dale forma al ritmo con el Generador de curvas Bézier cúbicas para que espaciado, maquetación y movimiento salgan de un mismo sistema pensado.
Buenas prácticas
Unos pocos hábitos mantienen las elecciones de unidad coherentes y accesibles, en lugar de un mosaico de px aquí y rem allá que choca con los ajustes del lector.
- Ve primero a rem en el tamaño de fuente, para que el texto respete el tamaño de fuente y el zoom del navegador del lector.
- Deja la raíz en el valor por defecto del navegador de 16px salvo que tengas un motivo claro para cambiarla.
- Usa rem para el espaciado que deba escalar con el texto; guarda px para bordes finos y detalles fijos.
- Tira de em cuando un valor deba seguir el tamaño de fuente de su propio elemento, como el relleno dentro de un botón.
- Ancla la escala tipográfica en una base y una proporción en vez de calcular a ojo un tamaño por componente.
- Deja el tamaño fluido en manos de clamp() para que los titulares se adapten al viewport y te ahorres un montón de media queries.
- No fijes el tamaño de fuente raíz en px: en algunos navegadores impide que el zoom del usuario surta efecto.
- Redondea los valores en rem con criterio, para que los decimales largos no añadan ruido a la hoja de estilos.
Limitaciones
La herramienta se ciñe a las unidades de longitud CSS y a los sistemas de tamaño que se levantan con ellas, así que unas pocas cosas vecinas quedan fuera a propósito.
- Convierte unidades de longitud CSS. vw y vh dependen del tamaño de pantalla en tiempo de ejecución y solo entran en juego dentro del generador fluido.
- Las conversiones siguen la referencia estándar de 96 DPI, donde CSS pone 1pt en 1.333px y 1in en 96px.
- em y % aquí se calculan contra un único tamaño de fuente padre; la herencia anidada en una página real puede acumularse de otra manera.
- El modo por lotes reescribe los tokens px y rem por reemplazo de texto en lugar de analizar CSS completo, así que revisa las entradas raras o minificadas.
- El panel de accesibilidad demuestra el escalado del tamaño de fuente del navegador; no reemplaza a las comprobaciones de contraste, orden de foco u otras.
- La salida de clamp() cubre la interpolación lineal entre dos viewports y no sustituye a las pruebas en dispositivos reales.
Preguntas frecuentes
Las preguntas que más surgen al convertir px a rem, elegir una unidad y construir en CSS un tamaño que sea a la vez accesible y fluido.
¿Cómo convierto px a rem?
Divide el valor en píxeles por el tamaño de fuente raíz. Con la raíz por defecto de 16px, 24px son 24 ÷ 16 = 1.5rem. Escribe cualquier valor en px en Convertir y el rem aparece al instante, usando la raíz que fijes.
¿Cuál es el tamaño de fuente raíz por defecto para rem?
Los navegadores usan 16px por defecto, así que 1rem equivale a 16px mientras ninguna hoja de estilos cambie la raíz. Esta herramienta también parte de 16px y te deja pasar a otro valor cuando tu proyecto sobrescribe la raíz.
¿Debería usar rem o px para el tamaño de fuente?
Inclínate por rem en el tamaño de fuente. rem crece con el tamaño de fuente y el zoom del navegador del lector, así que el texto sigue siendo accesible, mientras que un tamaño en px ignora esas preferencias. El panel de accesibilidad te pone esa diferencia delante.
¿Cuál es la diferencia entre rem y em?
rem siempre es relativo al tamaño de fuente raíz, así que resulta predecible en toda la página. em es relativo al tamaño de fuente del elemento actual, así que se acumula con el anidamiento. Esta herramienta convierte cada uno con su propia entrada de raíz y de padre.
¿Y cómo convierto rem de vuelta a px?
Multiplica el valor en rem por el tamaño de fuente raíz: con una raíz de 16px, 1.5rem son 24px. Cambia la unidad de origen a rem en Convertir, o elige rem → px en CSS por lotes para pasar un bloque entero de una vez.
¿Cómo hago un tamaño de fuente fluido con clamp()?
Abre clamp() fluido, da a los viewports mínimo y máximo su propio tamaño, y copia el clamp() en rem que genera. La gráfica de al lado dibuja cómo viaja el tamaño entre esos dos anchos.
¿Puedo convertir toda una hoja de estilos de px a rem de una vez?
Sí. Pega tu CSS en CSS por lotes y los valores en px se reescriben a rem en una pasada. Al convertir de px a rem, puedes conservar 0 y 1px, lo que ayuda con los bordes finos que prefieres no escalar.
¿Se sube algo cuando convierto?
No. La conversión, la generación de escalas, el cálculo de clamp() y la reescritura por lotes ocurren en tu navegador, así que pegar CSS de producción o valores de diseño sin publicar lo mantiene en local.
Herramientas relacionadas
Las unidades son la base del resto de la maquetación. Con el tamaño definido, pasa a organizar la estructura y ajustar el movimiento para que toda la interfaz siga una misma escala.