O que é uma escala tipográfica modular
Uma escala modular multiplica um tamanho base pela mesma proporção várias vezes: com base de 16px e proporção 1,25 você obtém 16, 20, 25, 31,25 e assim por diante, e dividindo chega aos passos menores 12,8 e 10,24. Como todos os tamanhos se relacionam por uma única proporção, títulos, texto corrido e legendas parecem da mesma família.
Por que usar duas proporções
Telas pequenas não comportam um contraste dramático entre títulos e texto, enquanto telas grandes ficam sem graça sem ele. Por isso este gerador usa uma proporção para o viewport mínimo e outra para o máximo. Uma combinação popular é a terça menor (1,2) no celular e a terça maior (1,25) ou a quarta justa (1,333) no desktop. Cada passo vira seu próprio valor clamp(), que vai da escala pequena para a grande à medida que o viewport aumenta.
Como usar as variáveis exportadas
A exportação é um bloco :root com variáveis de --step--2 a --step-6. Atribua-as aos elementos, por exemplo h1 ao passo 5, h2 ao passo 4, o texto corrido ao passo 0 e as letras miúdas ao passo −1. Como os nomes descrevem posições na escala e não elementos, você pode reajustar o sistema inteiro depois mudando apenas o tamanho base e as proporções.
Fique de olho nos passos maiores: com uma proporção alta, eles podem ultrapassar a diretriz de zoom de 2,5× do critério WCAG 1.4.4. A tabela mostra o tamanho nas duas pontas da faixa, para você identificar passos que crescem rápido demais e reduzir a proporção do desktop se for preciso.
Como escolher uma proporção
Proporções baixas como 1,125 ou 1,2 combinam com interfaces densas, dashboards e documentação. As intermediárias, como 1,25 e 1,333, são versáteis para páginas de marketing e blogs. As altas, como 1,5 ou a proporção áurea 1,618, criam um contraste editorial forte, mas pedem menos passos para continuarem práticas.