¿Qué es el conversor de EM a PX?
EM y PX son dos de las unidades más habituales en CSS para definir el tamaño del texto, los espaciados y la maquetación. El píxel (PX) es una unidad absoluta, mientras que el EM es relativo al tamaño de fuente de su elemento padre. Este conversor traduce los valores entre ambas unidades para que puedas pasar con total seguridad de medidas fijas a medidas escalables al crear sitios web responsive.
Cómo usarlo
Elige la dirección de la conversión —de EM a PX o de PX a EM—, introduce tu valor y el tamaño de fuente base en píxeles. El tamaño de fuente base por defecto en los navegadores es de 16px, y ya viene cargado por ti. Pulsa en calcular y verás el resultado convertido al instante.
La fórmula explicada
La conversión es una sencilla relación de proporcionalidad. Para convertir de EM a PX, multiplicas: $$\text{px} = \text{em} \times \text{base}$$ Para hacerlo a la inversa, divides: $$\text{em} = \text{px} \div \text{base}$$ La base es el tamaño de fuente (en píxeles) respecto al cual es relativo el valor en EM.
Ejemplo práctico
Imagina que quieres convertir 1,5em con un tamaño de fuente base de 16px. Aplicando px = em × base: \(1{,}5 \times 16 = 24\,\text{px}\). A la inversa, \(24\,\text{px} \div 16 = 1{,}5\,\text{em}\). Si tu base fuera de 20px en lugar de 16px, 1,5em equivaldría a 30px.
Preguntas frecuentes
¿Qué tamaño de fuente base debería usar? La mayoría de los navegadores usan 16px por defecto. Si has modificado el font-size del elemento raíz o del padre en tu CSS, utiliza ese valor en su lugar.
¿Es lo mismo EM que REM? No. REM siempre es relativo al tamaño de fuente del elemento raíz (root), mientras que EM es relativo al tamaño de fuente del padre más cercano. Para conversiones con REM, usa el tamaño de fuente raíz como base.
¿Para qué usar EM entonces? Las unidades EM escalan junto con el tamaño de fuente, lo que hace que los diseños sean más accesibles y adaptables cuando los usuarios cambian el tamaño de texto predeterminado.