| Nome | Tamanho | Altura da linha | Espaçamento entre letras | Peso |
|---|
Insira o tamanho base em pixels, escolha a proporção de escala e defina os pares de fonte para headlines e corpo. A escala é calculada instantaneamente com todos os tokens prontos para exportar.
O Tamanho Base é o ponto de partida da escala — geralmente o tamanho do texto de corpo principal do produto. Para a maioria dos produtos digitais, valores entre 14px e 18px funcionam bem como base.
A Proporção de Escala determina a progressão matemática entre os níveis tipográficos. Quanto maior a proporção, maior o salto entre cada nível:
A ferramenta separa os pares de fonte em dois grupos — uma configuração que reflete a realidade dos design systems modernos:
Headlines e subtítulos: fonte usada nos níveis display, headline e title. Em geral, uma fonte com mais personalidade e peso visual.
Corpo e legendas: fonte usada nos níveis body, label e caption. Prioriza legibilidade em tamanhos menores e em longos blocos de texto.
Insira o nome exato da fonte como ela aparece no Google Fonts ou na sua biblioteca de fontes. A ferramenta carrega e aplica a fonte no preview em tempo real.
O campo Convenção de Nomenclatura define como os tokens serão nomeados no código exportado:
display-large, headline-medium, body-small. Padrão recomendado para produtos Android e sistemas que seguem o Material Designtext-xs, text-sm, text-base, text-lg, text-xl. Ideal para projetos web com TailwindO campo Texto de Pré-visualização permite inserir qualquer texto para ver como a escala se comporta com o conteúdo real do produto. Em vez de avaliar a escala com texto genérico, teste com headlines e parágrafos reais do seu produto — isso revela inconsistências que só aparecem em contexto.
Após validar a escala visualmente, copie os tokens no formato da sua stack:
:root {} com font-size, line-height e letter-spacing para cada nívelDefinir tamanhos de fonte manualmente — escolhendo 14px, 16px, 20px, 28px, 36px um por um — é o padrão de quem está começando. O problema aparece quando o produto escala: cada designer toma suas próprias decisões, os tamanhos se multiplicam sem lógica, e o código acumula dezenas de valores de font-size sem relação entre si.
Uma escala matemática resolve isso na raiz. A partir de um único tamanho base e uma proporção, todos os níveis tipográficos são calculados com a mesma lógica. O resultado é uma hierarquia visualmente harmônica — não porque “parece certo”, mas porque segue uma progressão consistente.
Quando a escala precisar mudar, você altera o tamanho base ou a proporção. Todos os tokens se atualizam em cascata, sem precisar revisar cada componente individualmente.
Cada nível da escala gerado pela ferramenta é um token tipográfico — uma variável nomeada que armazena não apenas o tamanho da fonte, mas também o line-height e o letter-spacing correspondentes.
Em vez de usar font-size: 22.66px diretamente no componente, o time passa a referenciar --text-title-large. Isso cria uma camada de abstração com três vantagens práticas:
Consistência: qualquer componente que usa --text-title-large vai se atualizar automaticamente se o token mudar. Não há busca manual por valores no código.
Comunicação design-dev: o nome do token no Figma é idêntico ao nome no código, eliminando a tradução no handoff.
Suporte multiplataforma: o mesmo token semântico (title-large) pode ter implementações diferentes em CSS, Android XML e Flutter Dart — todos exportados por esta ferramenta.
A convenção de nomenclatura Material, adotada como padrão nesta ferramenta, divide a escala em cinco categorias funcionais:
| Categoria | Níveis | Uso principal |
|---|---|---|
| Display | Large, Medium, Small | Títulos de destaque, heroes, banners |
| Headline | Large, Medium, Small | Títulos de seção, cabeçalhos de página |
| Title | Large, Medium, Small | Títulos de card, cabeçalhos de lista |
| Body | Large, Medium, Small | Texto de parágrafo, descrições, conteúdo |
| Label | Large, Medium, Small | Labels de botão, legendas, badges, captions |
Cada categoria tem características de line-height e letter-spacing calibradas para o seu uso — valores que a ferramenta calcula automaticamente junto com o tamanho da fonte.
Uma escala tipográfica bem estruturada contribui diretamente para a acessibilidade do produto. Dois pontos críticos:
Tamanho mínimo de corpo: as diretrizes WCAG recomendam no mínimo 16px para texto de corpo em produtos web. Tamanhos menores são aceitáveis em labels e legendas, mas nunca em textos longos ou instruções críticas.
Line-height adequado: espaçamento entre linhas muito comprimido prejudica a legibilidade, especialmente para usuários com dislexia. O valor recomendado é entre 1,4 e 1,6 para texto de corpo. A ferramenta calcula automaticamente o line-height proporcional para cada nível da escala.
É uma progressão de tamanhos de fonte calculada matematicamente a partir de um tamanho base e uma proporção de escala. Em vez de escolher tamanhos arbitrários, a escala garante que todos os níveis tipográficos do produto sigam uma lógica consistente — criando hierarquia visual harmônica e tokens fáceis de manter.
Depende do produto. Para a maioria dos produtos digitais, a Quarta Perfeita (1,333) — padrão do Material Design — oferece o melhor equilíbrio entre hierarquia clara e progressão suave. Para produtos com muita informação densa (dashboards, SaaS), a Terça Maior (1,25) cria saltos menores e mais sutis. Para produtos com forte apelo visual, a Quinta Perfeita (1,5) ou a Razão Áurea (1,618) geram mais impacto.
Sim. Insira o nome da fonte exatamente como aparece no Google Fonts e ela será carregada e aplicada no preview em tempo real. Para fontes locais ou de licença privada, o preview pode não carregar, mas os tokens são gerados normalmente com o nome da fonte inserido.
Tokens tipográficos são variáveis nomeadas que armazenam decisões de tipografia — tamanho, line-height e letter-spacing — em um formato compartilhado entre design e desenvolvimento. Em vez de usar valores numéricos diretamente no código, o time referencia --text-body-large, o que facilita manutenção, garantia de consistência e suporte a temas.
Sim. Além dos formatos web (CSS e SCSS), a ferramenta exporta em Android XML — pronto para importar no Android Studio — e Flutter Dart — com TextStyle para cada nível tipográfico. É o diferencial principal desta ferramenta em relação às alternativas disponíveis no mercado.
Sim. A ferramenta é gratuita e os tokens gerados são de uso livre, sem nenhuma restrição de licença.
O Nielsen Norman Group sintetizou os princípios de escolha cromática para interfaces. Vale 3 minutos antes de começar a gerar sua escala:
