texto tamaño negrita letra fuentes font family estilos ejemplos css fonts font-size

negrita - Tamaño de fuente en CSS-% o em?



tamaño de letra css 3 (7)

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

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

Como menciona Galwegian, px es la tipografía web más confiable, ya que todo lo demás que hace 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 escalarán elementos de valor de píxel en una página web, por lo que cuando intente acercarse / alejarse, todo se ajustará excepto esos elementos.

No sé si IE8 maneja esto correctamente, pero todos los demás proveedores de navegadores manejan correctamente los píxeles y sigue siendo un caso minoritario donde un usuario necesita agrandar / disminuir el texto (este cuadro de texto en SO quizás sea la excepción). Si quiere ensuciarse mucho, siempre puede agregar una función de JavaScript para agrandar el tamaño del texto y ofrecerle un botón "pequeño" / "más grande" al usuario.

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 px vs. % vs. em s en términos de cambio de tamaño de fuente accesible son más bien discutibles.

Entonces, la respuesta es que probablemente no importe. Usa lo que sea que funcione para ti.

% es bueno porque permite el 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 utiliza para elementos de diseño, ya que puede permitir el tamaño proporcional relacionado con el tamaño del texto.

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

%: Algunos navegadores no manejan el porcentaje del 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 W3C), en Moz / Ns6 no se puede usar el porcentaje relativo a elementos sin altura / ancho especificados.

em: a veces los navegadores usan el tamaño de referencia incorrecto, pero de las unidades relativas es el que tiene menos problemas. Sin embargo, a veces lo interpretarán como px.

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

px: la única unidad absoluta confiable en pantalla. Sin embargo, podría interpretarse erróneamente en forma impresa, ya que un punto generalmente consta de varios píxeles, por lo que todo se vuelve ridículamente pequeño.

En cuanto a la diferencia entre las unidades css % y em .

Por lo que entiendo (al menos teórica / conceptualmente, pero posiblemente no cómo estas dos unidades podrían implementarse en los navegadores) estas dos unidades son equivalentes, es decir, si multiplicas tu valor de em por 100 y luego reemplazas em por % debería ser el la misma cosa ?

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

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

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

Su conclusión:

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), mostró un texto preciso y redimensionable en todos los navegadores de uso común en la actualidad. Esta es una técnica que puede colocar en su bolsa de kit y utilizarla como una práctica recomendada para dimensionar texto en CSS que satisfaga tanto a los diseñadores como a los lectores.