Convertir px a em Pixels ↔ Em Gratis En línea Seguro

Por qué convertir px a em

Em es la unidad relativa más antigua de CSS y la que causa más discusiones. Tiene un tamaño en píxeles de un archivo de diseño, 20 px de relleno en un botón, 14 px de espacio junto a un icono, 36 px para un encabezado, y lo quiere en em, para que siga al texto al que pertenece. Cuando convierte px a em, está haciendo una pregunta concreta: ¿qué múltiplo del tamaño de fuente actual es esto? La respuesta depende de un número que la página no puede adivinar, el tamaño de fuente vigente allí donde se usa el valor, así que el conversor pone ese número en un campo y lo usa abiertamente.

La razón para escribir los tamaños en em es que lo que pertenece al texto debe crecer con el texto. El relleno dentro de un botón debe ser mayor cuando la etiqueta del botón es mayor. El hueco entre un icono y su leyenda debe ensancharse cuando lo hace la leyenda. El margen inferior de un encabezado debe mantenerse en proporción con el encabezado. En todos estos casos el valor en píxeles es erróneo en cuanto cambia el tamaño de fuente, y el valor en em es correcto con cualquier tamaño. Ese es todo el argumento a favor de em, y es sólido.

El cálculo se hace en su navegador y no se sube nada. A continuación encontrará la fórmula, la razón por la que em exige más cuidado que rem, la trampa de la anidación que produce tamaños sorprendentes, los lugares donde em es la unidad adecuada y un método para elegir entre em y rem en una hoja de estilos real.

La fórmula y la base

em es igual a px dividido entre el tamaño de fuente

La fórmula es una división: em = px ÷ base. Con una base de 16 px, un valor de 24 px se convierte en 1.5 em, 8 px en 0.5 em y 20 px en 1.25 em. La página muestra la base junto al resultado, como en 24 px = 1.5 em (16 px), para que pueda ver lo que se ha supuesto. La aritmética es la misma que para rem. El significado es distinto.

Qué es la base

Para rem, la base es el tamaño de fuente del elemento raíz. Para em, es el tamaño de fuente del elemento donde se usa el valor o, para la propia propiedad font-size, el del padre. Por eso em no tiene una única respuesta: el mismo valor de la hoja de estilos significa tamaños en píxeles distintos en lugares distintos. Si está convirtiendo un relleno para un botón cuyo texto es de 14 px, escriba 14 como base. Si está convirtiendo un margen para un encabezado de 32 px, escriba 32.

El valor por defecto cuando no lo sabe

Si solo quiere una cifra aproximada, deje la base en 16, el tamaño del texto ordinario en un navegador que nadie ha cambiado. El resultado es correcto para un bloque de texto normal del cuerpo, y le da una idea de la proporción aunque el elemento resulte tener otro tamaño.

Lo que la conversión conserva y lo que no puede

Conserva la proporción respecto al texto

El resultado es la proporción relativa al tamaño de fuente vigente allí donde se usa el valor. Escrito en em, un espacio crece y se reduce con el texto que tiene al lado, y así es exactamente como debe comportarse el espaciado alrededor de las palabras.

No puede darle un número para toda la página

Este es el que exige cuidado. Em es relativo al tamaño de fuente del propio elemento o, para font-size, al de su padre, no a la raíz. Así que no hay una única respuesta para una página: el mismo 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, convierta px a rem y vea cómo se comporta el mismo valor en píxeles.

Redondeo

La división entre 16 da valores limpios para muchos tamaños y decimales periódicos para otros. Un valor como 0.8125 em está bien en una hoja de estilos, pero quizá prefiera redondear a 0.8 o 0.85 si el tamaño exacto no importa. Conserve la cifra completa donde cuente la precisión.

La trampa de la anidación

Cómo se acumula em

Supongamos que una lista tiene font-size: 0.875em y sus elementos también tienen font-size: 0.875em. La lista es el 87.5% de su padre. Cada elemento es el 87.5% de la lista, que es aproximadamente el 76.6% del padre. Una lista anidada dentro de un elemento vuelve a encogerse, hasta alrededor del 67%. Después de tres niveles el texto es muy pequeño, y nadie lo escribió a propósito. Esto es lo que se quiere decir al afirmar que em se acumula.

Por qué importa cuando convierte px a em

Si convierte un valor en píxeles a em para font-size, la base que debe usar es el tamaño de fuente del padre, no el del propio elemento. Muchos errores vienen de usar la equivocada. Para otras propiedades, como padding y margin, la base es el tamaño de fuente del propio elemento. La regla es fácil de decir y fácil de olvidar: font-size mira hacia arriba, todo lo demás se mira a sí mismo.

Cómo evitar sorpresas

