Gerador de Escala Tipográfica
Crie uma escala tipográfica modular a partir de um tamanho base e uma proporção — pré-visualização ao vivo, tabela px/rem e variáveis CSS prontas para copiar.
605 visualizações
Por que uma escala modular
Em vez de escolher os tamanhos dos títulos no olho, uma escala modular multiplica um tamanho base por uma proporção fixa a cada nível: uma base de 16 px com proporção de 1,25 (terça maior) resulta em 20, 25, 31,3, 39,1, 48,8... Os tamanhos se relacionam como intervalos musicais, e toda a hierarquia permanece consistente — mude a base ou a proporção e tudo se reajusta junto.
Proporções comuns: 1,125 (segunda maior — interfaces densas), 1,25 (terça maior — a escolha segura padrão), 1,333 (quarta justa — editorial), 1,618 (proporção áurea — dramática, exige poucos níveis). As variáveis CSS geradas colam direto na sua folha de estilos; os valores em rem partem de uma raiz de 16 px.
Perguntas Frequentes
Qual proporção eu deveria escolher?
Trabalhos de produto/UI costumam ficar entre 1,125 e 1,25 (títulos não muito maiores que o corpo do texto); páginas de marketing e editoriais aguentam bem 1,333-1,618. Se o h1 parece estar "gritando", reduza a proporção um degrau em vez de ajustar um único tamanho manualmente.
Por que a escala desce abaixo da base?
Os níveis negativos (base ÷ proporção) geram legendas e textos miúdos que pertencem ao mesmo sistema — 12,8 px numa escala 16/1,25 em vez de um 13 arbitrário.
Devo usar px ou rem?
rem no CSS: usuários que aumentam o tamanho da fonte do navegador recebem uma escala proporcionalmente maior. A coluna px serve para mockups em ferramentas de design.
Ferramentas Semelhantes
Reportar um Problema
Gerador de Escala Tipográfica