Convertidor de PX a REM
Convierte valores de píxeles a REM y viceversa al instante. Establece cualquier tamaño de fuente base, visualiza una tabla de conversión completa y copia propiedades CSS personalizadas o una tabla de texto plano para tu hoja de estilos.
Convertidor PX ↔ REM
Ingresa un valor en cualquier campo — ambos se actualizan en vivo según el tamaño de fuente base.
Píxeles (px)
REM
CSS de tamaño de fuente raíz
:root { font-size: 16px; }
Valores comunes en base 16px
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 96px | 6rem |
Tus datos permanecen en tu navegador — no se envía ningún dato a ningún servidor.
¿Qué es REM y por qué usarlo?
REM (root em) es una unidad CSS relativa al tamaño de fuente del elemento raíz (<html>). Porque se escala con la preferencia de tamaño de fuente del navegador del usuario, REM es preferible a los píxeles para tipografía, espaciado y diseño — hace que los sitios sean más accesibles y fáciles de mantener. La base predeterminada del navegador es 16px, por lo que 1rem = 16px a menos que se anule.
El truco del 62.5%
Establecer :root { font-size: 62.5%; } hace que 1rem sea igual a 10px (62.5% de 16px), lo que simplifica la aritmética mental — 1.6rem = 16px, 2.4rem = 24px, y así sucesivamente. Esta herramienta te permite ingresar cualquier base personalizada para obtener una vista previa de los valores rem de tu diseño de un vistazo.
Cómo usar
- Establece el tamaño de fuente base (predeterminado 16px, coincidiendo con la mayoría de navegadores).
- Escribe un valor en píxeles — el equivalente en REM se actualiza al instante.
- O escribe un valor en REM — el equivalente en píxeles se actualiza al instante.
- Desplázate hacia abajo para ver la tabla de conversión de tamaños comunes.
- Copia la tabla como propiedades CSS personalizadas o texto plano para tu proyecto.
Toda conversión se ejecuta en tu navegador — nada se envía a ningún servidor.
Preguntas Frecuentes
- ¿Cuál es el tamaño de fuente predeterminado del navegador?
- La mayoría de navegadores tienen un tamaño de fuente raíz predeterminado de 16px, lo que significa que 1rem = 16px. Los usuarios pueden cambiar esto en la configuración de su navegador por accesibilidad, que es exactamente por qué rem es preferible a valores px fijos.
- ¿Cómo convierto px a rem mentalmente?
- Divide el valor en píxeles por el tamaño de fuente base. Con la base predeterminada de 16px: 24px ÷ 16 = 1.5rem. Si usas el truco del 62.5% (base = 10px): 24px ÷ 10 = 2.4rem.
- ¿Debo usar rem o em?
- REM es relativo al elemento raíz y es consistente en todo tu documento. EM es relativo al elemento padre más cercano, lo que puede acumularse inesperadamente. REM es generalmente preferible para tamaños de fuente y espaciado; EM puede ser útil para dimensionamiento con alcance de componente.
- ¿Esta herramienta maneja valores no enteros?
- Sí. Puedes ingresar decimales como 14.5px o 0.875rem y el convertidor los manejará con precisión.