Te llega un diseño de Figma en píxeles y tu CSS trabaja en rem, o lees 0.75rem en un CSS ajeno y quieres saber cuánto mide. Este conversor de rem a px hace la cuenta al momento, en las dos direcciones: 1rem a px son 16 px con la configuración por defecto, 0.75rem son 12 px y 80 px son 5rem. Si tu proyecto usa otro tamaño de fuente raíz, lo cambias y todo se recalcula. En CSS el decimal va con punto, así que aquí los valores rem también.
Qué hace esta herramienta
El Conversor rem a px resuelve la conversión de unidades CSS más habitual: rem ↔ px. Escribe un valor en rem o en px y obtén al instante su equivalente en la otra unidad. Ajusta el tamaño de fuente raíz si tu proyecto no usa los 16 px por defecto.
Es la conversión diaria que todo desarrollador front-end necesita alguna vez: al pasar diseños maquetados con píxeles fijos a código responsive basado en rem, o al leer valores rem en una hoja de estilos y querer saber cuánto miden de verdad en pantalla.
Cómo se usa
- Elige el tamaño de fuente raíz ("Base font size") con el control deslizante (de 8 a 32 px) o con los botones rápidos de 12, 14, 16, 18 y 20 px. Por defecto es 16 px.
- Escribe un valor en rem en el panel "REM → PX" para ver su equivalente en píxeles, o un valor en píxeles en el panel "PX → REM" para verlo en rem. El resultado aparece al momento.
- Pulsa "Copy" para copiar el resultado con su unidad (por ejemplo,
24.0000pxo1.500000rem). - Debajo tienes una tabla de tamaños comunes con su equivalente en píxeles para la raíz que elegiste y la clase aproximada de Tailwind.
• 1rem = 16 px
• 1.5rem = 24 px
• 0.875rem = 14 px
• 2rem = 32 px
Patrón:
px = rem × tamaño de fuente raíz. Siempre.
Por qué 16 px es el valor por defecto
Todos los navegadores principales usan por defecto un tamaño de fuente raíz de 16 px. No es casualidad: es una convención de décadas con raíces en la tipografía impresa. Además, es el tamaño al que la mayoría de la gente lee cómodamente el texto sin hacer zoom.
Puedes cambiar el tamaño de fuente raíz en CSS:
html { font-size: 18px; } /* ahora 1 rem = 18 px */Ojo: fijar la raíz en píxeles, como en ese ejemplo, anula la preferencia de tamaño de letra que el usuario haya configurado en su navegador, que es justo la razón de ser de rem. Si quieres cambiarla, hazlo en porcentaje.
Algunos diseñadores ponen html { font-size: 62.5% } (que equivale a 10 px) como "truco rem" para hacer cuentas de cabeza más fácil: 1rem = 10 px, 1.5rem = 15 px, 2.4rem = 24 px; el valor rem se lee como el de píxeles con la coma corrida. Como va en porcentaje, sigue respetando la preferencia del usuario. Si merece la pena es cuestión de gusto: obliga a redefinir el tamaño del texto en todo el sitio y puede encoger componentes de terceros que esperan 16 px. El conversor acepta cualquier raíz entera entre 8 y 32 px, incluidos los 10 px de este truco.
La pregunta de "¿para qué usar rem?"
El diseño responsive moderno prefiere claramente rem a px para casi todo. Por tres razones:
- Accesibilidad. Las personas que aumentan el tamaño de letra del navegador (un ajuste de accesibilidad habitual entre usuarios con baja visión) ven una interfaz más grande si usas rem. Con px, la interfaz se queda pequeña sin importar su preferencia.
- Escalado global más fácil. ¿Necesitas que toda la interfaz sea un 25 % más grande en la vista de tableta? Cambia la fuente raíz de 16 a 20 px. Todo lo que esté en rem escala. Con px, tendrías que cambiar cada valor a mano.
- Coherencia en el sistema de diseño. Cuando todos los tamaños son múltiplos de la fuente raíz, la interfaz entera tiene ritmo. Mezclar px y rem va en contra de eso.
Los casos en los que px sigue siendo lo correcto: bordes de 1 píxel (una línea de 1 px CSS se mantiene fina y nítida pase lo que pase con el tamaño de letra), sombras cuyo desplazamiento debe ser exactamente de 1-2 píxeles y casos concretos en los que de verdad necesitas precisión de píxel sin importar la fuente del usuario. Ten en cuenta que en pantallas de alta densidad 1 px CSS ocupa 2 o 3 píxeles físicos; px no es lo mismo que píxel del dispositivo.
Tabla de referencia rápida
| rem (con raíz de 16 px) | px | Uso habitual |
|---|---|---|
| 0.5 rem | 8 px | Medio paso de espaciado, separación pequeña |
| 0.75 rem | 12 px | Pies de foto, letra pequeña |
| 0.875 rem | 14 px | Texto secundario, etiquetas de botones |
| 1 rem | 16 px | Texto de cuerpo por defecto |
| 1.125 rem | 18 px | Cuerpo ligeramente destacado |
| 1.25 rem | 20 px | Párrafo de entrada, h4 |
| 1.5 rem | 24 px | h3, unidad de espaciado común |
| 2 rem | 32 px | h2, relleno de componentes grandes |
| 2.5 rem | 40 px | h1 (móvil) |
| 3 rem | 48 px | h1 (escritorio), cabeceras de sección |
Herramientas relacionadas
Para convertir entre más unidades CSS (px, rem, em, vw, vh, pt, etc.), usa el Conversor de Unidades CSS. Para convertir formatos de color CSS, el Conversor de Colores trabaja con HEX/RGB/HSL/HSV. Y para crear animaciones CSS de forma visual, mira el Generador de Animaciones CSS.