Use em para el espaciado que sigue al texto y rem para los tamaños de fuente. De ese modo los tamaños de fuente nunca se acumulan, porque se refieren a la raíz, y el espaciado sigue a su propio texto. Es la combinación a la que llegan la mayoría de las hojas de estilo modernas.

Tamaños habituales

La tabla al pie de la página

Bajo el conversor hay una tabla de tamaños habituales con la base que haya fijado: 8 px es 0.5 em, 10 px es 0.625, 12 px es 0.75, 14 px es 0.875, 16 px es 1, 18 px es 1.125, 20 px es 1.25, 24 px es 1.5, 32 px es 2, 48 px es 3 y 64 px es 4. Con una base de 16, son los mismos números que para rem, por eso la gente confunde ambos. La diferencia está en lo que representa el 16.

Cambiar la base para ajustarla al elemento

Si fija la base en 14 para un botón pequeño, la tabla cambia: 14 px es ahora 1 em, 7 px es 0.5 em y 21 px es 1.5 em. Pruébelo y verá cómo un relleno de 1.5 em tiene un tamaño en píxeles distinto en un botón de 14 px que en uno de 18 px, y por qué eso es útil.

Cómo convertir px a em aquí

Escriba el valor en píxeles

Introduzca el tamaño en píxeles en el primer campo. Se aceptan decimales.

Fije el tamaño de fuente al que se refiere em

Escriba el tamaño de fuente del elemento, o el de su padre si está convirtiendo un font-size. Si no está seguro, deje 16 y trate el resultado como una aproximación.

Copie el valor en em

Use la cifra en su CSS con su unidad, como en padding: 1.25em. Un número sin unidad no es válido para la mayoría de las propiedades.

De dónde vienen estas unidades

El em en la tipografía de metal

El em es más antiguo que la web. En la tipografía de metal era la anchura de un bloque fundido, nombrado por la M mayúscula, y era la unidad natural del espacio horizontal en la línea impresa. Los tipógrafos todavía hablan de rayas em y de espacios em. En CSS la idea sobrevive de forma más laxa: un em es el tamaño de la fuente actual.

El píxel y el rem

El píxel CSS es una longitud de referencia de aproximadamente 1/96 de pulgada vista a una distancia cómoda de lectura, no un punto de su pantalla. El rem se añadió para dar a los desarrolladores una unidad que es relativa pero nunca se acumula: es el em del elemento raíz. Entre ellos, píxel, em y rem cubren las tres necesidades: tamaño fijo, tamaño relativo al texto y tamaño relativo a la página.

Dónde em es la elección adecuada

Relleno dentro de botones y campos de formulario

Un botón con padding: 0.5em 1em tiene el mismo aspecto en proporción con cualquier tamaño de texto. Haga mayor la etiqueta y todo el botón crece con ella, que es lo que se quiere de un componente que puede usarse en una barra de herramientas y en un banner de cabecera.

Espaciado junto a los iconos

Un icono seguido de una leyenda necesita un hueco que se escale con la leyenda. Un margen de 0.4em lo hace; un margen de 6px no.

Márgenes alrededor de encabezados y párrafos

El ritmo vertical de un documento es más fácil de mantener cuando el espaciado entre párrafos está en em, ya que sigue el tamaño del párrafo. El margen de un encabezado en em se mantiene en proporción cuando el encabezado cambia de tamaño en distintos puntos de ruptura.

Consultas de medios

Los puntos de ruptura escritos en em responden al tamaño de texto del lector, así que el diseño pasa a su forma estrecha antes para quien ha agrandado el texto. En las consultas de medios, em se refiere al valor por defecto del navegador y no a ningún elemento, por lo que no se acumula.

Trampas al convertir px a em

Usar la base equivocada

El error más común. Para font-size, use el tamaño del padre; para todo lo demás, el del propio elemento. Compruebe qué propiedad está convirtiendo antes de escribir la base.

Olvidar que el padre también puede estar en em

Si el tamaño de fuente del padre está a su vez en em, tiene que seguir la cadena hacia arriba para conocer el tamaño real. Cuando una hoja de estilos se complica, pase los tamaños de fuente a rem y deje em para el espaciado.

Esperar una sola cifra para todo un componente

Un componente que contiene texto de distintos tamaños no tiene un único valor en em para sus partes. Convierta cada parte respecto a su propia base.

Mezclar em y rem para la misma propiedad

Un relleno de 1rem junto a un margen de 1em es legal y a menudo confuso. Elija una regla, como rem para los tamaños de fuente y em para el espaciado, y respétela.

Preguntas que la gente se hace antes de convertir

¿Cuántos em son 16 px?

Uno, si el tamaño de fuente vigente es de 16 px. Si el tamaño de fuente del elemento es de 20 px, entonces 16 px son 0.8 em.

¿Es em mejor que rem?

Ninguno es mejor. Rem es mejor para los tamaños de fuente y el diseño global. Em es mejor para el espaciado que debe seguir a su propio texto.

