A tipografia responde por cerca de 95% do conteúdo de qualquer interface digital. Apesar disso, é um dos elementos mais frequentemente definidos de forma arbitrária — um designer escolhe 14px aqui, 18px ali, 24px para o título e 36px para o hero. Parece razoável até o momento em que o produto escala, o time cresce e cada pessoa começa a tomar suas próprias decisões tipográficas.
Em seis meses, o produto tem 30 tamanhos de fonte diferentes no código. Cada novo componente é uma decisão nova do zero. O handoff para desenvolvimento vira um exercício de adivinhação.
Uma escala tipográfica bem estruturada elimina esse problema antes que ele apareça. Este guia cobre o processo completo — da escolha do tamanho base à exportação de tokens para web, Android e Flutter.
O que é uma escala tipográfica?
Uma escala tipográfica é uma progressão de tamanhos de fonte calculada matematicamente a partir de dois parâmetros: um tamanho base e uma proporção de escala. Em vez de escolher tamanhos de forma arbitrária, todos os níveis tipográficos do sistema são derivados da mesma fórmula — cada tamanho é o anterior multiplicado pela proporção escolhida.
O resultado é uma hierarquia visualmente harmônica, com progressão consistente entre cada nível, fácil de documentar como design tokens e de implementar em qualquer plataforma.
Por que tamanhos arbitrários quebram o design system
Quando tamanhos de fonte são escolhidos sem uma lógica matemática, o sistema acumula inconsistências que se tornam cada vez mais difíceis de gerenciar.
O problema mais comum é a proliferação de valores: 13px, 14px, 15px, 16px, 17px, 18px — todos presentes no código, cada um adicionado por um motivo diferente em momentos diferentes. Sem uma escala como referência, ninguém sabe qual valor usar em um componente novo. A decisão fica à critério de cada desenvolvedor ou designer.
O segundo problema é a manutenção. Se a marca decide mudar o tamanho base da tipografia — de 16px para 17px, por exemplo — em um sistema sem escala, isso exige revisar cada componente individualmente. Com uma escala baseada em tokens, a mudança é feita em um único lugar e propaga automaticamente para todo o sistema.
O terceiro é o handoff. Sem tokens tipográficos, o desenvolvedor recebe um arquivo de Figma com dezenas de estilos de texto nomeados de forma inconsistente — “Título grande”, “H2 especial”, “texto menor” — e precisa interpretar a intenção do designer em vez de consumir uma especificação clara.
Como escolher o tamanho base e a proporção de escala
Tamanho base — o ponto de partida
O tamanho base é o valor que ancora a escala. Convencionalmente, representa o tamanho do texto de corpo principal do produto. Para a maioria dos produtos digitais em 2025, o intervalo entre 16px e 18px é o mais adotado:
- 16px — mínimo recomendado pelas diretrizes WCAG para texto de corpo. Funciona bem em interfaces densas em informação como dashboards e SaaS enterprise
- 17px — um meio-termo que oferece legibilidade ligeiramente melhor sem ocupar muito espaço
- 18px — padrão do Material Design 3 para body-large. Indicado para produtos de leitura, e-commerce e apps mobile
Tamanhos abaixo de 16px para texto de corpo prejudicam a legibilidade e podem reprovar em critérios de acessibilidade.
Proporção de escala — qual escolher para cada tipo de produto
A proporção determina o salto entre cada nível tipográfico. Quanto maior o número, maior a diferença entre os tamanhos. A escolha ideal depende do tipo de produto:
Terça menor (1,2) — progressão muito sutil, quase imperceptível entre níveis adjacentes. Indicada para produtos com muitos níveis tipográficos que precisam coexistir em pouco espaço.
Terça maior (1,25) — proporção equilibrada para produtos densos em informação: dashboards, sistemas de gestão, ferramentas de produtividade. Cria hierarquia sem grandes saltos visuais.
Quarta perfeita (1,333) — padrão do Material Design 3. Oferece o melhor equilíbrio entre hierarquia clara e progressão harmônica. É a escolha mais segura para a maioria dos produtos digitais.
Quinta perfeita (1,5) — saltos mais pronunciados. Ideal para landing pages, produtos de marketing e interfaces onde o impacto visual é prioritário.
Razão áurea (1,618) — a proporção com maior diferença entre níveis. Funciona bem em produtos editoriais, portfólios e sites com forte identidade visual. Em produtos com muita informação, os saltos podem ser grandes demais.
A hierarquia tipográfica do Material Design 3
O Material Design 3 divide a escala tipográfica em cinco categorias funcionais, cada uma com três tamanhos (large, medium, small). Essa nomenclatura é adotada como padrão pela nossa ferramenta de geração de escala e é compatível com a implementação nativa em Android e Flutter.
| Categoria | Uso principal | Características |
|---|---|---|
| Display | Heroes, banners, destaques visuais | Tamanhos maiores, letter-spacing negativo |
| Headline | Títulos de página, cabeçalhos de seção | Tamanhos grandes, peso visual forte |
| Title | Títulos de card, cabeçalhos de lista, modais | Tamanhos médios, distinção clara do corpo |
| Body | Parágrafos, descrições, conteúdo corrido | Otimizado para legibilidade em blocos longos |
| Label | Botões, badges, captions, chips | Tamanhos menores, frequentemente em maiúsculo |
Cada categoria tem valores de line-height e letter-spacing calibrados para o seu uso — não apenas o tamanho da fonte. Esses três valores juntos formam um token tipográfico completo.
Como gerar e exportar sua escala em 5 passos
O processo de criação de uma escala tipográfica para design system pode ser feito em minutos com nossa ferramenta de geração de escala tipográfica.
Passo 1 — Defina o tamanho base. Para a maioria dos produtos, comece com 16px ou 18px. Se o produto é usado principalmente em mobile, 17px é um bom equilíbrio.
Passo 2 — Escolha a proporção. Use Quarta Perfeita (1,333) como ponto de partida. Ajuste para Terça Maior (1,25) se o produto for denso em informação, ou para Quinta Perfeita (1,5) se precisar de mais impacto visual.
Passo 3 — Configure os pares de fonte. Separe a fonte de headlines da fonte de corpo. Fontes de headline podem ter mais personalidade; fontes de corpo precisam priorizar legibilidade em tamanhos menores.
Passo 4 — Escolha a convenção de nomenclatura. Use Material para produtos que incluem Android ou seguem o Material Design. Use Semântica para projetos web-only com nomenclatura customizada.
Passo 5 — Exporte para a sua plataforma. Copie o código no formato da sua stack: CSS, SCSS, Android XML, Flutter Dart ou React. Os tokens já incluem font-size, line-height e letter-spacing para cada nível.
Tokens tipográficos: primitivos e semânticos
Assim como nas cores do design system, os tokens tipográficos têm duas camadas — e a confusão entre elas é uma das fontes mais comuns de inconsistência.
Nível 1 — tokens primitivos
Os tokens primitivos armazenam os valores brutos da escala. São as variáveis geradas diretamente pela ferramenta:
css
:root {
/* Primitivos tipográficos */
--font-display-large-size: 57px;
--font-display-large-line-height: 64px;
--font-display-large-tracking: -0.25px;
--font-body-large-size: 16px;
--font-body-large-line-height: 24px;
--font-body-large-tracking: 0.5px;
}Esses tokens não são consumidos diretamente pelos componentes. Eles são a fundação da camada semântica.
Nível 2 — tokens semânticos
Os tokens semânticos referenciam os primitivos e descrevem a função — não o valor:
css
:root {
/* Semânticos tipográficos */
--typography-page-title: var(--font-display-large-size);
--typography-section-heading: var(--font-headline-large-size);
--typography-card-title: var(--font-title-large-size);
--typography-body: var(--font-body-large-size);
--typography-button-label: var(--font-label-large-size);
--typography-caption: var(--font-label-small-size);
}O componente de card usa --typography-card-title, não --font-title-large-size. Isso significa que se a decisão de design mudar — o título de card passar a usar title-medium em vez de title-large — a mudança é feita no token semântico e todos os cards atualizam automaticamente.
Tipografia multiplataforma: web, Android e Flutter
Um dos maiores desafios em produtos com presença em múltiplas plataformas é manter a consistência tipográfica entre web, iOS e Android. Cada plataforma tem suas próprias unidades de medida e APIs de estilo — e sem tokens bem estruturados, a tipografia vira um sistema separado em cada plataforma.
Nossa ferramenta de escala tipográfica resolve isso exportando a mesma escala em três formatos de uma vez:
Android XML — arquivo de recursos prontos para importar no Android Studio, com os valores em SP (Scale-independent Pixels), que respeitam as configurações de acessibilidade do sistema operacional Android.
Flutter Dart — objeto com TextStyle para cada nível tipográfico, pronto para usar com Theme.of(context).textTheme no Flutter. Mantém a hierarquia do Material Design 3 nativa do framework.
Web CSS/SCSS — variáveis CSS com valores em REM, que escalam conforme o tamanho de fonte base do navegador — respeito automático às preferências de acessibilidade do usuário.
Com os três formatos gerados a partir da mesma escala base, o produto mantém hierarquia tipográfica consistente em todas as plataformas — sem que cada time precise tomar decisões independentes.
Tipografia e acessibilidade: o mínimo inegociável
Escala bem estruturada não significa escala acessível automaticamente. Há dois critérios que precisam ser verificados independente da proporção escolhida:
Tamanho mínimo de corpo: As diretrizes WCAG recomendam no mínimo 16px para texto de corpo em produtos web. Abaixo disso, usuários com baixa visão precisam de zoom para leitura — o que quebra layouts e cria fricção desnecessária.
Line-height adequado: O espaçamento entre linhas impacta diretamente a legibilidade, especialmente para usuários com dislexia. Para texto de corpo, o line-height deve estar entre 1,4 e 1,6 vezes o tamanho da fonte. A ferramenta calcula automaticamente o line-height proporcional para cada nível.
Contraste texto-fundo: Embora o contraste seja uma propriedade de cor, não de tipografia, ele é diretamente afetado pelo tamanho da fonte. Para texto abaixo de 18pt (24px), o requisito WCAG AA é 4.5:1. Para texto grande (acima de 18pt), o requisito cai para 3:1. Isso significa que tamanhos menores de fonte exigem mais contraste cromático para manter a conformidade.
Integrando a escala ao Figma
Com a escala gerada e os tokens exportados, o passo final é sincronizar com o Figma para que os designers usem os mesmos valores que o código.
O processo mais eficiente é usar o plugin Tokens Studio (anteriormente Figma Tokens) para importar os tokens gerados diretamente como variáveis do Figma. Isso garante que o designer não precise criar os estilos de texto manualmente — e que qualquer mudança no token seja refletida automaticamente no arquivo de design.
O fluxo completo fica assim:
- Gerar a escala na ferramenta CamaraUX
- Copiar o código no formato W3C Design Tokens
- Importar no Tokens Studio no Figma
- Sincronizar com o repositório de código via GitHub (opcional, mas recomendado para times maiores)
Com isso, o designer trabalha com os mesmos tokens que o desenvolvedor consome no código — e o handoff deixa de ser uma tradução para ser uma referência direta.
Se você está estruturando a tipografia do seu design system e quer um olhar especializado sobre as decisões de escala, tokens e implementação, fale com a CamaraUX — sem compromisso.
Perguntas frequentes
O que é uma escala tipográfica em design system?
É uma progressão de tamanhos de fonte calculada matematicamente a partir de um tamanho base e uma proporção. Todos os níveis tipográficos do sistema — display, headline, title, body e label — são derivados da mesma fórmula, garantindo hierarquia visual consistente e tokens fáceis de manter e exportar para o código.
Qual é a melhor proporção de escala tipográfica?
Depende do tipo de produto. Para a maioria dos produtos digitais, a Quarta Perfeita (1,333) — padrão do Material Design — oferece o melhor equilíbrio. Para dashboards e produtos densos em informação, use Terça Maior (1,25). Para landing pages e produtos com forte apelo visual, use Quinta Perfeita (1,5) ou Razão Áurea (1,618).
Qual deve ser o tamanho base da tipografia?
Para produtos web, entre 16px e 18px. O mínimo recomendado pelas diretrizes WCAG para texto de corpo é 16px. O Material Design 3 usa 16px como padrão para body-medium e 18px para body-large. Tamanhos abaixo de 16px para texto de corpo prejudicam a legibilidade e podem reprovar em auditorias de acessibilidade.
Qual a diferença entre token tipográfico primitivo e semântico?
Token primitivo armazena o valor bruto da escala — --font-body-large-size: 16px. Token semântico referencia o primitivo com um nome funcional — --typography-body: var(--font-body-large-size). Componentes sempre consomem tokens semânticos, nunca primitivos diretamente. Isso permite mudar a escala inteira alterando apenas os tokens primitivos.
Como exportar a escala tipográfica para Android e Flutter?
Use nosso gerador de escala tipográfica para exportar em Android XML — com valores em SP para o Android Studio — e Flutter Dart — com TextStyle para cada nível tipográfico. Ambos os formatos são gerados a partir da mesma escala base, garantindo consistência tipográfica entre web e mobile.
Como integrar tokens tipográficos ao Figma?
Use o plugin Tokens Studio no Figma para importar os tokens gerados em formato W3C Design Tokens. Os tokens aparecem como variáveis do Figma, prontos para aplicar nos estilos de texto dos componentes. Qualquer mudança no token propaga automaticamente para todos os componentes que o referenciam.
