Conversor de Pixel / REM / EM
Convierte entre unidades CSS px, rem y em al instante. Establece un tamaño de fuente base personalizado y obtén una tabla de referencia útil. Conversor gratuito de unidades CSS.
| px | rem | em |
|---|---|---|
| 4px | 0.25rem | 0.25em |
| 8px | 0.5rem | 0.5em |
| 10px | 0.625rem | 0.625em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 28px | 1.75rem | 1.75em |
| 32px | 2rem | 2em |
| 40px | 2.5rem | 2.5em |
| 48px | 3rem | 3em |
| 64px | 4rem | 4em |
Preguntas frecuentes
¿Cuál es la diferencia entre px, rem y em?
px (píxeles) son unidades absolutas — 1px siempre equivale a un píxel físico a escala 1x. rem (root em) es relativo al tamaño de fuente del elemento raíz <html>, normalmente 16px por defecto. em es relativo al tamaño de fuente del elemento padre, lo que puede cascadear y multiplicarse de forma impredecible en elementos anidados.
¿Por qué debería usar rem en lugar de px para los tamaños de fuente?
El uso de rem permite a los usuarios escalar todo el sitio cambiando el tamaño de fuente predeterminado de su navegador. Esto mejora la accesibilidad para usuarios con baja visión. px ignora las preferencias de tamaño de fuente del navegador, mientras que rem y em las respetan. La mayoría de los sistemas de diseño modernos recomiendan rem para tipografía y espaciado.
¿Qué tamaño de fuente base debo usar?
El tamaño de fuente predeterminado del navegador es 16px, que es la base más común. Algunos desarrolladores establecen 62,5% (10px) en el elemento html para facilitar los cálculos (1rem = 10px). Sin embargo, esto puede anular las preferencias del usuario y perjudicar la accesibilidad. La mejor práctica es dejar el tamaño de fuente raíz en el valor predeterminado del navegador y trabajar en rem.