Tres números deciden cómo se siente un bloque de texto: qué tan gruesas son las letras (peso), qué tan grandes (tamaño) y qué tan separadas están las líneas (interlineado). La mayoría de los problemas tipográficos en interfaces son uno de estos tres con un valor equivocado, y los tres se juzgan mejor comparando que midiendo.
Peso
El peso es el grosor de los trazos, de 100 (fino) a 900 (negro). Usa pocos pesos y que se distingan claramente:
- 400 para el texto de párrafo, 500 para etiquetas, botones y navegación.
- 600 o 700 para títulos y énfasis.
- Dos pesos juntos deben diferir al menos en 200; un 400 junto a un 500 parece un error, no una decisión.
- La tipografía grande de exhibición puede ser más liviana (300) porque los trazos grandes se siguen leyendo; el texto pequeño no debería bajar de 400.
Tamaño
Un tamaño solo significa algo junto a otro tamaño. Construye una escala donde cada paso sea claramente mayor que el anterior, de unas 1,2 veces o más: 14, 16, 20, 24, 32, 40, 48. Pocos tamaños dan una jerarquía más fuerte que muchos tamaños parecidos.
- Texto de párrafo: 16 px es el valor seguro en la web; evita bajar de 14.
- Haz evidente el salto entre un título y su texto (al menos 1,25 veces).
- Usa unidades relativas (rem) para respetar a quien aumenta el tamaño de texto del navegador.
Interlineado
El interlineado es la distancia de una línea base a la siguiente, escrita como múltiplo del tamaño de la fuente. Las líneas cortas y la tipografía grande necesitan menos; las líneas largas y la tipografía pequeña necesitan más.
- Texto de párrafo: de 1,4 a 1,6 (WCAG 1.4.12 espera que el texto aguante un interlineado de 1,5).
- Títulos: de 1,1 a 1,25.
- Etiquetas y botones de una línea: de 1 a 1,25 basta; la altura del control hace el trabajo.
- Cuanto más larga la línea (más de 70 caracteres), más interlineado necesita.
En CSS
body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.15;
}Escribe line-height sin unidad para que escale con el tamaño de cada elemento. Un line-height de 24px se hereda a los hijos como 24px, y se rompe cuando cambia su tamaño.
Para practicar
Adivina el peso te muestra una muestra con un peso, tamaño o interlineado oculto y te pide igualarlo a ojo, seis rondas, con el valor real y una regla práctica después de cada una.