1. ¿Por qué la tipografía es clave en el desarrollo web?

Una tipografía bien elegida mejora la legibilidad, refuerza la identidad de marca y contribuye al SEO (tiempos de carga, tiempo en página). Además, una buena tipografía es esencial para la accesibilidad, ya que usuarios con baja visión dependen de tamaños y contrastes adecuados.

2. Clasificación de fuentes

3. Propiedades CSS esenciales para tipografía

/* Propiedades más usadas */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem); /* tipografía fluida */
  line-height: 1.6;               /* legibilidad */
  letter-spacing: 0.02em;        /* espaciado */
  font-weight: 400;              /* peso regular */
  font-style: normal;            /* normal o italic */
  text-transform: none;          /* uppercase, lowercase */
}
h1, h2, h3 {
  font-family: "Montserrat", sans-serif; /* fuente de título */
  font-weight: 700;
}

Al combinar clamp() con vw y rem se consigue una tipografía que se adapta a cualquier ancho de pantalla sin romper el diseño.

4. Carga de fuentes externas

4.1 @font-face auto‑hosted

@font-face {
  font-family: "MyCustomFont";
  src: url("/fonts/MyCustomFont.woff2") format("woff2"),
       url("/fonts/MyCustomFont.woff") format("woff");
  font-weight: 300 700;      /* rangos de peso soportados */
  font-display: swap;        /* evita FOIT */
}
body { font-family: "MyCustomFont", sans-serif; }

Consejo de rendimiento: Utiliza font-display: swap o optional y sirve .woff2 como primer formato.

4.2 Google Fonts (API)

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

Google Fonts permite especificar pesos y estilos exactos, reduciendo la carga a lo estrictamente necesario.

4.3 Variable Fonts

@font-face {
  font-family: "InterVariable";
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;      /* rango completo */
  font-display: swap;
}
h1 { font-family: "InterVariable"; font-weight: 700; }

Los variable fonts reducen la cantidad de peticiones a una sola fuente que cubre múltiples pesos, anchos y estilos, mejorando significativamente el Time to Interactive.

5. Tipografía responsiva y fluid typography

Además de clamp(), existen patrones como calc() y min()/max() que permiten crear escalas tipográficas basadas en la anchura del viewport.

/* Escala modular basada en la técnica de “type‑scale” */
:root {
  --step-0: 1rem;               /* base */
  --step-1: calc(var(--step-0) * 1.125);
  --step-2: calc(var(--step-1) * 1.125);
  --step-3: calc(var(--step-2) * 1.125);
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }

Esta metodología garantiza proporciones armónicas entre títulos y párrafos en cualquier dispositivo.

6. Accesibilidad y tipografía

• Contraste: Asegúrate de que el color del texto tenga al menos una relación de contraste 4.5:1 según WCAG AA.
• Tamaño mínimo: No uses menos de 16px (1rem) como tamaño base, salvo casos de UI donde se justifique.
• Preferencias del usuario: Respeta @media (prefers-reduced-motion) y @media (prefers-contrast: high) para adaptar la tipografía.
• Lectores de pantalla: Evita usar text-transform: uppercase en contenido real; usa aria-label si necesitas visualmente mayúsculas.

7. Seguridad y políticas de contenido (CSP)

Cuando sirvas fuentes desde dominios externos, añade la directiva CSP adecuada para evitar bloqueos:

Content-Security-Policy: font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com;

Si usas @font-face con data: URLs, incluye data: en la lista de fuentes permitidas.

8. Optimización de rendimiento

1. Subconjuntos de glifos: Usa herramientas como glyphhanger o fontsubset para crear versiones ligeras que incluyan solo los caracteres necesarios.
2. Preload: Añade <link rel="preload" as="font" href="/fonts/Inter-Variable.woff2" type="font/woff2" crossorigin> para que el navegador inicie la descarga antes del render.
3. Cache‑Control: Configura Cache‑Control: public, max‑age=31536000, immutable para fuentes estáticas.
4. Lazy‑load de fuentes no críticas: Carga fuentes de encabezados primero y fuentes de cuerpo secundario mediante font-display: optional.

9. Comparativa rápida (2 columnas)