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 — las propiedades personalizadas de CSS funcionan de forma nativa en todo navegador, sin paso de compilación - 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

Preguntas frecuentes

¿Qué es una escala tipográfica y cómo elijo una?

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. Entre las proporciones comunes están la tercera mayor (1,25), la cuarta justa (1,333) y la quinta justa (1,5).¹ Comience con una 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, porque el salto entre el texto del cuerpo y el H3 puede resultar demasiado dramático para páginas con mucho contenido.

¿Por qué la proporción importa menos que los pasos entre el cuerpo y el H1?

Una tercera mayor estricta (1,25) desde 16px produce un salto de casi 2x del cuerpo al H3 (de 16px a 31,25px), lo que abruma a las páginas con mucho contenido donde el H3 aparece con frecuencia. Mi escala comprime el rango medio (18, 21, 25, 30, 36px) para mantener los encabezados proporcionales al texto del cuerpo, mientras expande el rango superior (43, 52, 62, 80px) para la tipografía de exhibición.² La estructura del contenido debe determinar la escala, no las matemáticas. Pruebe cada paso contra publicaciones reales del blog y ajuste donde la prueba de entrecerrar los ojos falle.³

¿Debo usar fuentes del sistema o fuentes web personalizadas?

Las fuentes del sistema se cargan en cero milisegundos, sin solicitudes de red, sin FOIT y sin FOUT, y contribuyen directamente a las puntuaciones de rendimiento en Lighthouse. Las fuentes web personalizadas añaden 100-300ms al First Contentful Paint.⁴ Use fuentes del sistema en sitios centrados en el contenido, donde la tipografía debe ser transparente: el lector procesa el contenido sin reparar en la fuente. Reserve las fuentes personalizadas para páginas de marketing e identidad de marca, donde la tipografía ES el diseño.

¿Cómo pruebo si mi escala tipográfica funciona?

Dos pruebas detectan la mayoría de los problemas. La prueba de entrecerrar los ojos: desenfoque la vista o aléjese de la pantalla y verifique que cada nivel de encabezado permanezca visualmente distinto. Si dos niveles adyacentes se mezclan, añada una diferencia de peso en lugar de cambiar los tamaños.⁸ La prueba de contenido: llene cada nivel de encabezado con contenido real de su página más larga y compleja. El texto de relleno enmascara los problemas de jerarquía porque “Lorem Ipsum” carece de la variación de peso visual del lenguaje real.³

¿Cómo debe escalar la tipografía entre distintos tamaños de pantalla?

Mantenga el texto del cuerpo en 16px en todos los viewports, ya que sigue siendo legible en toda pantalla moderna. Reduzca solo los tamaños de exhibición y de encabezados en viewports más pequeños, usando sobrescrituras de puntos de quiebre en lugar de tipografía fluida (clamp()). El enfoque es más simple y produce resultados predecibles en anchos conocidos.⁶ En tamaños de exhibición (60px o más), ajuste el espaciado entre letras a aproximadamente -0.03em, porque la tipografía grande produce brechas visibles con el tracking predeterminado.⁷

Referencias