Pasar la maqueta a código
El diseño da 24 píxeles de espaciado y la hoja de estilos debe recibir 1,5em. Es el trayecto más frecuente del trabajo con interfaces.
Convierte píxeles a em con cualquier tamaño del padre
Con el valor predeterminado del navegador, 24 píxeles son 1,5em y 14 píxeles son 0,875em. Escribe la medida de la maqueta, ajusta el tamaño de fuente del padre y pasa el resultado directamente a la hoja de estilos.
Loading tool editor...
PUBLICIDAD
¿Para qué convertir píxeles a em?
El píxel pasa a em con una sola división: el número de píxeles entre el tamaño de fuente del padre. Con el valor predeterminado del navegador ese padre tiene 16 px, así que 24 píxeles dan 1,5em y 14 píxeles dan 0,875em. La unidad em se refiere al tamaño de texto del elemento que la contiene [1].
Es el sentido más frecuente del día a día. La maqueta llega con medidas en píxeles, porque así cuentan los programas de diseño, y la hoja de estilos se escribe en em para que la medida siga al tamaño de texto de su lugar en la maquetación.
El resultado lleva cuatro decimales, porque con un padre de 16 px un solo píxel es exactamente 0,0625em y los tamaños de texto dan cifras como 0,875 o 1,125.
Más abajo encontrarás una tabla con 30 medidas a tres tamaños del padre, una tabla de ocho situaciones con la respuesta sobre qué unidad elegir y dos lugares donde el em gana al rem. El camino inverso lo cubre el convertidor de em a píxeles.
¿Cómo calcular píxeles a em a mano? Fórmula y ejemplo
La fórmula tiene una sola operación: em = píxeles ÷ tamaño de fuente del padre. Es la inversa de la multiplicación que convierte em en píxeles.
Ejemplo con un espaciado de 20 px: con un padre de 16 sale 20 ÷ 16 = 1,25em. Esa misma medida dentro de una tarjeta con texto de 14 px da alrededor de 1,4286em, y en un titular de 20 px da exactamente 1em.
Las medidas de una maqueta suelen dar fracciones: 18 píxeles son 1,125em, 22 píxeles son 1,375em y 30 píxeles son 1,875em. Las tres son exactas y así se escriben en la hoja de estilos.
Si una medida debe dar el mismo resultado en todo el documento al margen del anidamiento, ese mismo píxel lo escribe en rem el convertidor de píxeles a rem. La diferencia entre ambas unidades la resuelve la tabla de la página del convertidor de em a píxeles.
PUBLICIDAD
¿Cuántos em tienen las medidas habituales en píxeles?
| Valor en píxeles | Padre 16 px (predeterminado) | Padre 14 px (tarjeta) | Padre 20 px (titular) |
|---|---|---|---|
| 1 px | 0,0625 em | 0,0714 em | 0,05 em |
| 2 px | 0,125 em | 0,1429 em | 0,1 em |
| 4 px | 0,25 em | 0,2857 em | 0,2 em |
| 6 px | 0,375 em | 0,4286 em | 0,3 em |
| 8 px | 0,5 em | 0,5714 em | 0,4 em |
| 10 px | 0,625 em | 0,7143 em | 0,5 em |
| 12 px | 0,75 em | 0,8571 em | 0,6 em |
| 13 px | 0,8125 em | 0,9286 em | 0,65 em |
| 14 px | 0,875 em | 1 em | 0,7 em |
| 15 px | 0,9375 em | 1,0714 em | 0,75 em |
| 16 px | 1 em | 1,1429 em | 0,8 em |
| 18 px | 1,125 em | 1,2857 em | 0,9 em |
| 20 px | 1,25 em | 1,4286 em | 1 em |
| 21 px | 1,3125 em | 1,5 em | 1,05 em |
| 22 px | 1,375 em | 1,5714 em | 1,1 em |
| 24 px | 1,5 em | 1,7143 em | 1,2 em |
| 26 px | 1,625 em | 1,8571 em | 1,3 em |
| 28 px | 1,75 em | 2 em | 1,4 em |
| 30 px | 1,875 em | 2,1429 em | 1,5 em |
| 32 px | 2 em | 2,2857 em | 1,6 em |
| 36 px | 2,25 em | 2,5714 em | 1,8 em |
| 40 px | 2,5 em | 2,8571 em | 2 em |
| 44 px | 2,75 em | 3,1429 em | 2,2 em |
| 48 px | 3 em | 3,4286 em | 2,4 em |
| 56 px | 3,5 em | 4 em | 2,8 em |
| 64 px | 4 em | 4,5714 em | 3,2 em |
| 72 px | 4,5 em | 5,1429 em | 3,6 em |
| 80 px | 5 em | 5,7143 em | 4 em |
| 96 px | 6 em | 6,8571 em | 4,8 em |
| 128 px | 8 em | 9,1429 em | 6,4 em |
Los tres tamaños del padre cubren tres situaciones: 16 px es lo predeterminado del navegador, 14 px lo encuentras en tarjetas y tablas de interfaz, y 20 px en un titular de sección.
¿Dónde gana el em al rem?
El primer lugar es la media query. Dentro de una media query el navegador resuelve las unidades relativas contra el valor inicial del tamaño de fuente y no contra lo que hayas puesto en el elemento html: la especificación dice literalmente que las unidades nunca se basan en resultados de declaraciones [2]. Un punto de corte escrito como 48em se comporta así de forma previsible incluso en un proyecto que cambia el tamaño de fuente base.
El segundo lugar son las plantillas de correo. La unidad em funciona en todos los programas del conjunto de pruebas [3], mientras que el rem se queda en el 69,05 por ciento de soporte y no funciona en ninguna versión probada de Outlook, ni en Windows ni en macOS [4]. En una plantilla de correo, por tanto, decide el programa de quien recibe.
El tercer lugar es un componente que deba escalar entero junto a su texto. Dale a un botón font-size: 1.125em y escribe su relleno y su redondeo en em: un solo cambio del tamaño de texto hace crecer el botón entero en proporción.
En el resto de casos – tamaños de texto y escala de espaciado de todo un sitio – pesa más la previsibilidad del rem. La tabla de abajo detalla ocho situaciones concretas, y la conversión en aquel sentido la hace el convertidor de píxeles a rem.
PUBLICIDAD
¿Qué unidad elegir en cada situación?
| Situación | Unidad | Por qué |
|---|---|---|
| Tamaño de texto de titulares y párrafos | rem | El resultado se mantiene igual en todo el documento, al margen del anidamiento |
| Espacio alrededor del texto de un botón | em | El relleno sigue al texto del botón, así un cambio escala el elemento entero |
| Sangría de una lista anidada | em | La sangría debe crecer junto al texto de ese nivel de la lista |
| Punto de corte en una media query | em | El navegador cuenta desde el valor inicial del tamaño de fuente, no del html |
| Medidas en una plantilla de correo | em | Soportado en todos los programas probados, mientras que el rem cae en Outlook |
| Grosor de borde y sombra | px | Un filete debe seguir siendo un filete sea cual sea el tamaño de texto |
| Escala de espaciado del sistema de diseño | rem | Un cambio del tamaño de fuente base desplaza toda la maquetación de una vez |
| Ancho máximo de una columna de texto | em | La longitud de línea se mide en caracteres, el ancho sigue al texto de la columna |
Ocho situaciones que vuelven en cualquier proyecto de interfaz, con la unidad y el motivo.
El píxel y el em uno al lado del otro
| Característica | px | em |
|---|---|---|
| Punto de referencia | Ninguno, es un valor absoluto | Tamaño de fuente del elemento padre |
| Valor predeterminado | 1 px = 1/96 de pulgada | 1em = 16 px |
| Al anidar | Siempre el mismo valor | Se acumula en cada nivel |
| Reacción a los ajustes de quien lee | Se queda igual | Escala con ellos |
| Dónde se indica | Maquetas, programas de diseño, archivos de imagen | Hojas de estilos, plantillas de correo |
| Uso habitual | Bordes, sombras, filetes | Espacio alrededor del texto, sangría, punto de corte |
PUBLICIDAD
¿Cuándo te hará falta esta conversión?
Una plantilla de correo
El rem cae en Outlook, así que las medidas relativas se escriben en em. El convertidor pasa los píxeles de la maqueta a valores listos.Un punto de corte del diseño
Un 48em se comporta de forma previsible, porque dentro de una media query el navegador cuenta desde el tamaño de texto predeterminado.Un componente con un solo parámetro
El relleno y el redondeo de un botón escritos en em crecen junto a su texto, así que una declaración cambia todo el tamaño.
Convertir Píxeles a otras unidades
Explorar otros conversores de unidades
pt a pxrem a pxem a pxcm a pxmm a pxcm a pulgadaspulgadas a cmmm a pulgadaspulgadas a mmmillas a kmkm a millasmetros a piespies a metrospulgadas a piespies a pulgadaslibras a onzasonzas a librasml a onzasonzas a mllitros a galonesgalones a litroskg a libraslibras a kgkg a gramosgramos a kgkg a stonestone a kgpulgadas a pxpies a pxpicas a pxmetros a pxHEX a RGBRGB a CMYKbytes a KBKB a bytesKB a MBMB a KBMB a GBGB a MBKB a GBGB a KBGB a TBTB a GBKB a TBTB a KBUnix a fechaDEC a BINDEC a HEXMbps a MB/s
Fuentes
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 – Units — W3C
- CSS unit: em — Can I email
- CSS unit: rem — Can I email
Todos los valores de las tablas se calcularon a partir de las definiciones de las unidades y se comprobaron aritméticamente antes de publicarlos. Los datos históricos y los nombres de las unidades locales proceden de las fuentes indicadas arriba.
Última revisión del contenido: · redactado y verificado por el equipo de Arteon
Preguntas frecuentes
¿Cuántos em es 1 píxel?
Con el padre predeterminado de 16 px un píxel son 0,0625em. Dentro de una tarjeta con texto de 14 px ese mismo píxel da alrededor de 0,0714em, y en un titular de 20 px da 0,05em.
¿Cómo se convierten px a em?
Divide el número de píxeles entre el tamaño de fuente del padre. Con los 16 px predeterminados sale 24 ÷ 16 = 1,5em. El convertidor de arriba hace esa división para cualquier tamaño del padre de 1 a 200 px.
¿Cuántos em son 24 px?
1,5em con un padre de 16 px, alrededor de 1,7143em con 14 px y 1,2em con 20 px. El valor 1,5em es un tamaño habitual de titular de sección.
¿Cuántos em son 14 px?
0,875em con el padre predeterminado de 16 px. Dentro de una tarjeta cuyo texto ya mide 14 px, esa misma medida es exactamente 1em.
¿Cuántos em son 16 px?
1em con el padre predeterminado de 16 px. Con un padre de 14 px sale alrededor de 1,1429em, y con 20 px sale 0,8em.
¿Cuántos em son 12 px?
0,75em con un padre de 16 px. Es el tamaño de texto más pequeño en uso corriente en interfaces; por debajo la lectura se vuelve incómoda.
¿Hay que redondear el resultado en em?
Valores como 0,875 o 1,125em se escriben tal cual. El navegador los calcula con exactitud, mientras que redondear a 0,88em desplazaría la medida una fracción de píxel. Al dividir entre 14 salen decimales periódicos y ahí bastan cuatro cifras.
¿Qué unidad conviene en una media query?
El em. Dentro de una media query el navegador resuelve las unidades relativas contra el valor inicial del tamaño de fuente y no contra el valor puesto en el elemento html, así que un punto de corte escrito como 48em se comporta de forma previsible incluso en un proyecto que cambia el tamaño de fuente base.
¿El em funciona en las plantillas de correo?
Sí, en todos los programas del conjunto de pruebas. La unidad rem se queda en el 69,05 por ciento de soporte y no funciona en ninguna versión probada de Outlook, por eso las medidas relativas de las plantillas de correo se escriben en em.
¿Hay que pasar toda la hoja de estilos a em?
El espacio alrededor del texto, las sangrías de listas y los anchos de columna sí, porque deben seguir al texto de su contexto. Los tamaños de texto y la escala de espaciado de todo un sitio salen mejor en rem, y bordes, sombras y filetes se quedan en píxeles.
¿Qué diferencia hay entre em y rem con la misma medida?
La misma declaración 1,5em da un resultado distinto en cada nivel de anidamiento, porque cuenta desde el padre. La declaración 1,5rem da 24 píxeles en todo el documento, porque cuenta desde el elemento html. Para medidas que deban ser iguales en todas partes, se elige rem.
¿Los programas de diseño muestran valores en em?
Figma, Photoshop e Illustrator cuentan en píxeles o en puntos y no tienen la unidad em. Una medida de la maqueta se convierte aparte: con este convertidor o leyendo el valor calculado en la pestaña Computed de las herramientas para desarrolladores.
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea para una función, has encontrado un fallo o quieres proponer otra herramienta? Escríbenos: respondemos en menos de 24 horas.