Gerador de escala tipográfica
Gere uma escala tipográfica modular a partir de um tamanho base e uma proporção, com uma proporção menor para mobile. Visualize com sua fonte e exporte tamanhos em CSS, SCSS ou Tailwind.
Carregando Gerador de escala tipográfica…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de escala tipográfica
- 1
Abra Gerador de escala tipográfica nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
Uma escala tipográfica é um conjunto de tamanhos de fonte que crescem pela mesma proporção, para que títulos, texto e legendas pareçam relacionados em vez de aleatórios. Este gerador de escala tipográfica calcula a escala a partir de um tamanho base e uma proporção, mostra uma prévia com texto real na fonte escolhida e exporta os tamanhos como código.
Como criar uma escala tipográfica
- Defina o tamanho base, geralmente 16px para o texto principal.
- Escolha uma proporção, da segunda menor (1.067) à quinta justa (1.5), a proporção áurea (1.618) e além.
- Defina o número de passos para cima (títulos) e passos para baixo (texto pequeno).
- Defina uma proporção mobile menor para que os títulos não dominem telas pequenas.
- Escolha uma fonte e digite um texto de exemplo para visualizar, depois copie o código CSS, SCSS ou Tailwind.
Como escolher uma proporção
| Proporção | Nome | Efeito |
|---|---|---|
| 1.125 | Segunda maior | Sutil, bom para apps densos |
| 1.2 | Terça menor | Equilibrado, comum em sites |
| 1.25 | Terça maior | Hierarquia clara para blogs |
| 1.333 | Quarta justa | Títulos fortes |
| 1.5 a 1.618 | Quinta justa, proporção áurea | Dramático, para landing pages |
Exemplo com 16px e 1.25
12.8px, 16px, 20px, 25px, 31.25px, 39.06px, 48.83px. Cada tamanho é o anterior multiplicado por 1.25.
Dicas
- Use uma proporção mais suave no mobile, como 1.2 em celulares e 1.333 no desktop.
- Arredonde os tamanhos para pixels inteiros ou meios pixels nos seus design tokens finais.
- Combine os tamanhos com a altura de linha: cerca de 1.5 para o texto principal e entre 1.1 e 1.25 para títulos grandes.
- Use unidades rem no CSS para que o texto respeite a configuração de fonte do navegador do usuário.
Complete seu design system com um grid do gerador de sistema de grid e cores do gerador de paleta de cores.
Perguntas frequentes
O que é uma escala tipográfica modular?
Um conjunto de tamanhos de fonte em que cada tamanho é o anterior multiplicado pela mesma proporção, o que cria um ritmo visual consistente.
Que tamanho de fonte base devo usar?
16px é o padrão dos navegadores e uma boa base para o texto principal na maioria dos sites.
Qual proporção é a melhor?
Não existe uma única melhor. 1.2 ou 1.25 servem para a maioria dos sites; 1.125 funciona em interfaces densas; 1.333 ou mais dão títulos dramáticos.
Por que usar uma proporção diferente no mobile?
Proporções grandes deixam os títulos enormes em telas pequenas. Uma proporção mobile menor mantém a hierarquia e cabe na tela.
Posso exportar para Tailwind?
Sim. Escolha o formato Tailwind para obter uma configuração fontSize com sua escala.
Os tamanhos de fonte devem ser em px ou rem?
rem é recomendado no CSS porque se ajusta às configurações do navegador do usuário. A ferramenta pode fornecer valores para usar como rem.