Escalas tipográficas: cómo elegí 13 pasos y por qué importa la proporción

The Elements of Typographic Style de Robert Bringhurst estableció que las relaciones tipográficas armoniosas siguen las mismas proporciones matemáticas que se encuentran en la música: la cuarta justa (1,333), la quinta justa (1,5) y la proporción áurea (1,618). Comencé con una cuarta justa y terminé con una progresión personalizada que ninguna proporción estándar produce — porque la estructura de mi contenido exigía pasos específicos entre el texto del cuerpo y los titulares de exhibición.¹

TL;DR

Una escala tipográfica genera una jerarquía de tamaños de fuente a partir de un tamaño base y una proporción matemática. Después de construir el sistema tipográfico para blakecrosley.com — 13 pasos desde 0,75rem (12px) hasta 5rem (80px), usando exclusivamente fuentes del sistema — he aprendido que la proporción importa menos que los pasos entre el texto del cuerpo y el H1. Mi escala usa una progresión de aproximadamente 1,18 entre pasos adyacentes, pero realiza saltos deliberados (de 3,875rem a 5rem) donde la estructura del contenido requiere separación visual. La comparación interactiva a continuación muestra la diferencia entre proporciones estrictas y ajustes orientados al contenido.

Mi escala tipográfica: 13 pasos

Esta es la escala real del archivo critical.css de mi sitio:

:root {
  --font-size-xs:      0.75rem;   /* 12px — metadata, timestamps */
  --font-size-sm:      0.875rem;  /* 14px — captions, fine print */
  --font-size-base:    1rem;      /* 16px — body text, default */
  --font-size-lg:      1.125rem;  /* 18px — lead paragraphs */
  --font-size-xl:      1.3125rem; /* 21px — large body, section intro */
  --font-size-2xl:     1.5625rem; /* 25px — H4, card titles */
  --font-size-3xl:     1.875rem;  /* 30px — H3 */
  --font-size-4xl:     2.25rem;   /* 36px — H2 */
  --font-size-5xl:     2.7rem;    /* 43.2px — H1 */
  --font-size-6xl:     3.25rem;   /* 52px — large H1 */
  --font-size-7xl:     3.875rem;  /* 62px — page title */
  --font-size-display: 5rem;      /* 80px — hero headline */
}

La progresión entre pasos adyacentes no es una proporción matemática estricta. Los pasos de xs a xl siguen aproximadamente 1,17-1,18x. Los pasos de 5xl a display saltan de forma más agresiva (1,20-1,29x) porque el titular hero necesita separación visual de los encabezados a nivel de página.²

¿Por qué no una proporción estricta?

Una tercera mayor estricta (1,25) desde una base de 16px produce estos pasos: 16, 20, 25, 31,25, 39,06, 48,83, 61,04. El salto del cuerpo (16px) al H3 (31,25px) es casi 2x — demasiado dramático para páginas con mucho contenido donde el H3 aparece con frecuencia. Mi escala comprime el rango medio (18, 21, 25, 30, 36) para mantener los encabezados proporcionales al texto del cuerpo, mientras expande el rango superior (43, 52, 62, 80) para la tipografía de exhibición.

La estructura del contenido determinó la escala, no las matemáticas. Probé cada paso con contenido real de publicaciones del blog y ajusté los tamaños donde la prueba de entrecerrar los ojos falló.³

Por qué fuentes del sistema

Mi pila de fuentes:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

El argumento del rendimiento

Las fuentes del sistema se cargan en cero milisegundos. Sin solicitudes de red, sin FOIT (Flash of Invisible Text), sin FOUT (Flash of Unstyled Text). Esta elección contribuye a mi puntuación perfecta de 100/100 en Lighthouse.

Las fuentes web personalizadas típicamente añaden entre 100 y 300ms al First Contentful Paint debido a las descargas de archivos de fuentes y las decisiones de renderizado del navegador. Google Fonts se carga desde un CDN (una búsqueda DNS + una solicitud HTTP como mínimo). Las fuentes autoalojadas eliminan la búsqueda DNS pero aún requieren la descarga. Las fuentes del sistema eliminan cada componente de la latencia de carga de fuentes.⁴

El argumento del diseño

Las fuentes del sistema coinciden con la plataforma. En macOS, mi sitio se renderiza en SF Pro — la misma tipografía utilizada por la interfaz del sistema macOS, Apple Mail y la interfaz de Safari. La continuidad visual entre el sistema operativo y el sitio web se siente nativa en lugar de comercial.

Linear, Vercel y Raycast utilizan el mismo enfoque. El patrón surgió de mis 16 estudios de diseño de productos: los productos que priorizan la legibilidad del contenido sobre la expresión de marca tienden a usar fuentes del sistema.

Cuándo las fuentes personalizadas valen la pena

