🎨 Diseño Web y CSS
Conversor de px a rem
Convierte entre px y rem con cualquier font-size base (por defecto 16px). REM es la unidad recomendada para tipografía y espaciado en diseño accesible.
Error:
¿Cuándo usar px, rem o em?
- rem (root em): relativo al font-size del elemento :root (html). Recomendado para tipografía y espaciado por ser escalable con las preferencias del usuario.
- em: relativo al font-size del elemento padre. Útil para padding/margin en componentes que deben escalar con su tipografía.
- px: valor absoluto. Recomendado para borders, outline-offset y valores mínimos que no deben escalar.
Tabla de conversión con base 16px
| px | rem |
|---|---|
| 8px | 0.5rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
| 64px | 4rem |
Preguntas frecuentes
¿Por qué se recomienda rem en lugar de px para la tipografía?
Si el usuario ha cambiado el tamaño de fuente en su navegador (por accesibilidad), px ignora esa preferencia. rem respeta la configuración del usuario, lo cual es mejor práctica de accesibilidad (WCAG).
Herramientas relacionadas
Generador de variables CSS (Custom Properties)
Genera un sistema de design tokens CSS con variables de colores, tipografía, espaciado, sombras y bo…
Usar herramienta →Analizador de contraste de colores WCAG
Comprueba si la combinación de color de texto y fondo cumple los estándares de accesibilidad WCAG 2.…
Usar herramienta →