Escala Tipográfica
Gere uma escala tipográfica modular para o seu design. Escolha o tamanho base e a proporção para criar tamanhos de título perfeitamente proporcionados.
O que é uma escala tipográfica modular?
Uma escala tipográfica modular é um conjunto de tamanhos de fonte que seguem uma proporção matemática constante, como Terça Maior (1,25x) ou Quarta Perfeita (1,333x). Cada nível de h1 a h6 é proporcionalmente maior que o anterior, criando tipografia harmoniosa e visualmente equilibrada.
Como escolher a proporção certa
Proporções menores como Minor Second (1,067) criam escalas compactas para interfaces densas. Maiores como Perfect Fourth (1,333) ou Proporção Áurea (1,618) criam contrastes dramáticos para sites editoriais. Major Third (1,25) é uma escolha segura para a maioria dos tamanhos de tela.
Usando o CSS gerado
O painel CSS gera propriedades personalizadas em :root (ex. --text-h1) e seletores diretos para cada nível de título. Cole no seu stylesheet. Use rem para dimensionamento acessível que escala com a preferência do navegador, ou px para tamanhos fixos.
Escala tipográfica e acessibilidade
Usar rem em vez de px torna sua tipografia escalável com o tamanho de fonte do sistema do usuário, um aspecto importante da acessibilidade. O WCAG recomenda que o texto possa ser redimensionado em até 200%. Uma escala modular com rem atende automaticamente a esse requisito.