Este es un tip para trabajar con fuentes ems sin ningún problema. Recuerden que la ventaja de trabajar con ems, en lugar de pixeles, es la flexibilidad que tiene, permitiendo a los lectores poder incrementar o reducir el tamaño del texto a su gusto y antojo.
Para poder definir el tamaño de las fuentes con CSS de una manera coherente, debemos primero igualar 1em a 10px para toda la página.
body { font-size: 62.5%; /* Igualamos 1em a 10px */ }Y luego, establecer el tamaño de la fuente de las secciones o elementos de nuestro sitio, por ejemplo el contenido.
#content { font-size: 1.6em; line-height: 1.6em; }1.6em es igual a 16px. El line-height es la distancia entre las lineas.
Buen uso de la font-size
Este tipo de post siempre me parecen una gran ayuda la comunidad en general, pero creo que se podría mejorar un poquito.
Internet Explorer (todas las versiones) ignoran el punto decimal del porcentaje, por lo que interpreta el 62.5% como solo 62% y la equivalencia pra IE no seria de 10px, sino que de 9.92px
Lo mejor que se podría hacer para obtener los 10px funcionando en todos los navegadores seria utilizar un tip como este:
html{
font-size: 125%; /* Igualamos 1em a 20px */
}
body{
font-size: .5em; /* Igualamos 1em a 10px */
}
Como aquí se maneja un porcentaje redondo, no da problemas en ningún navegador.
Saludos, y me encanta este blog, se aprenden muchas cosas n.n
Efectivamente, olvidaba ese detalle. Gracias!
hola gusto en conocerte, excelentes articulos tienes por aquí
Bueno en relación al post, ¿si controlamos el tamaño de los em como si fueran pixeles, no sería lo mismo que manejar los pixeles directamente?
No es una correción, es una duda que tenido desde hace tiempo