¿Por qué em en lugar de px?

766

Escuché que deberías definir tamaños y distancias en tu hoja de estilo con em en lugar de en píxeles. Entonces, la pregunta es ¿por qué debería usar em en lugar de px al definir estilos en css? ¿Hay un buen ejemplo que ilustra esto?

Spoike
fuente
Para lo que vale, aquí está la definición de las diferentes unidades en CSS: w3.org/TR/css3-values/#lengths .
Ryan

Respuestas:

554

Es incorrecto decir que uno es una mejor opción que el otro (o que a ambos no se les hubiera dado su propio propósito en la especificación). Incluso vale la pena señalar que StackOverflow hace un uso extensivo de las unidades px. No es la mala elección que le dijeron a Spoike.

Definición de unidades

  • px es una unidad de medida absoluta (como in , pt o cm ) que también resulta ser 1/96 de una unidad in (más sobre por qué más adelante). Debido a que es una medida absoluta, puede usarse en cualquier momento que desee definir que algo tenga un tamaño particular, en lugar de ser proporcional a algo más, como el tamaño de la ventana del navegador o el tamaño de fuente.

    Como todas las demás unidades absolutas, las unidades px no se escalan de acuerdo con el ancho de la ventana del navegador. Por lo tanto, si el diseño de toda su página usa unidades absolutas como px en lugar de % , no se adaptará al ancho del navegador. Esto no es inherentemente bueno o malo, solo una elección que el diseñador debe hacer entre adherirse a un tamaño exacto y ser inflexible versus estirar, pero en el proceso no adherirse a un tamaño exacto. Sería típico que un sitio tuviera una mezcla de objetos de tamaño fijo y de tamaño flexible.

    Los elementos de tamaño fijo a menudo deben incorporarse a la página, como pancartas publicitarias, logotipos o iconos. Esto garantiza que casi siempre necesite al menos algunas mediciones basadas en px en un diseño. Las imágenes, por ejemplo, (por defecto) se escalarán de modo que cada píxel tenga un tamaño de 1 * px *, por lo que si está diseñando alrededor de una imagen necesitará unidades px . También es muy útil para un tamaño de fuente preciso y para anchos de borde, donde debido al redondeo tiene más sentido usar unidades px para la mayoría de las pantallas.

    Todas las medidas absolutas están rígidamente relacionadas entre sí; es decir, 1 pulgada es siempre 96 píxeles , así como 1 pulgada siempre es 72 puntos . (Tenga en cuenta que 1 pulgada casi nunca es realmente una pulgada física cuando se habla de medios basados ​​en pantalla). Todas las mediciones absolutas suponen una resolución de pantalla nominal de 96ppi y una distancia de visualización nominal de un monitor de escritorio, y en dicha pantalla un px será igual a un píxel físico en la pantalla y uno enserá igual a 96 píxeles físicos. En pantallas que difieren significativamente en la densidad de píxeles o en la distancia de visualización, o si el usuario ha ampliado la página con la función de zoom del navegador, px ya no necesariamente se relacionará con los píxeles físicos.

  • em no es una unidad absoluta, es una unidad relativa al tamaño de fuente elegido actualmente. A menos que haya anulado el estilo de fuente configurando su tamaño de fuente con una unidad absoluta (como px o pt ), esto se verá afectado por la elección de las fuentes en el navegador o el sistema operativo del usuario si lo han hecho, por lo que no tiene sentido para usar em como una unidad general de longitud, excepto donde específicamente desea que se escale a medida que se escala el tamaño de fuente.

    Utilice em cuando se desea específicamente el tamaño de algo que dependerá del tamaño de la fuente actual.

  • % también es una unidad relativa, en este caso, relativa a la altura o al ancho de un elemento padre. Son una buena alternativa a las unidades px para cosas como el ancho total de un diseño si su diseño no se basa en tamaños de píxeles específicos para establecer su tamaño.

    El uso de % de unidades en su diseño permite que su diseño se adapte al ancho de la pantalla / dispositivo, mientras que el uso de una unidad absoluta como px no lo hace.

