Type Scale Generator
Gere escalas tipográficas modulares com variáveis CSS e config Tailwind.
① Defina tamanho base e ratio ② Clique em Gerar Escala ③ Copie variáveis CSS ou tokens
O que é uma escala tipográfica modular?
Uma escala tipográfica modular é uma sequência de tamanhos de fonte onde cada passo é o anterior multiplicado por um ratio fixo. Ratios comuns incluem a Quarta Perfeita (1.333), a Terça Maior (1.250) e a Proporção Áurea (1.618). Usar uma escala garante harmonia visual entre títulos, corpo de texto e legendas.
Perguntas frequentes
Uma escala tipográfica modular é um conjunto de tamanhos de fonte derivados multiplicando um tamanho base por um ratio constante. Em vez de escolher tamanhos arbitrariamente, você obtém valores matematicamente relacionados que criam harmonia visual.
Cada passo n relativo à base usa a fórmula: tamanho = base × ratio^n. Para n=0 o tamanho base, n=1 base × ratio, passos negativos base × ratio^(-1).
Minor Second e Major Second para escalas sutis. Minor e Major Third para contraste moderado. Perfect Fourth (1.333) é uma escolha clássica. Perfect Fifth e Golden Ratio para tipografia display dramática.
Copie o CSS Variables e cole dentro de :root { }. Então use as variáveis: font-size: var(--text-xl).
Copie o Config Tailwind e cole em theme.fontSize no tailwind.config.js. Use classes como text-xl com seus valores personalizados.
rem para tamanhos de fonte — respeita as preferências do navegador. em para tamanhos relativos ao componente pai. px apenas para elementos decorativos fixos.
Hierarquia visual clara guia os leitores. WCAG 1.4.4 exige que o texto seja redimensionável a 200% — escalas rem garantem isso.