Convertir em a px Em ↔ Pixels Gratis En línea Seguro
Escriba un valor en em y léalo al instante en px. La cuenta se hace en su navegador, no se envía nada a ninguna parte, y de qué depende el resultado está escrito más abajo en vez de darse por supuesto.
No se sube nada
Tamaños habituales — Convertir em a px
| em | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
De dónde vienen estas unidades
El píxel de CSS no es el píxel de su pantalla. Cuando las pantallas dejaron de tener una densidad previsible, una página medida en píxeles reales se convirtió en una página que encogía a medida que las pantallas se afinaban, así que el píxel CSS se redefinió como una longitud de referencia: alrededor de 1/96 de pulgada, visto a una distancia cómoda de lectura. Todo lo demás de esta página se asienta en eso. El em es más viejo que la web —en tipos de plomo era el ancho de un bloque fundido, llamado así por la M mayúscula— y en CSS significa el tamaño de letra vigente, razón por la cual cambia al anidar elementos. El rem se añadió precisamente para escapar de ello: es el em del elemento raíz y nunca se compone. El vw llegó con el diseño adaptable: una centésima del ancho de la ventana, sea cual sea.
Dónde se las encuentra
Estas son las unidades de cualquier hoja de estilo. Los píxeles dimensionan bordes, sombras y todo lo que no debe escalar; el rem dimensiona la tipografía, los espaciados y la maquetación, de modo que un solo cambio en la raíz redimensiona una interfaz entera; el em dimensiona lo que debe seguir a su propio texto, como el relleno de un botón; el vw dimensiona titulares y cabeceras que han de llenar la pantalla en cualquier dispositivo. Convertir entre ellos es la aritmética diaria de volver una maqueta entregada en píxeles una hoja de estilo que escala.
Preguntas frecuentes
¿Por qué 16 px es el punto de partida habitual?
Porque es el tamaño de texto por omisión en todos los navegadores importantes, y una hoja de estilo que no lo cambia lo hereda. Un rem equivale por tanto a 16 px con el ajuste por omisión, y de ahí vienen las conversiones familiares: 0,5 rem son 8 px, 1,5 rem son 24 px. Si un usuario ha agrandado ese valor en los ajustes de su navegador, esos mismos valores en rem crecen con él, que es justamente para lo que sirven.
¿Debo usar rem o em?
Rem para todo lo que deba seguir a la página en conjunto —escala tipográfica, espaciados, anchos de maquetación—, porque se mide desde la raíz y nunca se acumula. Em para todo lo que deba seguir al texto en que está: el relleno de un botón, el hueco junto a un icono, la sangría de una cita. El error común es anidar elementos dimensionados en em: 1,2 em dentro de 1,2 em se vuelve 1,44, luego 1,73, hasta que el texto del pie de página mide el doble de lo previsto.
¿El resultado es exacto?
Donde ambas unidades se definen una por otra con números enteros, sí: la página lo dice encima de la cifra, y el único redondeo está en cuántos dígitos se muestran. Donde la razón no tiene decimal finito, la página muestra doce cifras significativas y califica la relación de aproximada en vez de fingir otra cosa.
¿Algo de lo que escribo sale de mi dispositivo?
No. La aritmética se hace en su navegador; no se sube nada, y tampoco hay servidor que lo reciba. Cargada una vez, la página sigue funcionando con la red apagada.
Por qué convertir em a px
Una hoja de estilos dice margin-bottom: 0.75em en un encabezado, padding: 0.4em 0.9em en un botón y un line-height de 1.3em en un bloque de texto. Son valores buenos y flexibles, y casi imposibles de imaginar. ¿Cuántos píxeles son ese margen? ¿El relleno del botón coincide con los 6 px y los 14 px del archivo de diseño? Para saberlo se convierte em a px: se multiplica por el tamaño de fuente al que se refiere el em y se lee la respuesta en la unidad que usan las herramientas de diseño. Es una pregunta que se hacen los desarrolladores cuando revisan código, comprueban una compilación frente a una maqueta, depuran un problema de espaciado o entregan un componente terminado a alguien que piensa en píxeles.
Em es la unidad de CSS más difícil de convertir, porque no tiene un valor fijo. Un em es el tamaño de fuente vigente allí donde se usa el valor o, para la propia propiedad font-size, el del elemento padre. Así, 1.5 em puede ser 24 px en un lugar y 36 px en otro, en la misma hoja de estilos, con la misma regla. Por eso el convertidor no adivina. Pide el tamaño de fuente al que se refiere el em, lo muestra junto a la respuesta y calcula con él. Si no conoce el tamaño, las secciones siguientes explican cómo encontrarlo en su navegador.
El cálculo se hace en su navegador y no se sube nada. A continuación encontrará la fórmula, cómo hallar la base correcta, qué conserva la conversión y qué no puede conservar, cómo se multiplican los valores em anidados, cuándo necesitan los desarrolladores convertir em a px y algunos hábitos que mantienen comprensible una hoja de estilos basada en em.
La fórmula y la base
px es igual a em multiplicado por el tamaño de fuente
La fórmula es una sola multiplicación: px = em × base. Con una base de 16 px, 1.5 em se convierte en 24 px, 0.75 em en 12 px y 2 em en 32 px. La página imprime la base junto al resultado, de modo que una línea como 1.5 em = 24 px (16 px) dice exactamente qué se ha supuesto. Si el tamaño de fuente del elemento es de 20 px, escriba 20 y 1.5 em se convierte en 30 px.
Cómo encontrar la base en su navegador
Abra las herramientas de desarrollo, seleccione el elemento y mire su tamaño de fuente calculado. Ese es el número que hay que escribir en el campo de la base para cualquier propiedad que no sea font-size. Para font-size en sí, seleccione en cambio el elemento padre y lea su tamaño calculado. Lleva unos segundos y elimina por completo las conjeturas.
Cuando no puede ver la página
Si está leyendo código sin la página, siga hacia arriba la cadena de tamaños de fuente desde el elemento: su propio font-size si lo tiene, si no el de su padre, y así hasta la raíz, que es de 16 px a menos que la hoja de estilos o el lector lo hayan cambiado. Donde un tamaño esté dado en em, multiplique a lo largo de la cadena. Es tedioso, y por eso la mayoría de los equipos se decantan por rem para los tamaños de fuente.
Qué conserva la conversión y qué no puede conservar
Conserva la proporción con el texto
El resultado es el tamaño en píxeles que representa el em con la base que usted escribió. Escrito en em, un espacio o un tamaño sigue al texto al que pertenece, y la conversión muestra a cuánto equivale para un tamaño de texto concreto.
No puede dar una única respuesta para toda la página
Este es el punto en el que hay que tener cuidado: em es relativo al tamaño de fuente del propio elemento o, para font-size, al de su padre, no al de la raíz. Así, los mismos 1.5 em son 24 px dentro de un elemento de 16 px y 36 px dentro de uno de 24 px, y em dentro de em se multiplica. La cifra de la página es correcta para la base del campo y para nada más. Si quiere un número que valga en todas partes, para eso sirve rem. Para comparar ambos, convierta rem a px y vea cómo una unidad relativa a la raíz permanece fija.
Redondeo
Multiplicar por una base entera da resultados exactos para la mayoría de los valores. Si la base es un decimal, por ejemplo 13.5 px, un valor como 1.2 em da 16.2 px. Los navegadores manejan píxeles fraccionarios, pero cuando necesite píxeles enteros, para un borde finísimo o un icono en una cuadrícula, redondee a propósito y compruebe el aspecto.
Cómo se multiplican los valores em anidados
Una lista dentro de una lista
Tomemos una página cuyo texto de cuerpo es de 16 px. Una lista tiene font-size: 0.875em, es decir, 14 px. Los elementos que contiene también tienen font-size: 0.875em, que es 14 × 0.875 = 12.25 px. Una lista dentro de un elemento vuelve a hacerlo: 10.7 px. Tres niveles más abajo el texto es minúsculo, y nadie decidió que lo fuera. Cuando convierta em a px para un componente y la respuesta le parezca demasiado pequeña, lo primero que debe comprobar es el anidamiento.
Subir por la cadena
Para conocer el tamaño real en píxeles de un em anidado, multiplique la base por cada valor del camino hacia abajo: 16 × 0.875 × 0.875 = 12.25. El convertidor hace un paso cada vez. Para una cadena, convierta el primer valor, use la respuesta como base del segundo y continúe. Es la misma aritmética que realiza el navegador.
Cómo evitar que se acumule
Use rem para los tamaños de fuente, de modo que cada tamaño se refiera a la raíz, y deje em para el espaciado, de modo que el relleno y los márgenes sigan el texto de su propio elemento. Con esa combinación nada se acumula, y los valores em que convierta son siempre relativos a un tamaño de fuente que se puede leer de inmediato.
Valores habituales
La tabla al pie de la página
La página incluye una tabla con los valores en píxeles que corresponden a las cifras em habituales con la base que usted fije: 0.5 em son 8 px, 0.625 son 10, 0.75 son 12, 0.875 son 14, 1 son 16, 1.125 son 18, 1.25 son 20, 1.5 son 24, 2 son 32, 3 son 48 y 4 son 64. Con la base por defecto son los mismos números que para rem. Cambie la base y la tabla cambia con ella, lo cual es una buena manera de ver lo que hace realmente em.
Pruebe dos bases lado a lado
Escriba 1.5 con una base de 14 y luego con una de 20. Obtiene 21 y 30 píxeles. Esa es toda la diferencia entre em y rem en un experimento: la misma cifra, dos elementos, dos tamaños.
Cómo convertir em a px aquí
Escriba el valor em
Introduzca el tamaño en em en el primer campo. Se aceptan decimales, así que 0.714 funciona igual que 1.
Fije el tamaño de fuente al que se refiere el em
Escriba el tamaño de fuente del elemento, o el de su padre si la propiedad es font-size. Si no está seguro, deje 16 y trate el resultado como una aproximación.
Lea el valor en píxeles
La respuesta aparece al instante, con la base mostrada a su lado. Cópiela en sus notas o compárela con el archivo de diseño.
De dónde vienen estas unidades
El em
El em es anterior a la web. En la tipografía de metal era el ancho de un bloque fundido, llamado así por la M mayúscula, y los tipógrafos aún hablan de rayas em y espacios em. En CSS significa el tamaño de fuente vigente, y por eso cambia al anidar elementos.
El píxel y el rem
Cuando las pantallas dejaron de tener una densidad predecible, una página medida en píxeles reales se convirtió en una página que se encogía a medida que las pantallas ganaban nitidez. Así que el píxel CSS se redefinió como una longitud de referencia: aproximadamente 1/96 de pulgada vista a una distancia de lectura cómoda. El rem se añadió para escapar de la acumulación del em: es el em del elemento raíz y nunca se multiplica. Si trabaja con ambos, convierta px a em para ir en el otro sentido.
Cuándo convierten los desarrolladores em a px
Comprobar una compilación frente a un archivo de diseño
Un diseñador entrega un archivo en píxeles y el código está en em. Para comprobar que la página coincide, se convierte em a px usando el tamaño de fuente de cada componente. Un botón con una etiqueta de 14 px y un relleno de 0.714em 1.429em debería dar 10 px y 20 px, y si el diseño dice 12 y 24, uno de los dos está mal.
Depurar el espaciado
Cuando un hueco parece demasiado grande o demasiado pequeño, la causa suele ser un valor em que se refiere a una fuente mayor o menor de lo esperado. Convertirlo con el tamaño de fuente calculado del elemento le dice de inmediato si el problema es la aritmética.
Leer código desconocido
Las hojas de estilos heredadas están llenas de valores em cuyos tamaños en píxeles hay que reconstruir. Convertir un puñado de los principales, con las bases correctas, le da un mapa del diseño.
Redactar documentación y pruebas
Quienes prueban una página describen lo que ven en píxeles. Un desarrollador que dice que el relleno es de 0.9em significa poco para un probador; 12.6 px sí significa algo. Convertir hace que ambas partes se entiendan.
Trampas al convertir em a px
Usar la base equivocada
El error más común. Para font-size, use el tamaño del padre; para todas las demás propiedades, el del propio elemento. Compruebe la propiedad antes de escribir la base.
Olvidar un padre en em
Si el tamaño del padre está a su vez en em, hay que seguir la cadena. Use el valor calculado de las herramientas de desarrollo para abreviar.
Suponer que la pantalla muestra los mismos píxeles
Un píxel CSS no es un píxel de dispositivo. En una pantalla de alta densidad un píxel CSS puede ser dos o tres píxeles de dispositivo. La conversión da píxeles CSS, la unidad que comparten las herramientas de diseño y la hoja de estilos.
Tomar la respuesta por una promesa
Si el lector agranda el texto o el componente se reutiliza con otro tamaño de fuente, los píxeles cambian, como está previsto. El número convertido describe una situación, no todas.
Preguntas que se hacen antes de convertir
¿Cuántos píxeles son 1 em?
Tantos como el tamaño de fuente vigente: 16 px para el texto de cuerpo normal por defecto, 24 px dentro de un elemento de 24 px.
¿Cuántos píxeles son 2 em?
El doble del tamaño de fuente vigente. Con 16 px son 32 px.
¿Por qué mi navegador muestra algo distinto?
El tamaño de fuente real del elemento es distinto de la base que escribió. Lea el tamaño de fuente calculado en las herramientas de desarrollo.
¿Es em lo mismo que rem?
No. Em es relativo al elemento, rem a la raíz.
¿Se sube mi número?
No. La aritmética se ejecuta en su navegador y no se envía nada a ninguna parte.
¿Cómo vuelvo atrás?
Con px a em, que divide en lugar de multiplicar.
Hábitos que mantienen comprensible una hoja de estilos en em
Comente la base
Una línea como padding: 0.75em 1.25em; /* 12px 20px at 16px */ cuesta unos pocos caracteres y le ahorra una conversión al siguiente lector. Deja constancia de la base que supuso.
Fije el tamaño de fuente una vez por componente
Defina el tamaño de fuente del componente en su elemento raíz y haga referencia a él con em en su interior. La base es entonces la misma para todos los valores del componente, y puede convertir em a px con ella con confianza.
Em para el espaciado, rem para el tipo
Es el reparto en el que se asientan la mayoría de las hojas de estilos, y mantiene sencilla la aritmética. Para tamaños relativos a la pantalla, px a vw y vw a px son las herramientas.
Pruebe con otro tamaño de texto
Aumente el tamaño de texto por defecto en su navegador y mire la página. Si el espaciado sigue al texto, los valores em funcionan. Si no, algo se quedó en píxeles.
Un método para los casos difíciles
Trabaje de fuera hacia dentro
Cuando un componente está muy dentro de otros y sus valores em resultan confusos, empiece por el elemento más externo cuyo tamaño conozca y avance hacia dentro, convirtiendo un nivel cada vez. Anote cada tamaño en píxeles sobre la marcha. Tras dos o tres niveles tiene toda la cadena en papel y puede ver exactamente de dónde sale un número sorprendente. Lleva un minuto y sustituye una hora de conjeturas.
Decida si simplificar
Si tiene que convertir em a px a través de cuatro niveles para entender una maquetación, la hoja de estilos le está diciendo algo. Considere pasar los tamaños de fuente a rem, de modo que cada uno se refiera a la raíz, y dejar solo el espaciado en em. La página se verá igual y será mucho más fácil de leer el año que viene.
Convertidores relacionados
La misma familia de herramientas cubre las conversiones vecinas. Para volver a em, use px a em. Para tamaños relativos a la raíz hay px a rem y rem a px, y para tamaños relativos a la pantalla, px a vw y vw a px. Para los colores de la misma hoja de estilos, HEX a RGB y RGB a HEX se ocupan de las notaciones.
Un ejemplo resuelto
Supongamos que está revisando un componente de botón. La etiqueta es de 14 px, el CSS dice padding: 0.714em 1.429em y un hueco de 0.5em entre un icono y la etiqueta. Escribe 14 como base, luego 0.714 y lee 10 px, 1.429 y lee 20 px, 0.5 y lee 7 px. El archivo de diseño dice 10, 20 y 8. Coinciden dos de tres, así que mira el hueco: 8 px con una base de 14 serían 0.571 em, y alguien lo redondeó a 0.5. Lo plantea en la revisión y la corrección es un solo número.
Una lista de comprobación breve
Antes de convertir
Encuentre el tamaño de fuente al que se refiere el em, con las herramientas de desarrollo o con la cadena de tamaños de fuente del código.
Mientras convierte
Escriba el valor em, fije la base y lea los píxeles, fijándose en la base que se muestra junto al resultado.
Después de convertir
Compare con el archivo de diseño. Si los números difieren, compruebe la base antes de sospechar del código.
Errores comunes
Usar 16 sin comprobar
Solo es correcto cuando el tamaño de fuente del elemento es de 16 px.
Confundir em con rem
Se parecen y se comportan de forma distinta. Use la página adecuada para cada uno.
Olvidar que em se acumula
Un valor dentro de un elemento anidado es relativo a un tamaño que quizá no haya visto. Siga la cadena.
Sus números se quedan en su dispositivo
El cálculo se hace localmente. Sus valores los usa su propio navegador y no se envía nada a ninguna parte. No hay nada que borrar después ni ninguna cuenta que crear. Esa es la manera sencilla de convertir em a px.
Resumen
Para convertir em a px aquí, escriba el tamaño en em y el tamaño de fuente al que se refiere, y lea al instante el resultado en píxeles, con la fórmula px = em × base. La conversión conserva la proporción relativa al tamaño de fuente vigente allí donde se usa el valor. No puede dar una única respuesta para una página: em es relativo al propio elemento, o al padre para font-size, así que los mismos 1.5 em son 24 px dentro de un elemento de 16 px y 36 px dentro de uno de 24 px, y em dentro de em se multiplica. Para un número que valga en todas partes, use rem. No se sube nada.