--- title: Gerador de Escala Tipográfica para Design System date: 2026-05-03T15:11:58Z modified: 2026-07-31T15:33:13Z permalink: "https://camaraux.com.br/ferramentas/gerador-escala-tipografica/" type: page status: publish excerpt: Defina tamanho base, proporção de escala e pares de fonte. Visualize a hierarquia tipográfica em tempo real e exporte tokens prontos para CSS, SCSS, Android XML, Flutter Dart e React. Desenvolvido para UI/UX designers que precisam de consistência tipográfica em qualquer plataforma. wpid: 6005 rank_math_title: "Gerador de Escala Tipográfica para Design System | CamaraUX" rank_math_description: "Gere escalas tipográficas com proporção matemática. Dois pares de fonte, preview em tempo real e exportação para CSS, SCSS, Android, Flutter e React. Grátis.\\n" rank_math_focus_keyword: escala tipográfica,gerador de escala tipográfica,gerador featured_image: /wp-content/uploads/2026/05/Gerador-de-escala-tipografica-para-design-system-com-preview-em-tempo-real-—-fontes-Sora-e-Source-Sans-3-com-proporcao-Terca-maior-125.webp featured_image_alt: Gerador de escala tipográfica para design system com preview em tempo real — fontes Sora e Source Sans 3 com proporção Terça maior 1,25 parent: 5900 ancestors: - 5900 children: [] author: Lucas Camara timestamp: 2026-07-31T15:33:13Z tags: [] --- Ferramenta Tipografia Defina tamanho base, proporção de escala e pares de fonte. Visualize a hierarquia tipográfica em tempo real e exporte tokens prontos para CSS, SCSS, Android XML, Flutter Dart e React. Desenvolvido para UI/UX designers que precisam de consistência tipográfica em qualquer plataforma. Inicio Configurações Fontes Misturar Títulos e subtítulos Inter Texto e legendas Inter Tamanho base da fonte **18 px** Proporção de escala Segunda menor (1,067) Segunda maior (1,125) Terça menor (1,2) Terça maior (1,25) Quarta perfeita (1,333) Quinta perfeita (1,5) Razão áurea (1,618) Convenção de nomenclatura Semântica Material Numérica Exemplos de pré-visualização Títulos O título principal do seu produto Corpo Este é um exemplo de como o texto de corpo aparece na interface. A legibilidade depende do tamanho, do line-height e do par de fontes escolhido. Pré-visualização Tabela de escala### Resumo visual PX REM EM PT Copiar tabela | Nome | Tamanho | Altura da linha | Espaçamento entre letras | Peso | | --- | --- | --- | --- | --- | Web CSS Web SCSS Android XML Flutter Dart React PX REM EM PT Copiar ## Como usar o gerador de escala tipográfica 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. ### 1. Defina o tamanho base e a proporção 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: - **Quarta perfeita (1,333)** — padrão do Material Design. Progressão equilibrada para produtos com hierarquia clara entre display, headline, título e corpo - **Quinta perfeita (1,5)** — saltos maiores entre níveis. Indicado para produtos com forte apelo visual ou landing pages - **Terça maior (1,25)** — progressão mais sutil. Ideal para produtos densos em informação como dashboards e SaaS enterprise - **Razão áurea (1,618)** — progressão clássica com fundamentação estética. Funciona bem em produtos editoriais e de conteúdo ### 2. Configure os pares de fonte A ferramenta separa os pares de fonte em dois grupos — uma configuração que reflete a realidade dos [design systems](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-systems-figma.md) 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. ### 3. Escolha a convenção de nomenclatura O campo **Convenção de Nomenclatura** define como os tokens serão nomeados no código exportado: - **Material** — nomenclatura do Material Design 3: `display-large`, `headline-medium`, `body-small`. Padrão recomendado para produtos Android e sistemas que seguem o Material Design - **Tailwind** — nomenclatura do Tailwind CSS: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`. Ideal para projetos web com Tailwind ### 4. Visualize com texto real O 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. ### 5. Exporte para a sua plataforma Após validar a escala visualmente, copie os tokens no formato da sua stack: - **Web CSS** — variáveis CSS prontas no formato `:root {}` com font-size, line-height e letter-spacing para cada nível - **Web SCSS** — mesmo formato em SCSS, compatível com projetos que usam pré-processador - **Android XML** — arquivo de recursos XML pronto para importar no Android Studio - **Flutter Dart** — código Dart com TextStyle para cada nível tipográfico, pronto para usar no Flutter - **React** — objeto JavaScript com os estilos tipográficos, compatível com styled-components e outros frameworks CSS-in-JS ## Por que usar uma escala matemática, não tamanhos arbitrários Definir 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. ## Tokens tipográficos: o que são e como usar no design system 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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/figma-ferramenta-ux-design.md) é idêntico ao nome no código, eliminando a tradução no [handoff](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/documentacao-de-design-handoff-para-desenvolvedores.md). **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. ## Hierarquia tipográfica no Material Design 3 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. ## Tipografia e acessibilidade: o mínimo que todo produto precisa Uma escala tipográfica bem estruturada contribui diretamente para a [acessibilidade](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/acessibilidade-design-systems-inclusao-wcag.md) 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. ## Perguntas frequentes ### O que é uma escala tipográfica? É 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. ### Qual proporção de escala devo usar? 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. ### Posso usar fontes do Google Fonts na ferramenta? 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. ### O que são tokens tipográficos e por que usar? 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. ### A ferramenta exporta para projetos mobile? 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. ### Posso usar os tokens gerados em projetos comerciais? Sim. A ferramenta é gratuita e os tokens gerados são de uso livre, sem nenhuma restrição de licença. --- ## Outras ferramentas para design system - **[Gerador de Paleta de Cores](https://camaraux.com.br/ferramentas/gerador-paleta-cores-design-system/)** — escala de cores 50-950 com algoritmo Tailwind, exportação CSS Variables, Design Tokens e SVG para Figma - **Gerador de Espaçamentos e Tokens** — em breve - **Gerador de Sombras e Border Radius** — em breve ## Escolhendo uma paleta de cores com intenção: o que diz o NNGroup O [Nielsen Norman Group](https://www.nngroup.com/videos/choosing-color-palette/) sintetizou os princípios de escolha cromática para interfaces. Vale 3 minutos antes de começar a gerar sua escala: https://youtu.be/qIB9\_gOZySU?si=TNGlaQbKmFFKd1-W ### Categorias ## Ter uma pergunta ou dica de assunto? [ Entrar em contato ](/contato)