Conversor de PX a REM

Divide el valor en píxeles entre el tamaño de fuente raíz: rem = px ÷ raíz. Con la raíz predeterminada del navegador de 16px, 16px ÷ 16 = 1rem, 24px ÷ 16 = 1.5rem y 40px ÷ 16 = 2.5rem. Escribe cualquier valor en px en el convertidor de arriba y el campo rem se actualiza al instante — sin necesidad de hacer cálculos. Para el truco del 62.5% (raíz de 10px), simplemente divide entre 10: 24px = 2.4rem.

Multiplica el valor rem por el tamaño de fuente raíz: px = rem × raíz. Con la raíz predeterminada de 16px, 1rem × 16 = 16px, 1.5rem × 16 = 24px y 0.875rem × 16 = 14px. Edita el campo rem en el convertidor y el campo px se actualiza de inmediato. El convertidor es totalmente bidireccional — introduce el valor que conoces y los demás se calculan automáticamente.

1rem equivale al tamaño de fuente raíz (html). En todos los navegadores principales — Chrome, Safari, Firefox, Edge — ese valor por defecto es 16px, por lo que 1rem = 16px a menos que se haya modificado la raíz. Si estableces la raíz en 10px (el truco del 62.5%), 1rem pasa a ser 10px. Los usuarios también pueden cambiar el tamaño de texto predeterminado de su navegador en los ajustes, lo que altera a cuántos px equivale 1rem para ellos — por eso rem es mejor que px para tamaños de fuente accesibles.

0.875rem equivale a 14px con la raíz estándar de 16px (0.875 × 16 = 14). Es uno de los valores rem más usados en los frameworks de CSS — la clase text-sm de Tailwind CSS es 0.875rem (14px). Con una raíz de 10px (el truco del 62.5%), 0.875rem equivaldría a 8.75px.

px es una unidad absoluta y fija — 16px siempre son 16 píxeles sin importar la configuración del usuario ni el tamaño de pantalla. rem es relativa: es un múltiplo del tamaño de fuente del elemento raíz (html), por lo que 1rem = 16px por defecto, pero escala hacia arriba si el usuario aumenta el tamaño de texto base de su navegador en la configuración de accesibilidad. Esto hace que los diseños basados en rem sean más accesibles — el texto crece proporcionalmente cuando el usuario solicita texto más grande, mientras que el texto en px permanece bloqueado y puede volverse demasiado pequeño para leer.

px es fijo. rem es relativo al tamaño de fuente raíz (html) — un ancla consistente para toda la página. em es relativo al tamaño de fuente de su propio elemento padre, por lo que se acumula cuando los elementos están anidados: un padre a 20px con un hijo a 1.5em da 30px para el hijo. Si ese mismo hijo se establece a 1.5rem, son 24px (1.5 × la raíz de 16px), independientemente del padre. Con una raíz de 16px y sin anidamiento, 16px, 1rem y 1em son todos iguales — la diferencia solo aparece cuando cambian los tamaños de fuente de los padres.

rem es mejor para tamaños de fuente desde el punto de vista de la accesibilidad. Cuando alguien aumenta el tamaño de texto predeterminado de su navegador (una necesidad habitual en usuarios con discapacidad visual), todos los tamaños de fuente en rem escalan con él, mientras que los valores en px permanecen fijos. La pauta 1.4.4 de WCAG 2.1 (Cambio de tamaño del texto) exige que el texto sea redimensionable hasta un 200% sin pérdida de funcionalidad — usar rem lo hace sencillo. Usa px solo para elementos que no deben escalar, como bordes de 1px o iconos de tamaño fijo.

El truco del 62.5% establece el tamaño de fuente raíz (html) al 62.5% — que con el valor predeterminado del navegador de 16px equivale a 10px. Esto hace que la aritmética con rem sea trivialmente sencilla: 1.6rem = 16px, 2.4rem = 24px, 3.2rem = 32px. Cada valor rem se corresponde limpiamente con un múltiplo de 10. Cambia el tamaño de fuente raíz a 10px usando el preset de aquí y el convertidor y la tabla de referencia se recalculan al instante para que veas la correspondencia limpia. La contrapartida es que tu tamaño raíz sobreescribe el valor predeterminado del navegador del usuario, lo que reduce ligeramente la accesibilidad.

Con la raíz estándar de 16px: 10px = 0.625rem, 12px = 0.75rem, 13px = 0.8125rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 28px = 1.75rem, 32px = 2rem, 40px = 2.5rem, 48px = 3rem. La tabla de referencia de la herramienta lista todos los valores comunes y te permite copiar cada uno con un solo clic — es más rápido que calcular manualmente cada vez.

Tailwind CSS usa unidades rem para la mayoría de los valores de tamaño por defecto, con una raíz de 16px. La escala de espaciado de Tailwind: 1 unidad = 0.25rem = 4px. Así, space-4 = 1rem = 16px, space-6 = 1.5rem = 24px, space-8 = 2rem = 32px. Para tipografía: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px), text-xl = 1.25rem (20px), text-2xl = 1.5rem (24px). Este convertidor te permite comprobar rápidamente cualquier valor personalizado en px frente al sistema basado en rem de Tailwind.

Sí, completamente. El convertidor se ejecuta íntegramente en JavaScript en tu navegador — no hay comunicación con ningún servidor, ni llamadas a APIs, ni datos que se suban. Funciona sin conexión una vez que la página se ha cargado. Los valores que escribes nunca salen de tu dispositivo. Puedes guardarlo en favoritos y usarlo en un vuelo, en un túnel o donde sea que estés programando sin acceso a internet. Nada se almacena en ningún servidor.

Escribe cualquier valor en el campo Tamaño de fuente raíz — o usa los botones de preset para 16px (valor predeterminado del navegador) o 10px (truco del 62.5%). Todas las conversiones de rem, em y pt en la tabla y la entrada activa se recalculan al instante para ajustarse a tu nueva raíz. Si tu CSS establece html { font-size: 18px; }, introduce 18 como raíz y todas las conversiones serán precisas para la escala de tu proyecto específico.