thomasrutter
fuente
27
No hay forma de convertir entre ems y píxeles, a menos que sepa cuál es el tamaño de un 'em' en píxeles, en ese contexto. Eso puede depender del tamaño de fuente heredado de ese elemento, que a su vez puede depender del tamaño de fuente del documento en su conjunto, lo que puede depender de la configuración del tamaño de fuente en el navegador y / o sistema operativo del usuario. Si está apuntando a un tamaño de píxel en particular, especifíquelo en píxeles. Es decir, si quieres 990 px, pon 990 px. Si los píxeles son lo que quieres, ¿por qué no usarlos?
thomasrutter
77
¿Eh? No dije nada que contradijera eso. Estaba diciendo para qué unidades px se usan y para qué se usan las unidades em. Parece implicar que usar unidades px es generalmente malo. Si un sitio se rompe cuando ajusta el tamaño de fuente predeterminado del navegador, la falla no son las unidades px, son malas suposiciones. Claramente, el diseñador web ha confiado en el tamaño de fuente predeterminado (a menudo es una buena idea) y, sin embargo, creó el resto de su diseño basándose en suposiciones falsas sobre este tamaño de fuente, como intentar alinear elementos gráficos de tamaño fijo con texto, donde el el tamaño del elemento solo coincide con el texto en un tamaño de fuente.
thomasrutter
3
No está mal, ni simplificado en exceso. Obviamente, si usa em en una línea donde realmente declara el tamaño de fuente, entonces es imposible que em en esa línea sea relativo al tamaño de fuente del mismo elemento después de cualquier declaración de tamaño de fuente en ese elemento, porque ganó ' No lo sé todavía, por lo que debe ser relativo al tamaño de fuente que tendría el elemento antes de declarar la propiedad de tamaño de fuente en ese mismo elemento. Como cualquier otro comportamiento es literalmente imposible, no veo ninguna ambigüedad allí.
thomasrutter
3
@TalhaSayed, estás confundiendo píxeles con la unidad px. No son lo mismo: lea las especificaciones de CSS. La unidad px es una unidad absoluta en el mismo sentido que la unidad in, o la unidad cm, o la unidad pt.
thomasrutter
77
@thomasrutter, ¡GUAU! Simplemente busqué en Google esto y sí, tengo que decir que me equivoqué. Todos estos años y no tenía idea. Solía ​​pensar que 1 píxel = 1 "punto en la pantalla". Creo que aprendí algo nuevo hoy.
Talha Sayed
143

Tengo una computadora portátil pequeña con una alta resolución y tengo que ejecutar Firefox con un zoom de texto del 120% para poder leer sin entrecerrar los ojos.

Muchos sitios tienen problemas con esto. El diseño se vuelve totalmente confuso, el texto en los botones se corta por la mitad o desaparece por completo. Incluso stackoverflow.com lo padece:

Captura de pantalla de Firefox con un zoom de texto del 120%

Observe cómo se superponen los botones superiores y las pestañas de la página. Si hubieran usado unidades em en lugar de px, no habría habido un problema.

flodin
fuente
15
También puede hacer zoom en el texto en Firefox sin hacer zoom en las imágenes Ver -> Zoom -> Hacer zoom solo en texto, luego hacer zoom normalmente.
thomasrutter
44
+1 buen punto. aunque en relación con grandes resoluciones, puede establecer la configuración de pantalla para mostrar el texto a 120 dpi en lugar de la resolución estándar 96
Spoike
55
@Spoike: Lo haría, pero Firefox no respeta la configuración DPI del sistema Ver bugs.launchpad.net/ubuntu/+source/firefox/+bug/19524
flodin
66
@Juan: Eso es porque usan el método de zoom más simple: escalar toda la página. Pero significa que con un zoom del 150%, una página de 1000 píxeles de ancho se convierte en 1500 píxeles de ancho. Es la forma más fácil de hacer zoom para desarrolladores web y de navegador. Desafortunadamente, no es muy fácil de usar. Es por eso que otros navegadores tienen zoom de texto que amplía el contenido solo sin cambiar el diseño. Pero eso significa que los desarrolladores web necesitan diseñar básicamente sus diseños para una amplia variedad de tamaños de fuente, lo que limita en gran medida lo que puede hacer en cuanto al diseño. Es bastante difícil hacer que un sitio se vea bien con una fuente de 16 puntos y una fuente de 48 puntos.
Lèse majesté
1
@Lesemajeste no está escalando toda la página como debería ser realmente el "zoom". ¿No llega un punto en el que el desarrollador debe decirle a los usuarios de nicho que hagan frente o no visiten? Nunca construiría una sola página teniendo en cuenta las fuentes de 16pt y 48pt. Eso es simplemente estúpido y, como señaló, muy limitante en el diseño. Creo que es genial que FF quiera hacer un zoom especial solo para texto, pero no voy a diseñar con eso en mente.
1934286
93

