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

Question

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

Answer 1

Hay un muy buen artículo sobre tipografía web en A List Apart .

Su conclusión:

  

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), se mostró para proporcionar   Texto preciso y redimensionable en todo   Los navegadores de uso común hoy en día. Esto es   Una técnica que puedes poner en tu kit.   Bolsa y uso como una buena práctica para   Tamaño del texto en CSS que satisface tanto   diseñadores y lectores.

Answer 2

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

  

%: algunos navegadores no manejan   Porcentaje para el tamaño de letra pero interpreta   150% como 150px. (Algunas versiones de NN4,   por ejemplo.) IE también tiene problemas   con porcentaje sobre elementos anidados. Eso   Parece que IE utiliza el porcentaje en relación con   vista en lugar de en relación con   elemento padre Otro problema mas   (aunque correcto de acuerdo con el W3C   especificaciones), en Moz / Ns6, no puedes usar   porcentaje relativo a elementos sin   alto / ancho especificado.

     

em: A veces los navegadores usan el mal   Tamaño de referencia, pero del relativo.   unidades es la que tiene menos   problemas. Usted puede encontrarlo   interpretado como px a veces sin embargo.

     

pt: difiere mucho entre   Resoluciones, y no deben ser utilizadas.   para mostrar. Es bastante seguro para   uso de impresión sin embargo.

     

px: la única unidad absoluta confiable en   pantalla. Podría ser erróneamente   interpretado en letra impresa, sin embargo, como uno   punto suele constar de varios   píxeles, y así todo se convierte   ridículamente pequeño.   

Answer 3

Ambos ajustan el tamaño de 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.

Answer 4

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

Entonces, la respuesta es que probablemente no importa. Usa lo que te funcione.

  

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

     

px es bueno porque es bastante fácil de manejar las expectativas cuando se usa.

     

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

Answer 5

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

Answer 6

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

Por lo que yo entiendo (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 multiplicas tu valor de em con < código> 100 y luego reemplace em con % ¿debería ser lo mismo?

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

(Quería agregar este comentario mío al que pertenecería, es decir, con sangría justo debajo de la respuesta de " Liam, respondió el 25 de septiembre de 2008 a las 11: 21 " ya que también quiero Sabía por qué su respuesta fue rechazada, pero no pude averiguar cómo poner mi comentario allí y, por lo tanto, tuve que escribir este " hilo global " respuesta)

Answer 7

Como menciona Galwegian, px es el más confiable para la tipografía web, ya que todo lo 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 escalan los elementos de valor de píxel en una página web, por lo que cuando intentes ampliar la entrada / salida, 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 muy bien y todavía es un caso minoritario en el que un usuario necesita ampliar / disminuir texto (este cuadro de texto en SO quizás sea la excepción). Si desea ensuciarse mucho, siempre puede agregar una función javascript para aumentar el tamaño del texto y ofrecer un " pequeño " / " más grande " Botón para el usuario.

Answer 8

Biblioteca de la interfaz de usuario de Yahoo ( http://developer.yahoo.com/yui/ ) tiene un buen conjunto de clases básicas de css utilizadas para " reiniciar " la configuración específica del navegador para que la base para mostrar el sitio sea la misma para todos los navegadores (compatibles).

Se supone que con YUI se usan porcentajes.