Tamaño de fuente en CSS: ¿% o em?

112

Al configurar el tamaño de las fuentes en CSS, ¿debería usar un valor de porcentaje ( %) o em? ¿Puedes explicar la ventaja?

css fonts font-size

— Esteras
fuente

1

En mi opinión en 2016 no hay diferencia entre em y%. Si ingreso 1.2 em, todos los navegadores modernos piensan que he usado el 120% y, por ejemplo, si uso 0.7 em, todos los navegadores modernos piensan que he usado el 70% ... Esto es lo que he experimentado en CSS

— Mahdi Jazini

79

Hay un artículo realmente bueno sobre tipografía web en A List Apart .

Su conclusión:

Se demostró que el tamaño del texto y la altura de la línea en ems, con un porcentaje especificado en el cuerpo (y una advertencia opcional para Safari 2), proporciona texto preciso y de tamaño variable en todos los navegadores de uso común en la actualidad. Esta es una técnica que puede poner en su bolsa de equipo y usar como una mejor práctica para cambiar el tamaño del texto en CSS que satisfaga tanto a los diseñadores como a los lectores.

— Glenn Slaven
fuente

29

En realidad, line-heightsestán mejor escritos sin unidades en absoluto. Esto está permitido por la especificación y evita por completo ciertas peculiaridades del navegador realmente molestas cuando se trata emde alturas de línea basadas en

— Már Örlygsson

16

Quiero que la gente sepa que este artículo es de 2007. Desde entonces, los navegadores modernos se han vuelto más comunes, y los navegadores modernos generalmente hacen zoom en lugar de aumentar el tamaño de fuente por defecto. Debido a esto, 'px' se ha vuelto más común y, en mi opinión, es un mejor enfoque. Por supuesto, eso es discutible, pero personalmente he encontrado problemas en proyectos debido a la anidación de em.

— Mohag519

5

@ Mohag519 anidar em es una trampa peligrosa. :)

— Vishnudev K

@ Mohag519, ¿no te va a ofrecer px algo mucho más pequeño de lo previsto con dispositivos móviles que tienen una alta densidad de píxeles? No creo que queramos que nuestros sitios sean exactamente como computadoras de escritorio, pero muy pequeños en dispositivos móviles;)

— johnb003

@ johnb003 Estos dispositivos móviles tienen una proporción de píxeles de dispositivo superior a 1. Por ejemplo, el iPhone 4 tiene un ancho de pantalla físico de 640 px, pero aparece como 320 píxeles "CSS" (DPR = 2). ¡Entonces el sitio web no parece más pequeño!

— Benjamin

14

De http://archivist.incutio.com/viewlist/css-discuss/1408

%: Algunos navegadores no manejan el porcentaje para el tamaño de fuente, pero interpretan 150% como 150px. (Algunas versiones de NN4, por ejemplo). IE también tiene problemas con el porcentaje en elementos anidados. Parece que IE usa el porcentaje relativo a la ventana gráfica en lugar de relativo al elemento principal. Otro problema más (aunque correcto de acuerdo con las especificaciones de W3C), en Moz / Ns6, no puede usar el porcentaje relativo a elementos sin altura / ancho especificado.

em: A veces los navegadores utilizan un tamaño de referencia incorrecto, pero de las unidades relativas es el que presenta menos problemas. Sin embargo, a veces puede encontrarlo interpretado como px.

pt: difiere mucho entre resoluciones y no debe usarse para visualización. Sin embargo, es bastante seguro para imprimir.

px: La única unidad absoluta confiable en pantalla. Sin embargo, podría interpretarse incorrectamente en la impresión, ya que un punto generalmente consta de varios píxeles y, por lo tanto, todo se vuelve ridículamente pequeño.

— Galwegian
fuente

Sobre lo de pt. Tuve una gran discusión sobre /. sobre eso (y perdido). Tenía el mismo punto de vista que tú, es bueno saber que alguien comparte ese punto de vista :)

— Vincent McNabb

12

¿Realmente está diciendo que algunos usuarios de Netscape Navigator 4 podrían no ver mi página correctamente si uso porcentajes para los tamaños de fuente?

— novato

4

La discusión citada es de 2002. ¿Sigue siendo relevante? ¿Hay navegadores en uso activo con em o% bugs?

— Beni Cherniavsky-Paskin

1

Citar errores de hace 20 años en los navegadores no es una respuesta útil.

— d512

7

Ambos ajustan el tamaño de la fuente en relación con lo que era. 1.5em es lo mismo que 150%. La única ventaja parece ser la legibilidad, elija la que le resulte más cómoda.

— Liam
fuente

¿Alguien puede explicarme por qué esto está siendo rechazado? Así es exactamente como entendí la diferencia entre em y porcentaje. Hoy en día no hay ninguna ventaja de usar uno sobre el otro. Lo importante es que utilice un tamaño que sea relativo al tamaño de fuente base.

— Lee Theobald

1

Gracias Lee, acabo de probar esto en IE6, IE7, Firefox 3, Safari 3, Opera 9.5 y Google Chrome, ¡todos en Windows y todos me parecen iguales! <p style = "font-size: 0.6em;"> esto es una prueba </p> <p style = "font-size: 60%;"> esto es una prueba </p>

— Liam

7

La verdadera diferencia se hace evidente cuando no se usa para tamaños de fuente. Establecer un paddingde 1emno es lo mismo que 100%. emsiempre es relativo al tamaño de la fuente. Pero %podría ser relativo al tamaño de fuente, ancho, alto y probablemente algunas otras cosas que no conozco.

— Björn Tantau
fuente

5