La razón por la que hice esta pregunta fue porque olvidé cómo usar los em, ya que hacía un tiempo estaba hackeando felizmente en CSS. La gente no se dio cuenta de que mantuve la pregunta general ya que no estaba hablando de dimensionar las fuentes per se. Estaba más interesado en cómo definir estilos en cualquier elemento de bloque dado en la página.

Como Henrik Paul y otros señalaron, em es proporcional al tamaño de fuente utilizado en el elemento. Es una práctica común definir tamaños en elementos de bloque en px, sin embargo, cambiar el tamaño de las fuentes en los navegadores generalmente rompe este diseño. El cambio de tamaño de las fuentes se realiza comúnmente con las teclas de acceso directo Ctrl+ +o Ctrl+ -. Entonces, una buena práctica es usar em's en su lugar.

Usando px para definir el ancho

Aquí hay un ejemplo ilustrativo. Supongamos que tenemos una etiqueta div que queremos convertir en un elegante cuadro de fecha, es posible que tengamos un código HTML similar al siguiente:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Una implementación simple definiría el ancho de la date-boxclase en px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

El problema

Sin embargo, si queremos dimensionar el texto en nuestro navegador, el diseño se romperá. El texto también sangrará fuera del cuadro, que es casi lo mismo que sucede con el diseño de SO como señala flodin . Esto se debe a que el cuadro seguirá teniendo el mismo tamaño de ancho que el que está bloqueado 50px.

Usando em en su lugar

Una forma más inteligente es definir el ancho en ems:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

De esta forma, tiene un diseño fluido en el cuadro de fecha, es decir, el cuadro se ajustará junto con el texto en proporción al tamaño de fuente definido para el cuadro de fecha. En este ejemplo, el tamaño de fuente se define *como 10pt y aumentará 2.5 veces hasta ese tamaño de fuente. Entonces, cuando esté dimensionando las fuentes en el navegador, el cuadro tendrá 2.5 veces el tamaño de ese tamaño de fuente.

Spoike
fuente
1
Me pregunto: ¿cómo se ajustará a los sistemas de cuadrícula utilizando porcentajes de ancho? ¿Se romperá si el bloque contianing tiene un ancho del 100%?
hugo der hungrige
65
Esto no es cierto hoy en día. Al presionar Ctrl+y Ctrl-en cualquier navegador moderno, también se escalarán los valores de píxeles. Ha sido así por un tiempo ahora.
YemSalat
1
@YemSalat ¿Esto también es válido para ajustar DPI en el sistema operativo?
angularsen
@anjdreas no tengo idea de ser honesto.
YemSalat
44
@spoike, rechazar esto, ya que claramente ya no es cierto, como lo indica el comentario de YemSalat
RayLoveless
60

La respuesta más votada aquí de thomasrutter es correcta en su respuesta sobre el em . Pero está muy, muy mal acerca del tamaño de un píxel. Entonces, a pesar de que es viejo, no puedo dejar que se debata.

¡La pantalla de una computadora normalmente NO es de 96 ppp! (O ppi, si quieres ser pedante).


Un píxel NO tiene un tamaño físico fijo.
(Sí, se arregla solo en una pantalla, pero en la siguiente pantalla un píxel es más grande o más pequeño, y ciertamente NO ES 1/96 de pulgada).


Prueba
Dibuje una línea de 960 píxeles de largo. Mídelo con una regla física. ¿Son 10 pulgadas? No..?
Conecte su computadora portátil a su televisor. ¿La línea mide 10 pulgadas ahora? ¿Todavía no?
Muestra la línea en tu iPhone. ¿Sigue siendo del mismo tamaño? Por qué no?

¿Quién diablos inventó el mito de la pantalla de la computadora de 96 ppp?
(Algunas religiones operan con un mito de 72 ppp. Pero igualmente equivocado).

