Cómo definir el tamaño de fuente (font-size) con CSS

Balu5 Junio 2009 - 12:09am 3 comentarios
Enviar por Email Imprimir
Cómo definir el tamaño de fuente (font-size) con CSS 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.

Comentarios

Imagen de SebaKito

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

Imagen de baluart
baluart

Efectivamente, olvidaba ese detalle. Gracias!

Imagen de zeuder

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

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más