Las fuentes personalizadas sirven para páginas de marketing, identidad de marca y tipografía de exhibición donde la tipografía ES el diseño. Mi sitio prioriza el contenido (publicaciones del blog, descripciones de proyectos), donde la tipografía debe ser transparente — los lectores deben procesar el contenido, no notar la fuente.

El sistema de pesos

Cuatro pesos manejan todas las necesidades de jerarquía:

:root {
  --font-weight-normal:   400;  /* Body text */
  --font-weight-medium:   500;  /* Navigation, labels */
  --font-weight-semibold: 600;  /* Subheadings, emphasis */
  --font-weight-bold:     700;  /* Headlines, primary actions */
}

Combinados con los 13 pasos de tamaño y cuatro niveles de opacidad, tengo 208 combinaciones potenciales (13 tamaños × 4 pesos × 4 opacidades). En la práctica, uso aproximadamente 15 combinaciones de manera consistente. El sistema proporciona flexibilidad sin requerir una decisión en cada instancia de texto — la mayoría del texto usa tamaño base, peso normal, opacidad primary.⁵

Tipografía responsiva

El problema con las proporciones únicas

Una escala tipográfica diseñada para escritorio produce encabezados sobredimensionados en dispositivos móviles. Mi tamaño display de 80px llena un viewport de 1440px de manera hermosa, pero abruma una pantalla de teléfono de 375px. En lugar de escalar todo el sistema con unidades de viewport, sobrescribo puntos de quiebre específicos:

@media (max-width: 1024px) {
  .hero__title { font-size: var(--font-size-6xl); }  /* 52px */
}

@media (max-width: 768px) {
  .hero__title { font-size: var(--font-size-3xl); }  /* 30px */
}

El texto del cuerpo permanece en 16px en todos los viewports — el texto del cuerpo no necesita escalarse porque 16px sigue siendo legible en toda pantalla moderna. Solo los tamaños de exhibición y encabezados se reducen en viewports más pequeños. El enfoque es más simple que la tipografía fluida (clamp()) y produce resultados predecibles en puntos de quiebre conocidos.⁶

Espaciado entre letras en tamaños de exhibición

La tipografía grande necesita un tracking más ajustado. A 80px, el espaciado entre letras predeterminado produce brechas visibles entre caracteres:

.hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

El espaciado entre letras de -0.03em y la altura de línea de 1.05 producen titulares ajustados e impactantes. El texto del cuerpo a 16px usa el espaciado entre letras predeterminado con una generosa altura de línea de 1.7 para legibilidad. El contraste entre titulares ajustados y texto del cuerpo aireado crea ritmo visual sin decoración.⁷

Probando la tipografía

La prueba de entrecerrar los ojos

Desenfoque la vista o aléjese de la pantalla. La jerarquía de encabezados debe permanecer visualmente distinta en cada nivel. Si el H3 y el H4 se mezclan, la proporción es demasiado pequeña para la fuente elegida.

Apliqué la prueba de entrecerrar los ojos a mi escala e identifiqué que --font-size-xl (21px) y --font-size-2xl (25px) se confundían al principio. Añadir una diferencia de peso (xl usa normal 400, 2xl usa semibold 600) resolvió la distinción sin cambiar tamaños. El peso proporciona jerarquía independientemente del tamaño.⁸

La prueba de contenido

Llene cada nivel de encabezado con contenido real. El texto de relleno enmascara los problemas de jerarquía porque “Lorem Ipsum” carece de la variación de peso visual del lenguaje real. Pruebo cada ajuste de escala contra mi publicación de blog más larga (corrección de errores de Hamming, más de 2.000 palabras con H2, H3, H4, bloques de código, tablas y notas al pie). Si la escala funciona para el contenido más complejo, funciona para todo.

Conclusiones clave

Para diseñadores: - Comience con un tamaño base de 16px y pruebe proporciones entre 1,15 y 1,25 contra contenido real; las proporciones matemáticas estrictas a menudo requieren ajustes orientados al contenido en los extremos - Use la prueba de entrecerrar los ojos y la prueba de contenido antes de finalizar; la distinción visual en cada nivel de encabezado importa más que la pureza matemática

Para desarrolladores: - Defina las escalas tipográficas como propiedades personalizadas de CSS a nivel de :root; haga referencia a var(--font-size-*) en todo el código para prevenir que se acumulen tamaños de fuente arbitrarios - Considere las fuentes del sistema antes que las fuentes web personalizadas; el ahorro de 100-300ms en la carga de fuentes se acumula en cada carga de página, y las fuentes del sistema proporcionan legibilidad nativa de la plataforma - Use sobrescrituras de puntos de quiebre para tamaños de exhibición en lugar de tipografía fluida si los resultados predecibles en anchos conocidos importan más que la interpolación suave

Referencias