Dado que (¿casi?) Todos los navegadores ahora cambian el tamaño de la página como un todo, en lugar de solo el texto, los problemas anteriores con pxvs. %vs ems en términos de cambio de tamaño de fuente accesible son bastante discutibles.

Entonces, la respuesta es que probablemente no importe. Utilice lo que funcione para usted.

% es bueno porque permite un cambio de tamaño relativo.

px es bueno porque es bastante fácil administrar las expectativas al usarlo.

em puede ser útil cuando también se usa para elementos de diseño, ya que puede permitir un tamaño proporcional relacionado con el tamaño del texto.

— DA.
fuente

Respuesta engañosa, especialmente para aquellos que no saben mucho sobre CSS en primer lugar. Sin tener en cuenta el hecho de que CSS define píxeles lógicos, que fue una idea terrible basada en una decisión indudablemente apresurada de adaptarse a la avalancha de dispositivos móviles con capacidad CSS hace una década, los píxeles están completamente a discreción de los navegadores y los usuarios en lo que respecta al tamaño de fuente predeterminado. , al menos. Además de eso, ahora tenemos relaciones de aspecto de pantalla muy diferentes (y no siempre dispositivos con pantalla) y resoluciones que van desde 240p hasta 2400p. Usar píxeles en CSS sin JavaScript es casi inútil.

— amn

@amn bueno, tenga en cuenta que esta respuesta tiene 8 años. Eso es MUCHO tiempo en Internet. Dicho esto, los píxeles siguen estando bien, si no son ideales. La mayoría de los navegadores (¿todos?) Se adaptan al tamaño de fuente de píxeles de manera adecuada en el dispositivo en particular. Hoy, sin embargo, normalmente usaría rem como mi unidad de medida.

— DA.

Tal vez me esté perdiendo algo, pero ¿qué beneficio tiene uno con las longitudes de píxeles? ¿Por qué son "buenos" o "ideales"? Versus em, por ejemplo. Aparte de eso, creo que las respuestas sobre SO deberían esforzarse por ser atemporales; después de todo, es una base de conocimientos. Wikipedia de la programación :) Como Wikipedia se actualiza para reflejar los hechos, también debería responder, en mi humilde opinión.

— amn

@amn No dije que fueran ideales o que tuvieran un beneficio importante real. Solo estaba respondiendo la pregunta de OP. En cuanto a esforzarse por ser atemporal, si puede predecir el futuro de la web dentro de 8 años, ¡más poder para usted! Pero no tengo tiempo para actualizar constantemente el valor de una década de mis respuestas aquí. Es de esperar que la gente sepa lo suficiente como para mirar las marcas de tiempo en las respuestas y tenerlo en cuenta.

— DA.

0

Respecto a la diferencia entre las unidades css %y em.

Por lo que tengo entendido (al menos teóricamente / conceptualmente, pero posiblemente no cómo estas dos unidades podrían implementarse en los navegadores) estas dos unidades son equivalentes, es decir, si multiplica su emvalor por 100y luego lo reemplaza empor% lo que debería ser la misma cosa?

Si realmente hay alguna diferencia real entre em y%, ¿alguien puede explicarlo (o proporcionar un enlace a una explicación)?

(Quería agregar este comentario mío donde pertenecería, es decir, con sangría justo debajo de la respuesta, "Liam, answered Sep 25 '08 at 11:21"ya que también quiero saber por qué su respuesta fue rechazada, pero no pude averiguar cómo poner mi comentario allí y, por lo tanto, tuve que escribir esta respuesta de "hilo global")

— usuario743436
fuente

-1

Como menciona Galwegian, px es el más confiable para la tipografía web, ya que todo lo demás que haces en la página se presenta principalmente en referencia a un monitor de computadora. El problema con los tamaños absolutos es que algunos navegadores (IE) no escalan los elementos de valor de píxel en una página web, por lo que cuando intenta acercar / alejar, todo se ajusta excepto esos elementos.

No sé si IE8 maneja esto correctamente, pero todos los demás proveedores de navegadores manejan los píxeles bien y sigue siendo un caso minoritario en el que un usuario necesita ampliar / disminuir el texto (este cuadro de texto en SO quizás sea la excepción). Si quieres ensuciarte mucho, siempre puedes agregar una función javascript para agrandar el tamaño de tu texto y ofrecer un botón "pequeño" / "más grande" al usuario.

— Christian P.
fuente

1

IE7 escala bien los valores de píxeles, si usa el zoom. IE6 no tenía zoom, solo tamaño de texto. El zoom se convirtió en un requisito debido a los diseñadores que usaban escalas de píxeles fijas en lugar de permitir que la página se reajustara con cambios de tamaño de texto.

— Mike Dimmick

Sigue siendo un problema con IE6, pero, de nuevo, TODO sigue siendo un problema con IE6. Si bien evité px en el pasado debido a eso, el concepto de zoom de la página web como un todo (versus solo el texto) se ha convertido en estándar y me he encontrado usando px con mucha más frecuencia.

— DA.

-1

Biblioteca de la interfaz de usuario de Yahoo ( http://developer.yahoo.com/yui/ ) tiene un buen conjunto de clases básicas de CSS que se utilizan para "restablecer" la configuración específica del navegador de modo que la base para mostrar el sitio sea la misma para todos (compatible) navegadores.

Con YUI se supone que uno usa porcentajes.

— kosoante
fuente

He estado usando el restablecimiento de YUI, pero luego me di cuenta de que la configuración de tamaño de texto de los navegadores NO FUNCIONA. No veo ningún sentido en usar% si tiene px establecido en el cuerpo, ya que rompe la configuración del tamaño del texto.

— Jason