¿Por qué mi relleno es mayor de lo esperado?

Porque es relativo al tamaño de fuente del elemento, que puede ser mayor de lo que supuso. Compruebe el tamaño de fuente calculado en las herramientas de desarrollo del navegador.

¿Puedo usar decimales?

Sí. Valores como 0.625em y 1.333em son normales.

¿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 em a px, que multiplica en lugar de dividir.

Elegir con acierto al convertir px a em

Decida a qué pertenece el valor

Si pertenece al texto, em es lo adecuado. Si pertenece a la página, como el ancho de una columna o el hueco entre secciones, rem o una unidad de ventana gráfica encaja mejor. Px a vw expresa un tamaño como una fracción del ancho de pantalla.

Escriba la intención en un comentario

Una línea como padding: 0.75em 1.25em; /* 12px 20px at 16px */ hace visible el razonamiento. Cuando el tamaño de fuente cambie más adelante, sabrá lo que querían decir los números.

Mantenga el tamaño de fuente del componente en un solo lugar

Fije el tamaño de fuente en el elemento raíz del componente y deje que todo lo de dentro se refiera a él. Así los valores en em de su interior significan lo mismo en todo el componente, y puede convertir px a em respecto a una única base.

Buenos hábitos al convertir px a em

Convierta px a em componente a componente

No intente convertir px a em para toda una hoja de estilos de una vez. Tome un solo componente, como una tarjeta o un botón, decida su tamaño de fuente y convierta cada uno de sus valores de espaciado respecto a ese tamaño. Cuando el componente esté terminado, pruébelo con dos o tres tamaños de texto. Después pase al siguiente.

Use una calculadora para los valores raros, no para los redondos

Valores como 8, 16 y 24 píxeles se convierten en números de em limpios con una base de 16. Valores raros como 22 o 13 dan decimales largos. Cuando convierta px a em para estos, decida si el diseño necesita de verdad la cifra exacta o si el valor de em redondo más cercano serviría igual de bien. Los diseñadores suelen estar contentos de redondear, y una hoja de estilos ordenada es más fácil de mantener.

Lleve un registro de la base

Un breve comentario junto a cada valor en em, indicando cuál era la base, ayuda a la persona siguiente. Si alguien cambia más adelante el tamaño de fuente del componente, sabrá que el espaciado lo sigue por diseño y no por casualidad. Escribirlo una vez vale el tiempo que lleva.

Compare con el equivalente en rem

Si no está seguro de si em o rem encaja con un valor, convierta px a em y a rem y pregúntese qué debe ocurrir cuando cambie el tamaño del texto. Si el valor debe seguir al propio texto del elemento, tome el em. Si debe seguir a la página, tome el rem.

Conversores relacionados

La misma familia de herramientas cubre las conversiones vecinas. Para volver a píxeles, use em a px. Para los tamaños relativos a la raíz, están px a rem y rem a px, y para los 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 HEX a HSL se ocupan de las notaciones.

Un ejemplo resuelto

Digamos que la etiqueta de un botón es de 14 px y el diseño da al botón 10 px de relleno vertical y 20 px de relleno horizontal. Escribe 14 como base, 10 y lee 0.714 em, escribe 20 y lee 1.429 em. En la hoja de estilos escribe padding: 0.714em 1.429em. Cuando el mismo botón se usa en una cabecera con una etiqueta de 18 px, el relleno pasa a ser 12.9 px y 25.7 px, en proporción. Si hubiera escrito 10px y 20px, el botón habría quedado escaso alrededor del texto mayor.

Una breve lista de comprobación

Antes de convertir

Decida a qué propiedad pertenece el valor y encuentre el tamaño de fuente respecto al cual debe ser relativo.

Mientras convierte

Escriba el valor en píxeles y la base correcta, y copie la cifra en em con su unidad.

Después de convertir

Cambie el tamaño de fuente del componente en el navegador y compruebe que el espaciado lo sigue. Busque valores en em anidados que se acumulen.

Errores comunes

Usar el tamaño de la raíz como base del relleno

Ese es el trabajo de rem. Em se refiere al tamaño de fuente del propio elemento.

Usar em para todos los tamaños de fuente

Los tamaños de fuente en em anidados se acumulan y le sorprenden. Use rem para los tamaños de fuente.

Redondear a un número visualmente limpio pero erróneo

1.43 no es lo mismo que 1.5 cuando se multiplica por una fuente grande. Conserve suficientes dígitos.

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 px a em.

Resumen

Para convertir px a em aquí, escriba el tamaño en píxeles y el tamaño de fuente al que es relativo, y lea el resultado al instante, usando la fórmula em = px ÷ 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 tamaño de fuente del propio elemento, o al del padre para font-size, de modo que el mismo 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.