Curso de CSS / fuentes, tamaño de texto y altura de línea

Usa font-family para definir una lista de fuentes de respaldo, font-size para establecer el tamaño del texto y line-height para controlar el espaciado entre líneas. Una altura de línea sin unidad se escala con el tamaño de fuente de cada elemento, lo que facilita la gestión de los estilos de texto heredados.

Define una lista ordenada de fuentes de respaldo

body {

  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;

}

El navegador revisa la lista de fuentes en orden. Si una fuente no está disponible o carece de un carácter, otra fuente puede renderizar ese carácter, por lo que una oración puede usar varias fuentes. sans-serif es una familia genérica sin serifas, en lugar de un producto de fuente en particular. Escribe entre comillas los nombres de fuentes que contienen espacios.

Listar una fuente en font-family no la descarga. Este ejemplo usa fuentes instaladas y no carga ninguna fuente web por separado. Para usar una fuente web, proporciona el archivo de la fuente a través de @font-face o una hoja de estilo del proveedor, y comprueba la URL y el permiso para usarla. Vea MDN: familia tipográfica.

Elige el tamaño y el grosor de la fuente para cada función

rem se basa en el tamaño de fuente del elemento raíz html. Las diferentes preferencias del navegador pueden dar como resultado diferentes valores en píxeles para el mismo 1rem. Antes de cambiar el texto a píxeles fijos porque se ve pequeño, verifica el valor raíz y la fuente real. Incluso si el tamaño es igual, el tamaño visual y la posición del salto de línea varían según el diseño de la fuente. Al seleccionar una unidad, primero distingue entre CSS Colores y Unidades: px, em, rem y Porcentajes.

400 usualmente corresponde a normal, y 700 corresponde a bold. Los resultados variarán dependiendo del peso proporcionado por la fuente, y los pesos faltantes pueden ser reemplazados por valores cercanos o sintetizados. Los significados importantes en el documento se expresan utilizando strong de HTML, y el grosor visual se controla usando CSS. No todas las letras en negrita son semánticamente significativas.

Compara la herencia de line-height sin unidad y en em

line-height ayuda a determinar la altura de una caja de línea; no significa simplemente el espacio vacío entre caracteres, y no es lo mismo que la altura de un glifo. Usa margin por separado para el espaciado entre párrafos. Para más detalles, vea CSS Estilización de Párrafos y Listas.

Compara cuando el tamaño de fuente del padre es 16px y el tamaño de fuente del hijo es 32px. El valor line-height: 1.6 del padre se hereda como múltiplo, resultando en una altura de línea del hijo de 51.2px. Con line-height: 1.6em, el hijo hereda la longitud de 25.6px calculada en el padre. Si el texto grande del elemento hijo ocupan varias líneas, las líneas pueden aparecer abarrotadas o superpuestas.

Estos cálculos de herencia asumen que el hijo no tiene una declaración line-height separada. Un valor declarado en el hijo tiene prioridad sobre uno heredado. Una línea base sin unidades facilita ajustar los tamaños de los encabezados y otros textos mientras se mantiene una altura de línea proporcional. Consulte MDN: altura de línea.

Limita la anchura de lectura

max-width: 65ch limita el ancho de lectura usando el ancho de avance del glifo “0” de la fuente. No garantiza exactamente 65 caracteres por línea. El ajuste real depende de la fuente, el grosor, los caracteres y el ancho disponible. Elige una anchura adecuada leyendo párrafos largos de manera realista.

La referencia de longitud de CSS define unidades relativas a la fuente, incluyendo ch, y explica sus medidas de referencia. Vea MDN: length.

Comprueba las fuentes utilizadas y los valores calculados

Guarda todo el código siguiente en UTF-8 en fonts.html y ábrelo en el navegador. Se incluyen párrafos con fuentes pequeñas y párrafos de comparación de 32px para comprobar la relación entre tamaño y espaciado de línea.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Compare fonts and line spacing</title>
  <style>
    html { font-size: 100%; }
    body { margin: 24px; color: #333; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }
    main { max-width: 65ch; }
    h1 { font-size: 2rem; font-weight: 700; }
    .copy { font-size: 1rem; font-weight: 400; line-height: 1.6; }
    .compare { font-size: 16px; margin-block: 24px; padding: 16px; background: #eef6f2; }
    .unitless { line-height: 1.6; }
    .length { line-height: 1.6em; }
    .large { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <main>
    <h1>Small Garden fonts</h1>
    <p class="copy">The garden has plants that prefer sunlight and plants that grow in shade. Read their labels to find a suitable location for each one. Adjust the line spacing of this long paragraph to compare how easily the same text can be read.</p>
    <h2>Unitless line height</h2>
    <div class="compare unitless"><p class="large">Line spacing scales with the font size.</p></div>
    <h2>Line spacing specified by em</h2>
    <div class="compare length"><p class="large">The computed line height is inherited from the parent.</p></div>
  </main>
</body>
</html>

1. Selecciona el párrafo del cuerpo en las Herramientas para desarrolladores. El valor font-family de Computed es una lista de candidatas; no identifica por sí solo la fuente utilizada para dibujar el texto. En Chrome·Edge, puedes comprobar las fuentes utilizadas en Rendered Fonts, al final del panel Computed. Otros navegadores pueden tener estructuras de menú diferentes, como un panel dedicado para fuentes.
2. Compara la altura de línea calculada de dos párrafos .large. El valor sin unidad es 51.2px y el valor en em es 25.6px. Cambia el 1.6em del segundo elemento padre a 1.6 para ver si la diferencia desaparece, luego revierte.
3. Cambia la altura de línea de .copy a 1.2 y 1.8 respectivamente. Asegúrate de que la colocación de la línea cambie mientras se mantiene el tamaño de la fuente. Es difícil notar la diferencia solo mirando frases cortas de una línea, así que usa párrafos largos.
4. Cambia el ancho máximo de main a 45ch. Comprueba si el párrafo se ajusta antes y luego vuelve a 65ch. Si el ancho de tu ventana ya es lo suficientemente estrecho, cambiar el límite superior puede hacer una pequeña diferencia.

La guía de Chrome DevTools sobre fuentes locales también explica cómo inspeccionar las fuentes renderizadas. Si falta la fuente esperada, comprueba su instalación y los caracteres compatibles. Para una fuente web vinculada por separado, inspecciona su respuesta y cualquier error que la bloquee en Red. Una fuente instalada localmente se puede usar sin una solicitud de red, por lo que una solicitud ausente por sí sola no indica un fallo de la fuente.