Qué es una escala tipográfica modular
Una escala modular multiplica un tamaño base por la misma proporción una y otra vez: con una base de 16px y una proporción de 1,25 obtienes 16, 20, 25, 31,25 y así sucesivamente, y al dividir salen los pasos menores 12,8 y 10,24. Como todos los tamaños están relacionados por una sola proporción, títulos, texto y pies de foto parecen de la misma familia.
Por qué usar dos proporciones
En una pantalla pequeña no cabe un contraste dramático entre títulos y texto, mientras que en una grande el diseño resulta plano sin él. Por eso este generador usa una proporción para el viewport mínimo y otra para el máximo. Una combinación popular es una tercera menor (1,2) en el móvil y una tercera mayor (1,25) o una cuarta justa (1,333) en escritorio. Cada paso se convierte en su propio valor clamp(), que pasa de la escala pequeña a la grande a medida que crece el viewport.
Cómo usar las variables exportadas
La exportación es un bloque :root con variables llamadas de --step--2 a --step-6. Asígnalas a los elementos, por ejemplo h1 al paso 5, h2 al paso 4, el texto del cuerpo al paso 0 y la letra pequeña al paso −1. Como los nombres describen posiciones en la escala y no elementos, más adelante puedes reajustar todo el sistema cambiando solo el tamaño base y las proporciones.
Vigila los pasos más altos: con una proporción grande pueden superar la pauta de zoom de 2,5× del criterio WCAG 1.4.4. La tabla de pasos muestra el tamaño en ambos extremos del rango para que detectes los pasos que crecen demasiado rápido y bajes la proporción de escritorio si hace falta.
Cómo elegir una proporción
Las proporciones bajas como 1,125 o 1,2 encajan en interfaces densas, paneles de control y documentación. Las intermedias, como 1,25 y 1,333, son versátiles para páginas de marketing y blogs. Las altas, como 1,5 o la proporción áurea 1,618, crean un contraste editorial potente, pero conviene usar menos pasos para que sigan siendo prácticas.