Vbakke
fuente
44
> Para tener una idea de la apariencia de un px, imagine un monitor de computadora CRT de la década de 1990: el punto más pequeño que puede mostrar mide aproximadamente 1/100 de pulgada (0.25 mm) o un poco más. La unidad px obtuvo su nombre de esos píxeles de la pantalla. - Cita del W3C: w3.org/Style/Examples/007/units.en.html#units
Jay Zelenkov
44
Todas las medidas absolutas están rígidamente relacionadas entre sí; es decir, 1 pulgada es siempre * 96px *, así como 1 pulgada es siempre * 72pt *. (Tenga en cuenta que 1 pulgada casi nunca es realmente una pulgada física cuando se habla de medios basados ​​en pantalla) No creo que la respuesta más votada sea hablar de pulgada física. Las relaciones se encuentran entre los diferentes esquemas de dimensionamiento absoluto como en y pt. Por ej. Simplemente extendiendo su 'prueba' si dibujo una línea de 1_en_ ¿medirá 1 pulgada físicamente?
Saumitra R. Bhave
55
-1 para despotricar incorrecto e irrelevante. pxtiene un tamaño relativo a un píxel de referencia , no los píxeles en las pantallas en las que está aquí. Es posible que no le guste eso, pero sacar su regla no lo hará menos importante, ni contribuirá a responder la pregunta. stackoverflow.com/questions/27382331/… "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."
underscore_d
52

Es útil para todo lo que tiene que escalar de acuerdo con el tamaño de fuente.

Es especialmente útil en los navegadores que implementan zoom al escalar el tamaño de fuente. Entonces, si dimensiona todos sus elementos usando, emse escalan en consecuencia.

Daniel Rikowski
fuente
97
Hoy en día, todos los navegadores modernos implementan el zoom al escalar todas las unidades absolutas por igual, en lugar de escalar solo los tamaños de fuente. Tenga en cuenta que esta respuesta fue escrita en 2009 cuando este era menos el caso de lo que es ahora.
thomasrutter
22

Porque el em ( http://en.wikipedia.org/wiki/Em_(typography) ) es directamente proporcional al tamaño de fuente actualmente en uso. Si el tamaño de la fuente es, digamos, 16 puntos, un em es de 16 puntos. Si el tamaño de la fuente es de 16 píxeles ( nota : no es lo mismo que los puntos), un em es de 16 píxeles.

Esto lleva a dos cosas (relacionadas):

  1. es fácil mantener proporciones, si elige editar los tamaños de fuente en su CSS más adelante.
  2. Muchos navegadores admiten tamaños de fuente personalizados, anulando su CSS. Si diseña todo en píxeles, su diseño podría romperse en estos casos. Pero, si usa ems, estas anulaciones deberían mitigar estos problemas.
Henrik Paul
fuente
Estaba buscando una fórmula de cálculo :-) tal vez fue bueno agregar también un ejemplo inverso, como 2pxes 0.125empara una fuente de 16 píxeles.
Wolf
12

ejemplo:

Código: body {font-size: 10px;} // mantener en 10 todos los tamaños por debajo de los correctos, cambiar este valor y el resto cambia para ser, por ejemplo, 1.4 de este valor

1 {font-size: 1.2em;} // 12px

2 {font-size: 1.4em;} // 14px

3 {font-size: 1.6em;} // 16px

4 {font-size: 1.8em;} // 18px

5 {font-size: 2em;} // 20px

...

cuerpo

1

2

3

4 4

5 5

Al cambiar el valor en el cuerpo, el resto cambia automáticamente para ser un tipo de veces el valor base ...

10 × 2 = 20 10 × 1.6 = 16, etc.

podría tener el valor base como 8px ... entonces 8 × 2 = 16 8 × 1.6 = 12.8 // puede ser redondeado por el navegador

Muhammad Usman Ghani
fuente
3
Sería mejor agregar una imagen que ilustre el efecto.
Lobo
8

Una razón muy práctica es que IE 6 no le permite cambiar el tamaño de la fuente si se especifica usando px, mientras que lo hace si usa una unidad relativa como em o porcentajes. No permitir que el usuario cambie el tamaño de la fuente es muy malo para la accesibilidad. Aunque está en declive, todavía hay muchos usuarios de IE 6.

John Topley
fuente
1
Tenga en cuenta que IE7 e IE8 aún no pueden cambiar el tamaño del texto con un tamaño de fuente especificado en píxeles (a través Page > Text Size). Sin embargo, IE7 agregó el zoom de la página ( Page > Zoom) que amplía toda la página, incluido el texto, obviamente.
mercator
1
Mejor que Page> Zoon, intente presionar las teclas [CTRL] + [-] o [+] en su teclado en IE7 +, Chrome y Firefox - zoom de página completa sin la mayoría de los problemas que uno experimenta al tratar de cambiar el tamaño de fuente.
Rich Turner el
1
Casi ninguna computadora en el mundo usa IE6 en 2017
Michael
3
@MichaelMay Por eso la respuesta y otros comentarios fueron escritos en 2009 ... jajaja
Chev
7

