La tipografía es la mitad de la interfaz: organiza la jerarquía, marca el tono y condiciona la lectura. La clave es ser expresivo sin perder accesibilidad. Aquí tienes un enfoque práctico.

---

1. Usa fuentes variables con cabeza

• Menos archivos, más control: una variable font te da pesos/ejes sin múltiples descargas. Limita los ejes que sirves (ej. wght 400–700).
• Carga simple: si usas Next, importa con next/font y restringe subsets y pesos necesarios.
• No lo llenes de adornos: evita ejes decorativos si restan legibilidad (slant/extremo).

:root {
  --font-body: "InterVariable", system-ui, -apple-system, sans-serif;
  --font-title: "GeneralSansVariable", system-ui, sans-serif;
}

2. Tamaños fluidos con clamp()

• Haz que los títulos crezcan en desktop y sigan legibles en móvil.
• Regla rápida: clamp(tamaño-min, factor * vw + offset, tamaño-max).

h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  line-height: 1.1;
}

body {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.1rem);
  line-height: 1.55;
}

3. Ritmo y legibilidad antes que forma

• Line-height: 1.4–1.6 para texto; 1.1–1.3 para títulos.
• Ancho de columna: 60–80 caracteres evita fatiga. Usa max-width: 65ch.
• Espaciado: listas y párrafos con margin-block consistente; mayúsculas con letter-spacing: 0.02em.

.prose {
  max-width: 65ch;
  letter-spacing: 0.01em;
}

.prose p + p {
  margin-top: 0.85em;
}

4. Contraste y fondos amables

• Revisa contraste (AA mínimo: 4.5:1 en texto normal).
• Evita texto sobre fotos ruidosas; añade overlays o usa tarjetas sólidas.
• Usa tokens para colores y prueba ambos temas si tienes dark mode.

5. Animaciones con cuidado

• Si animas texto, respeta prefers-reduced-motion.
• Usa transiciones cortas (120–180ms) en color/background para estados hover/focus.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

6. Sistema tipográfico reusable

Define escala y tokens y úsalos en componentes, no en línea.

:root {
  --fs-xs: 0.85rem;
  --fs-sm: 0.95rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.4rem;
}

.heading-1 { font: 700 var(--fs-2xl) / 1.1 var(--font-title); }
.heading-2 { font: 700 var(--fs-xl) / 1.2 var(--font-title); }
.text-body { font: 400 var(--fs-md) / 1.55 var(--font-body); }
.text-small { font: 500 var(--fs-sm) / 1.45 var(--font-body); }

7. Checklist rápida

1. Fuentes variables con pesos limitados.
2. Títulos y body con clamp().
3. Columnas a ~65ch; line-height ajustado.
4. Contraste AA en ambos temas.
5. Animaciones opt-out con prefers-reduced-motion.
6. Tokens tipográficos y uso consistente en componentes.

Conclusión

La tipografía marca la personalidad de tu UI: puedes ser expresivo sin perder claridad si partes de una base accesible (contraste, ritmo, tamaños fluidos) y usas herramientas modernas como fuentes variables y clamp(). Empieza con una escala y unos tokens, pruébalos en móvil y desktop, y mejora sobre esa base.