Texto y fuentes

Elige una fuente con font-family, y luego ajusta el tamaño, el grosor y el interlineado para un texto agradable de leer.

9 min · 3 preguntas

Una fuente es el diseño de las letras: Arial, Georgia o Times New Roman son fuentes. En CSS, la propiedad font-family elige la fuente de un fragmento de texto. Le das una lista de fuentes separadas por comas: el navegador prueba la primera; si no está instalada en el dispositivo del visitante, pasa a la siguiente, y así sucesivamente. Es un plan A, un plan B, un plan C.

body {
  font-family: Georgia, "Times New Roman", serif;
}

La última palabra de la lista es una familia genérica: serif designa las fuentes con serifas (los piececitos en los extremos de las letras, como en un periódico impreso), sans-serif designa las fuentes sin serifas (de aspecto más moderno, como Arial), y monospace designa las fuentes de ancho fijo, donde cada letra tiene el mismo ancho (ideales para el código). Fíjate en las comillas alrededor de "Times New Roman": son obligatorias siempre que el nombre de una fuente contenga espacios.

El tamaño del texto se define con font-size. Ya conoces los píxeles (16px es el tamaño por defecto de los navegadores). También existe la unidad rem: 1rem equivale al tamaño base de la página, así que 1.5rem es una vez y media ese tamaño. El grosor, es decir, lo gruesos que son los trazos de las letras, se define con font-weight: normal para el texto normal, bold para la negrita, o un número del 100 (muy fino) al 900 (muy grueso), donde 400 equivale a normal y 700 a bold.

h1 {
  font-size: 2rem;
  font-weight: 700;
}

p {
  font-size: 16px;
  font-weight: normal;
}

Un último ajuste, a menudo pasado por alto y sin embargo esencial para una lectura cómoda: line-height, la altura de línea. Controla el espacio vertical entre las líneas de un párrafo. Demasiado apretado, y las líneas se sienten asfixiadas; demasiado suelto, y el ojo se pierde. La buena práctica es un valor sin unidad, que multiplica el tamaño del texto: line-height: 1.5; hace que cada línea mida una vez y media la altura del tamaño de la fuente.

p {
  font-size: 16px;
  line-height: 1.5;
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Por qué le das a font-family varias fuentes, separadas por comas?
   • Para mezclar fuentes dentro de una misma palabra
   • Para que el navegador pruebe la siguiente si falta una fuente
   • Porque la sintaxis de CSS exige al menos tres valores
2. ¿Qué valor de font-weight corresponde a la negrita clásica (bold)?
   • 100
   • 400
   • 700
   • 900
3. Con font-size: 20px y line-height: 1.5, ¿cuánto mide de alto cada línea?
   • 20 píxeles
   • 25 píxeles
   • 30 píxeles
   • 35 píxeles