use px para la colocación precisa de elementos gráficos. utilícelos para mediciones que tengan que posicionarse y espaciarse alrededor de elementos de texto como altura de línea, etc. px tiene una precisión de píxeles, em puede cambiar dinámicamente con la fuente en uso

Scott Evernden
fuente
es, pero no corresponde a los requisitos mínimos de WCAG 2.0: w3.org/WAI/WCAG20/quickref/Overview.php - Técnicas suficientes para 1.4.4
meo
2

La razón principal para usar em o porcentajes es permitir que el usuario cambie el tamaño del texto sin romper el diseño. Si diseña con fuentes especificadas en px, no cambian de tamaño (en IE 6 y otras) si el usuario elige el tamaño del texto, más grande . Esto es muy malo para los usuarios con discapacidades visuales.

Para ver varios ejemplos y artículos sobre diseños como este (hay una infinidad de opciones para elegir), vea el último número de A List Apart: Fluid Grids , el artículo anterior Cómo ajustar el tamaño del texto en CSS o el Diseño web a prueba de balas de Dan Cederholm .

Sus imágenes aún deben mostrarse con tamaños de px, pero, en general, no se considera una buena forma de dimensionar su texto con px.

Por mucho que desprecie personalmente a IE6, actualmente es el único navegador aprobado para la mayoría de los usuarios de nuestra compañía Fortune 200.

Traingamer
fuente
1
+1 rejillas fluidas era en realidad lo que estaba buscando cuando hice la pregunta. (también, ¿no debería su empresa actualizarse a IE7?)
Spoike
Si me preguntaste, deberían usar Firefox, pero en realidad no me preguntan. :-) (IE7 sería mejor que 6, pero no estoy al tanto de la toma de decisiones)
Traingamer
2

Hay una solución simple si desea utilizar px para especificar el tamaño de fuente, pero aún desea la usabilidad que proporcionan los em al colocar esto en su archivo CSS:

body {
  font-size: 62.5%;
}

Ahora especifique usted p(y otras) etiquetas como esta:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

Y así.

Codificador anónimo
fuente
2
¿No es esto altamente dependiente de que nadie toque la configuración de CSS personalizada de su navegador?
Spoike
44
Sí, deberías configurarlo font-size: 10px. css-tricks.com/forums/discussion/1230/…
m33lky el
Prefiero dejar el tamaño de fuente: 100% y usar mixins para calcular el valor em
gunnx
0

Probablemente quiera usar em para tamaños de fuente hasta que IE6 desaparezca (de su sitio). Px estará bien cuando el zoom de página (a diferencia del zoom de texto) se convierta en el comportamiento estándar.

Traingamer ya proporcionó los enlaces necesarios .

usuario73912
fuente
0

Pixel es una unidad absoluta, mientras que rem / em son unidades relativas. Para más información: https://drafts.csswg.org/css-values-3/

Debe usar la unidad relativa cuando desee que el tamaño de fuente sea adaptable de acuerdo con el tamaño de fuente del sistema porque el sistema proporciona el valor de tamaño de fuente al elemento raíz que es el elemento HTML.

En este caso, cuando la página web está abierta en Google Chrome, el tamaño de fuente del elemento HTML está establecido por Chrome, intente cambiarlo para ver el efecto en las páginas web con fuentes de unidades rem / em.

ingrese la descripción de la imagen aquí

Si lo usa pxcomo unidad para las fuentes, las fuentes no cambiarán de tamaño, mientras que las fuentes con rem/ emunit cambiarán de tamaño cuando cambie el tamaño de fuente del sistema.

Entonces use pxcuando quiera que el tamaño sea fijo y use rem/ emcuando quiera que el tamaño sea adaptable / dinámico al tamaño del sistema.

thisshri
fuente
-1

El consenso general es usar porcentajes para el tamaño de fuente, porque es más consistente en todos los navegadores / plataformas.

Sin embargo, es divertido, siempre solía usar pt para el tamaño de fuente y asumí que todos los sitios lo usaban. Normalmente no usa tamaños px en otras aplicaciones (por ejemplo, Word). Supongo que es porque son para imprimir, pero el tamaño es el mismo en un navegador web que en Word ...

Cabra descontento
fuente
-2

Evite em o px use rem en su lugar porque es más fácil encontrar el valor calculado. Pero entre em y px, px es mejor porque em es difícil de depurar.

Juan Tamad
fuente
Agregue alguna explicación adicional a su respuesta para que otros puedan aprender de ella, especialmente porque esta es una pregunta muy antigua que ya tiene toneladas de respuestas votadas
Nico Haase