Conversor de PX a EM

Esta herramienta convierte valores en píxeles (px) a unidades em para CSS. A diferencia de rem, la unidad em es relativa al font-size del propio elemento padre (o el más cercano), por lo que la conversión siempre depende del contexto donde la coloques. Define el tamaño de fuente base para que coincida con tu elemento padre real, escribe un valor en píxeles y el equivalente en em aparece al instante, listo para copiar en tu hoja de estilos.

Con la base predeterminada de 16px, 16px = 1em. Cambia el tamaño de fuente base en los ajustes para que coincida con el contexto del padre donde se usará el valor.

Cuándo Usar EM

Dimensionar Componentes

Crea botones, insignias y tarjetas cuyo relleno y espaciado escalan juntos al cambiar el font-size del componente.

Espaciado Autoescalable

Vincula márgenes y relleno al tamaño del texto local para que un solo cambio de font-size redimensione todo el bloque.

Ritmo Tipográfico

Expresa interlineado, espaciado entre letras y sangría en relación con la fuente actual para un ritmo vertical coherente.

Cómo Convertir PX a EM

1

Define el Tamaño de Fuente del Padre

Introduce el font-size del elemento padre en el campo Tamaño de Fuente Base (16px por defecto). Cada resultado en em se calcula contra este valor.

2

Introduce un Valor en Píxeles

Asegúrate de que la pestaña de unidad px esté seleccionada y escribe el valor en píxeles a convertir. El equivalente en em se actualiza mientras escribes.

3

Lee el Resultado

El valor en em aparece al instante en el panel de resultados, junto a los equivalentes en rem y px para comparar rápidamente. Ajusta los decimales según la precisión que necesites.

4

Copia a tu CSS

Haz clic en el botón de copiar junto al resultado en em y pégalo directamente en tu hoja de estilos, sin divisiones manuales.

La fórmula: em = px ÷ font-size del padre. Por ejemplo, 24px ÷ 16px = 1.5em.

EM vs REM: Conoce la Diferencia

Ambas son unidades relativas, pero hacen referencia a cosas distintas. La diferencia clave es el efecto acumulativo: los valores em se acumulan al anidar elementos, mientras que rem siempre apunta a la raíz.

EM

Relativo al padre

Basado en el font-size del padre más cercano
Se acumula entre elementos anidados
Ideal para componentes autónomos
El contexto cambia el valor calculado

REM

Relativo a la raíz

Basado en el font-size de la raíz (html)
Nunca se acumula: siempre predecible
Ideal para diseño y tipografía global
El mismo valor en toda la página

Cuidado con la acumulación. Si un padre está en 1.25em y un hijo también usa 1.25em, el hijo se renderiza a 1.25 × 1.25 = ~1.56× el tamaño del abuelo. Confirma siempre contra qué contexto padre se resuelve tu valor em.

Conversiones Comunes de PX a EM

Valores de referencia con un padre de 16px. Cambia la base en la herramienta para recalcular en cualquier otro contexto.

Píxeles	EM (padre 16px)	Uso típico
12px	`0.75em`	Leyendas, letra pequeña
14px	`0.875em`	Texto secundario, etiquetas
16px	`1em`	Texto base del cuerpo
20px	`1.25em`	Párrafos destacados, subtítulos
24px	`1.5em`	Títulos de sección
32px	`2em`	Títulos de página

Preguntas Frecuentes

¿Qué es exactamente el tamaño de fuente del padre en esta herramienta?

Es el font-size del elemento al que tu valor em será relativo. El navegador calcula em contra el font-size del ancestro más cercano, así que define este campo con el valor que ese padre tenga en tu CSS real. El valor predeterminado de 16px coincide con el típico valor por defecto del navegador para el body.

¿Cómo se convierte px a em?

Divide el valor en píxeles entre el tamaño de fuente del padre: em = px ÷ padre. Con un padre de 16px, 24px se convierte en 1.5em. La herramienta hace el cálculo al instante y te permite controlar cuántos decimales se muestran.

¿Debo usar em o rem?

Usa em cuando quieras que el dimensionamiento escale con el componente local, como un relleno que crece con el texto del botón. Usa rem para diseño y tipografía global donde quieras un valor predecible en toda la página. Muchos diseños combinan ambos.

¿Por qué mis valores em parecen multiplicarse al anidar?

Es el efecto acumulativo. Como cada em es relativo a su padre, anidar elementos que definen un font-size en em multiplica el efecto. Si necesitas valores que permanezcan constantes sin importar la profundidad de anidación, usa rem en su lugar.

¿La conversión se hace en mi navegador?

Sí. El cálculo se ejecuta totalmente en el cliente mientras escribes. Nada se envía a un servidor, por lo que funciona al instante y sin conexión una vez cargada la página.