Gerador de escala tipográfica
Calcule uma escala harmoniosa de tamanhos de fonte (terça maior, quarta justa, proporção áurea) e tamanhos fluidos com clamp(). Exporte para CSS, Tailwind e SCSS.
- Grátis
- Sem cadastro
- Nenhum arquivo enviado
- Windows, Mac, Android, iPhone
Carregando a ferramenta…
Sobre esta ferramenta
Monte uma hierarquia de texto coerente: tamanho base, proporção musical (da segunda menor à proporção áurea), número de tamanhos acima e abaixo e um modo de tipografia fluida opcional com duas escalas (celular e tela grande) ligadas por clamp(). Prévia na fonte que você quiser, exportação em variáveis CSS, Tailwind ou SCSS.
Quando usar
Começar um design system
Uma escala define os tamanhos permitidos (sm, base, lg, xl…): toda a equipe usa os mesmos e as páginas continuam coerentes.
Títulos adaptados ao celular
Com a tipografia fluida, um título de 28 px no celular chega a 48 px numa tela grande, sem media query.
Deixar um site mais legível
Trocar tamanhos aleatórios por uma escala regular melhora na hora a hierarquia visual.
Como usar
- Escolha o tamanho base e a proporção da escala.
- Ative a tipografia fluida para tamanhos que acompanham a tela.
- Copie as variáveis CSS, a configuração Tailwind ou o SCSS.
Como funciona
Cada tamanho vale base × proporção^n, com n indo dos tamanhos menores (sm, xs) aos maiores (lg, xl, 2xl…). Os nomes seguem os do Tailwind CSS.
No modo fluido, duas escalas são calculadas (celular e tela grande). Para cada tamanho, a ferramenta encontra a reta que passa pelo tamanho do celular na largura mínima e pelo tamanho grande na largura máxima, e a escreve como clamp(mín, a rem + b vw, máx).
Dicas para um melhor resultado
- Uma proporção menor no celular e maior no computador evita títulos enormes no telefone.
- Mantenha o texto comum com no mínimo 16 px; 17 ou 18 px são mais confortáveis para artigos longos.
- Limite-se a 5 ou 6 tamanhos realmente usados.
- Ajuste a altura da linha: mais apertada para títulos grandes (1,1 a 1,2), mais folgada para o texto (1,5 a 1,7).
Problemas comuns e soluções
Os títulos ficam enormes no computador
A proporção está grande demais: escolha uma terça ou uma quarta, ou reduza o número de tamanhos.
O tamanho fluido não muda
Confira se a página não está com zoom e se a largura da tela está entre os dois limites escolhidos.
Os valores têm muitas casas decimais
É normal numa escala: arredondar muda a proporção. Os navegadores lidam muito bem com tamanhos decimais.
Perguntas frequentes
O que é uma escala tipográfica?
Uma série de tamanhos de fonte obtida multiplicando um tamanho base pela mesma proporção: 16 px × 1,25 = 20 px, × 1,25 = 25 px… Títulos e texto ficam em harmonia.
Qual proporção escolher?
1,2 (terça menor) ou 1,25 (terça maior) para interfaces e sites com muito texto; de 1,333 a 1,618 para títulos bem contrastados em sites editoriais ou landing pages.
O que é tipografia fluida?
Cada tamanho cresce aos poucos entre uma largura de tela de celular e uma de tela grande, graças ao clamp(). Chega de media queries para os títulos.
Por que rem?
rem acompanha o tamanho de fonte escolhido pelo visitante no navegador: seu site continua legível para quem aumentou a fonte.
Pesquisas relacionadas
Ainda com problema?
Pergunte no fórum: a categoria, a ferramenta, a ficha do seu dispositivo e o resultado do teste são preenchidos para você.