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

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

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.

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 nesteds. 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.

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.

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.

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”)

La diferencia real se pone de manifiesto cuando la usas no para tamaños de fuente. Configurar un padding de 1em no es lo mismo que 100% . em es siempre relativo al tamaño de fuente. Pero % puede ser relativo al tamaño de fuente, ancho, alto y probablemente algunas otras cosas que desconozco.

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.

La biblioteca de la interfaz de usuario de Yahoo ( http://developer.yahoo.com/yui/ ) tiene un buen conjunto de clases base de CSS usadas para “restablecer” la configuración específica del navegador de manera que la base para mostrar el sitio sea la misma para todos (compatible) navegadores.

Con YUI se supone que debe usar porcentajes.