Tipografía Operativa: Legibilidad como Rendimiento

La tipografía es la interfaz dentro de la interfaz. El 95% del contenido en la web es texto, y la elección tipográfica afecta directamente tres variables: la velocidad con la que el usuario procesa información, la carga emocional que asocia al contenido y el rendimiento técnico de la página.

Mi stack tipográfico actual utiliza dos familias con roles claramente definidos. Geist, la sans-serif de Vercel, maneja todo el contenido editorial: títulos, párrafos y elementos de navegación. Su diseño geométrico con terminaciones humanistas ofrece excelente legibilidad en pantalla tanto en tamaños grandes como pequeños. JetBrains Mono cubre los contextos técnicos: código, etiquetas de sistema, datos y metadatos. La distinción entre ambas familias funciona como señal cognitiva: el usuario aprende inconscientemente que la monoespaciada indica información técnica.

El costo de rendimiento de las fuentes web es significativo pero gestionable. Cada peso tipográfico representa entre 15KB y 40KB adicionales. Mi configuración carga Geist con pesos 400-900 y JetBrains Mono con pesos 400-700, utilizando font-display: swap para evitar el flash de texto invisible. El total tipográfico suma aproximadamente 120KB, que se cachea tras la primera visita.

// Escala tipográfica con propósito
h1 { font-size: clamp(1.5rem, 8vw, 6rem); }  // Hero: impacto máximo
h2 { font-size: clamp(1.5rem, 5vw, 4rem); }  // Sección: orientación
p  { font-size: 1rem; line-height: 1.6; }     // Cuerpo: legibilidad
.mono { font-size: 0.625rem; }                // Técnico: precisión

La escala tipográfica también comunica jerarquía. Los títulos en clamp() se adaptan al viewport sin media queries, garantizando que el impacto visual del H1 se mantenga desde móvil hasta pantallas ultrawide. Los textos de sistema en 9-10px monospace establecen un contraste deliberado con el contenido editorial, señalizando que esa información es metadata, no narrativa.

Una estrategia tipográfica sólida elimina una categoría completa de decisiones en el desarrollo diario. Cuando el sistema define que los labels técnicos son mono 10px uppercase con tracking amplio, ningún desarrollador necesita preguntarse qué fuente usar para el timestamp de un componente. La consistencia no surge de la disciplina individual — surge de las restricciones correctas. // TYPOGRAPHY_AUDIT: COMPLETE