Tipografía para web: guía práctica para elegir y combinar fuentes

La tipografía es el 90% del diseño web. Elegir bien las fuentes y configurarlas con cuidado hace que una web se sienta cara y se lea sin esfuerzo. Esta es mi guía rápida.

1. Empieza con una sola familia

Una buena fuente con varios pesos (regular, medium, bold) suele bastar. Si quieres contraste, combina como mucho dos: una para titulares y otra para el cuerpo.

Regla segura: una sans para el cuerpo (Inter, Work Sans) + una con personalidad para los títulos (Space Grotesk, Fraunces).

2. Define una escala tipográfica

No elijas tamaños al azar. Usa una escala modular (por ejemplo, ratio 1.25) para que todo guarde proporción.

h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
p  { font-size: 1.0625rem; line-height: 1.7; }

3. Cuida la legibilidad

• Longitud de línea entre 50 y 75 caracteres.
• Interlineado de 1,5–1,7 en el cuerpo de texto.
• Contraste suficiente entre texto y fondo (mínimo 4.5:1).

4. Optimiza el rendimiento

Las fuentes mal cargadas penalizan el LCP. Carga solo los pesos que uses y aplica font-display: swap para que el texto sea visible mientras carga.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

5. Jerarquía con peso y color, no solo tamaño

Diferenciar con grosor, color y espaciado da más matices que cambiar el tamaño cada vez. Reserva el tamaño grande para lo realmente importante.

---

Con una familia bien elegida, una escala coherente y buena legibilidad, tu web ya parte con ventaja. La tipografía es invisible cuando está bien hecha: solo se nota cuando falla.