Escala Tipográfica Modular: Como Construir um Sistema Tipográfico Consistente

Uma escala tipográfica modular é uma proporção aplicada a um tamanho base que gera todos os tamanhos de fonte do produto. Essa é a ideia principal. Você escolhe a proporção, define a base, gera os incrementos, os distribui como tokens e usa esses tokens em todos os lugares, em vez de valores de pixel isolados. Se bem feita, cada tamanho no produto parece relacionado a todos os outros, porque matematicamente estão.

Se mal feita, você acaba com dezessete tamanhos de fonte indefensáveis, títulos que disputam a hierarquia com o corpo do texto e uma reunião de redesign a cada trimestre, onde alguém propõe "vamos padronizar os tamanhos" e ninguém sabe qual padrão usar. A escala é o elemento que você padroniza. Este artigo mostra como construir uma escala que sobreviva em um produto real, com proporções reais, uma estrutura de tokens real e as traduções Figma e Tailwind que a tornam executável.

O que é, na prática, uma escala tipográfica modular

Uma escala tipográfica modular é uma proporção única aplicada a um tamanho base que gera todos os tamanhos de fonte do produto, e essa proporção única é o ponto central.

Escolha um tamanho base, digamos 16 pixels, e uma proporção, digamos 1,25. Multiplique 16 por 1,25 e você obterá 20. Multiplique 20 por 1,25 e você obterá 25. Continue e você obterá 31, 39, 49, 61. Divida 16 por 1,25 e você obterá 12,8. Divida isso por 1,25 e você obterá 10,24. Essa é a escala. Oito tamanhos, uma base, uma proporção, total consistência matemática.

A razão pela qual isso funciona é psicofísica. A percepção visual humana responde a proporções, não a diferenças absolutas. Um salto de 12 para 14 é percebido praticamente da mesma forma que um salto de 24 para 28, porque ambos representam aproximadamente o mesmo passo multiplicativo. Uma escala linear (12, 14, 16, 18, 20, 22) parece apertada na parte superior e com espaço excessivo na parte inferior. Uma escala modular parece uniforme porque, relativamente, o é.

A mesma lógica fundamenta os intervalos musicais (oitavas são 2x, quintas são 1,5x, quartas são 1,333x), as aberturas fotográficas e a maior parte da teoria das proporções arquitetônicas. A tipografia simplesmente a adotou. As proporções nomeadas que você verá neste artigo (segunda menor, quarta justa, proporção áurea) são importadas da música por um motivo: elas descrevem o mesmo tipo de relação perceptiva.

As cinco proporções que abrangem produtos reais

A maioria dos produtos se situa entre 1,125 e 1,618, e cada proporção carrega um sinal de densidade específico.

As cinco proporções que abrangem quase todas as interfaces reais:

| Proporção | Nome | Sinal de densidade | Implementação real |

|------:|------|----------------|---------------------| 1,125 | Segunda menor | Compacto, denso, com muitos dados | Vercel, Geist, a maioria dos painéis de administração |

1,2 | Terça menor | Compacto, equilibrado | Escala padrão do Tailwind |

1,25 | Terça maior | Editorial padrão | Stripe, Material 3 |

1,333 | Quarta perfeita | Generoso, com aparência de revista | Sites editoriais, blogs de formato longo |

1,618 | Proporção áurea | Dramático, focado em exibição | Páginas de marketing, sites com foco em destaque |

Outras duas proporções às vezes aparecem. 1,414 (a quarta aumentada, que é a raiz quadrada de 2 e a proporção por trás do papel A4) fica entre a quarta perfeita e a quinta perfeita e é uma escolha razoável para produtos com aparência de revista que desejam um toque a mais de impacto do que 1,333 oferece. 1,5 (a quinta perfeita) é mais impactante que 1,333 e mais suave que 1,618, sendo o padrão em muitos geradores de páginas de marketing.

Você pode usar proporções fora desse intervalo, mas geralmente não é recomendável. Abaixo de 1,1, os incrementos são tão pequenos que se confundem, tornando impossível distinguir um título de nível 3 de um de nível 4 à primeira vista. Acima de 1,7, a escala aumenta tão rapidamente que você fica sem tamanhos intermediários utilizáveis. Designers que desejam uma faixa maior do que 1,618 geralmente estão resolvendo o problema errado: eles querem duas escalas, não uma maior.

Escolha a proporção que sua densidade exige

Um aplicativo com grande volume de dados requer uma proporção estreita, um site editorial requer uma proporção ampla, e a escolha errada terá consequências negativas em todo o resto.

Se o produto for um dashboard, um painel administrativo, um CRM, uma ferramenta de análise ou qualquer coisa em que o usuário leia linhas de informações densas por horas, use como padrão 1,125 ou 1,2. A proporção reduzida significa que o tamanho dos títulos não desvia a atenção dos dados. A hierarquia ainda funciona porque, nessa escala, ela se baseia principalmente na espessura, cor e espaçamento, e não no tamanho.

Se o produto for uma página de marketing de SaaS, um site de conteúdo, uma página de produto ou uma plataforma de documentação, use como padrão 1,25 ou 1,333. As proporções intermediárias dão o impacto necessário aos títulos para diferenciar as seções sem fazer com que o corpo do texto pareça pequeno em comparação. É aqui que a maioria dos produtos B2B se encaixa, e é onde Tailwind, Material Design e Stripe convergiram.

Se o produto for editorial, no estilo de revista ou focado em anúncios gráficos, como uma publicação de formato longo, um site de moda ou um microsite de campanha, use como padrão 1,414 ou 1,618. A proporção ampla significa que os títulos parecem títulos de verdade, do tipo que merecem um bloco de texto principal completo. O corpo do texto pode permanecer razoável, pois o espaço entre o bloco principal e o corpo do texto cumpre sua função.

O erro é escolher uma proporção apenas porque soa impressionante (a proporção áurea é um exemplo famoso) e impô-la a um produto que não precisa desse impacto visual. Uma proporção de 1,618 em um CRM resulta em ruído ilegível. Uma proporção de 1,125 em um site editorial parece anêmica. Escolha a proporção que seu produto realmente precisa e então a implemente.

Defina o tamanho base antes de redimensionar

O tamanho base da fonte é a referência a partir da qual todas as etapas são medidas; se estiver errado, todas as etapas estarão erradas.

O padrão para o corpo do texto na web é 16 pixels. O padrão do navegador é 16, a folha de estilo do agente do usuário é 16, o tamanho médio de leitura preferido para adultos é 16 e as diretrizes de acessibilidade do WCAG e do Apple Human Interface Guidelines consideram 16 como o mínimo para o corpo do texto. Você pode usar 17 ou 18 pontos se o público-alvo for mais velho ou se o produto for focado em leitura, mas nunca use menos de 16 pontos no corpo do texto.

Essa base é o ponto multiplicador. Cada ponto acima é a base multiplicada pela proporção elevada a alguma potência. Cada ponto abaixo é a base dividida pela proporção elevada a alguma potência. Se você alterar a base, cada ponto se altera. Isso é normal, é assim que o sistema funciona. Mas significa que alterar a base é uma mudança estrutural, não um ajuste por tela, e deve ser feita uma única vez, deliberadamente, antes do lançamento da escala.

Para dispositivos móveis, você pode reduzir a base (15 ou 16) e usar unidades relativas. Para impressão, a base geralmente é de 11 ou 12 pontos e as proporções permanecem as mesmas. Para documentos com blocos de código, defina o corpo do texto para 16 pontos e o texto monocromático para 14 pontos, com a mesma proporção aplicada à escala do código. A base é definida para cada mídia, a proporção é definida para cada produto, e ambas são decisões que você toma apenas uma vez.

Mais uma regra. Defina a base em rem, não em px, na web. Toda a escala deve ser expressa em rems para que as preferências de tamanho de fonte do usuário e as ferramentas de acessibilidade (zoom, modo de leitura, escala do navegador) sejam propagadas corretamente. O Tailwind já faz isso. O Material Design faz isso. O tipo dinâmico do Apple para iOS faz o equivalente. Se a sua escala estiver codificada em pixels, você estará em conflito com a plataforma.

Gere os passos e nomeie-os por função

Uma escala de sete a nove passos cobre todos os tamanhos que um produto precisa; nomeie-os por função, não por tamanho.

Considere uma base de 16 pixels e uma proporção de 1,25. Os níveis são:

• 10 (legenda extra pequena, nota de rodapé)
• 13 (pequeno, texto secundário)
• 16 (corpo, base)
• 20 (lead, corpo grande)
• 25 (h4, título pequeno)
• 31 (h3, título intermediário)
• 39 (h2, título grande)
• 49 (h1, título da página)
• 61 (display, herói)

Nove níveis. Esse é o produto completo. Alguns produtos usam sete ou oito, outros chegam a dez, mas depois de dez a escala começa a ficar diluída e você obtém tamanhos que ninguém usa.

Agora, nomeie-os. Não "texto-31" ou "39px". Nomeie-os por função: legenda, pequeno, corpo, lead, h4, h3, h2, h1, display. Os nomes das funções são o contrato com a equipe de engenharia, não os valores em pixels. O valor em pixels pode mudar se a base ou a proporção mudar, mas a função permanece a mesma. h1 é sempre o título maior. O corpo é sempre a base. A legenda é sempre o menor texto legível.

É isso que faz de uma escala um sistema, em vez de uma planilha. Um designer diz "este é o corpo" e um engenheiro implementa o texto-corpo. Se a escala mudar no próximo trimestre, corpo ainda significa corpo, e cada componente incorpora o novo valor automaticamente. Ninguém precisa encontrar todos os valores 16 no código-fonte e alterá-los para 17.

O Material Design 3 implementa sua escala nomeada por função: exibição, cabeçalho, título, rótulo, corpo, com variantes de tamanho (grande, médio, pequeno) dentro de cada uma. O HIG da Apple implementa Título Grande, Título 1, Título 2, Título 3, Cabeçalho, Corpo, Chamada, Subtítulo, Nota de Rodapé, Legenda 1, Legenda 2. O Tailwind implementa texto-xs até texto-9xl, que se refere a tamanhos de camisetas em vez de nomes de funções, e é o único ponto em que os padrões do Tailwind são indiscutivelmente mais fracos do que os do Material. A maioria das equipes que adotam o Tailwind acaba adicionando aliases com nomes de funções às classes de escala.

Traduzindo a escala em tokens de design

Os tokens transformam a escala da planilha do designer em um contrato para a equipe.

Tokens de design são valores nomeados que representam decisões de design. Para uma escala tipográfica, você precisa de três camadas:

1. Tokens brutos. Os valores reais de tamanho. font-size-100, font-size-200, etc., ou nomeados como font-size-body, font-size-h1. Estes são a fonte da verdade.

2. Tokens semânticos. Aliases que expressam a intenção. text-heading-page, text-body-default, text-caption. Os tokens semânticos apontam para os tokens brutos. Os componentes usam tokens semânticos, nunca os brutos diretamente. 3. Tokens de componentes. Vinculações dentro de componentes específicos. card-title-size aponta para text-heading-card, que aponta para font-size-200. Os tokens de componentes permitem sobrescrever componentes individualmente sem comprometer o sistema.

Um arquivo JSON de tokens mínimo para uma escala de base 16 e proporção 1,25:

{
  "font-size": {
    "raw": {
      "100": { "value": "0.625rem" },
      "200": { "value": "0.8125rem" },
      "300": { "value": "1rem" },
      "400": { "value": "1.25rem" },
      "500": { "value": "1.5625rem" },
      "600": { "value": "1.9375rem" },
      "700": { "value": "2.4375rem" },
      "800": { "value": "3.0625rem" },
      "900": { "value": "3.8125rem" }
    },
    "semantic": {
      "caption":  { "value": "{font-size.raw.100}" },
      "small":    { "value": "{font-size.raw.200}" },
      "body":     { "value": "{font-size.raw.300}" },
      "lead":     { "value": "{font-size.raw.400}" },
      "h4":       { "value": "{font-size.raw.500}" },
      "h3":       { "value": "{font-size.raw.600}" },
      "h2":       { "value": "{font-size.raw.700}" },
      "h1":       { "value": "{font-size.raw.800}" },
      "display":  { "value": "{font-size.raw.900}" }
    }
  }
}

Essa estrutura é portátil. Style Dictionary, Tokens Studio, Specify, Supernova, todos leem esse formato e emitem variáveis ​​Figma, variáveis ​​CSS, configuração do Tailwind, constantes Swift para iOS, XML para Android, enfim, tudo o que as plataformas precisam. Os tokens são a fonte. Todo o resto é gerado.

Enviar a escala para as variáveis ​​Figma

As variáveis ​​Figma são onde a escala reside para a equipe de design, estruturadas como uma única coleção de tipografia com aliases semânticos.

Crie uma coleção de variáveis ​​chamada Tipografia. Dentro dela, adicione uma variável numérica para cada tamanho bruto: size/100 até size/900, com os valores de pixel equivalentes em rem (10, 13, 16, 20, 25, 31, 39, 49, 61). Em seguida, adicione um segundo nível de aliases: text/caption, text/small, text/body, text/lead, text/h4, text/h3, text/h2, text/h1, text/display. Cada alias aponta para uma variável de tamanho bruto.

Depois, crie estilos de texto, um para cada função. Heading/H1 usa text/h1 para tamanho, a fonte do seu título para família, a espessura do seu título para peso e a proporção da altura da linha do seu título para entrelinhamento. Body/Default usa text/body, a fonte do seu corpo do texto, peso regular. Repita para cada função.

A disciplina consiste em os designers comporem interfaces usando estilos de texto, e não digitando tamanhos de fonte no inspetor. Uma vez que uma equipe adota essa disciplina, a escala se torna auto-regulada. Qualquer pessoa que defina um tamanho personalizado precisa quebrar o padrão visivelmente, e essa visibilidade é a regra.

Combine isso com uma configuração de Modos se você oferecer suporte a vários modos de densidade. Um modo "compacto" pode substituir as variáveis ​​de tamanho padrão para usar uma proporção de 1,125 para uma experiência mais densa. Um modo "confortável" pode usar 1,25. Os aliases permanecem os mesmos. Os componentes não mudam. A escala apenas se ajusta sob eles. É isso que o sistema oferece.

Integrando a escala ao Tailwind CSS

A configuração do Tailwind é onde a escala reside para a equipe de engenharia e deve espelhar exatamente a estrutura de variáveis ​​Figma.

Substitua o fontSize padrão do Tailwind pela sua escala, em tailwind.config.js:

module.exports = {
  theme: {
    fontSize: {
      'caption':  ['0.625rem',  { lineHeight: '1rem' }],
      'small':    ['0.8125rem', { lineHeight: '1.25rem' }],
      'body':     ['1rem',      { lineHeight: '1.5rem' }],
      'lead':     ['1.25rem',   { lineHeight: '1.75rem' }],
      'h4':       ['1.5625rem', { lineHeight: '2rem' }],
      'h3':       ['1.9375rem', { lineHeight: '2.375rem' }],
      'h2':       ['2.4375rem', { lineHeight: '2.875rem' }],
      'h1':       ['3.0625rem', { lineHeight: '3.5rem' }],
      'display':  ['3.8125rem', { lineHeight: '4.25rem' }],
    },
  },
}

Agora, text-h1 na marcação significa a mesma coisa que Heading/H1 significa em Figma. O nome da classe é o contrato. Os engenheiros não escolhem tamanhos, eles escolhem funções, e a função é resolvida para o valor de pixel correto no momento da compilação.

As alturas de linha aqui não são arbitrárias. O padrão é: altura de linha estreita para o corpo do texto em tamanhos pequenos, entrelinhamento mais amplo para o corpo e o cabeçalho, e entrelinhamento estreito novamente para os títulos. Uma regra comum é altura de linha do corpo de 1,5, altura de linha do título de 1,1 a 1,2, com uma transição de 1,3 para 1,4 em torno dos tamanhos de cabeçalho e h4. Você pode expressar isso como outra escala (uma escala de entrelinhamento) ou como valores por etapa, mas a relação entre tamanho e entrelinhamento deve ser intencional, não baseada em palpites.

Se você quiser manter as classes padrão do Tailwind disponíveis junto com sua escala (para código legado ou componentes de terceiros), use extend em vez de substituir fontSize completamente. Mas o objetivo a longo prazo é uma única escala, não duas. Duas escalas tipográficas no mesmo produto são apenas uma escala tipográfica e uma série de imprevistos.

Combine a escala com um guia de combinação de fontes real para escolha de fontes e um sistema de projeto framework que contextualize a escala. A escala é uma parte do sistema tipográfico; a escolha da fonte e o mapeamento de funções são as outras partes. Precisa de uma escala funcional, tokens reais e Figma + Tailwind configurados corretamente desde o início? Contrate ⟦MARCA0⟧. Distribuímos sistemas tipográficos completos através do BrandBrainy e do UXBrainy, com os tokens, as variáveis ​​Figma e a configuração do Tailwind integrados em uma única entrega.

As regras de governança que mantêm uma escala ativa

Toda escala tipográfica que morreu, morreu da mesma forma: por exceção.

Três regras manterão uma escala ativa por mais tempo do que qualquer ferramenta:

Regra um: cada novo componente escolhe funções, não tamanhos. Um designer que cria um cartão escolhe Corpo para o corpo, H3 para o título e Legenda para o carimbo de data/hora. Ele não digita font-size: 18px no inspetor. Se a função não existir, ele propõe uma nova função através do sistema, não uma substituição pontual.

Regra dois: as exceções recebem um nome e uma data. Se a equipe de marketing precisar de um título de 72px para um destaque em uma página de campanha e o tamanho de exibição for 61px, a exceção recebe um nome (hero-marketing-q3-launch) e uma data. Após o lançamento da campanha, a exceção é incorporada à escala (se for reutilizável) ou excluída (se for um caso isolado). Sem alterações anônimas.

Regra três: a escala é revisada trimestralmente, não anualmente. Trimestralmente, o intervalo é curto o suficiente para que desvios sejam detectados enquanto ainda são pequenos. Anualmente, o intervalo é longo o suficiente para que todas as equipes tenham trabalhado em torno das falhas e a reversão se torne um projeto. A revisão trimestral leva quinze minutos. A revisão anual é uma reformulação completa.

As equipes que perdem sua escala tipográfica sempre contam a mesma história depois. Alguém precisava de um tamanho de 17px para um botão, outra pessoa precisava de um tamanho de 21px para um banner, seis meses depois existem quarenta e sete tamanhos de fonte diferentes no código-fonte e ninguém consegue dizer quais são os reais. A escala desapareceu. O que resta é um cemitério de tamanhos de fonte.

Você evita isso tratando a escala como um contrato, não como uma planilha. O contrato é aplicado por ferramentas (estilos Figma, classes Tailwind, regras de lint) e por revisão. O contrato é renegociado na revisão trimestral. Qualquer coisa fora do contrato é um bug.

Perguntas Frequentes

O que é uma escala tipográfica modular?

Uma escala tipográfica modular é um sistema onde cada tamanho de fonte em um produto é gerado aplicando-se uma única proporção a um único tamanho base. Escolha uma base, geralmente 16 pixels para a web, escolha uma proporção, geralmente entre 1,125 e 1,618, e multiplique ou divida a base pela proporção repetidamente para gerar os incrementos. O resultado é uma escala onde cada tamanho está matematicamente relacionado a todos os outros tamanhos, o que confere à tipografia uma sensação de consistência interna que escolhas arbitrárias de pixels não conseguem proporcionar.

Qual proporção devo usar para minha escala tipográfica?

Escolha a proporção de acordo com a densidade que seu produto precisa. Use 1,125 ou 1,2 para produtos com grande volume de dados, como dashboards e ferramentas administrativas, onde os títulos não devem desviar a atenção dos dados. Use 1,25 ou 1,333 para páginas de marketing padrão de SaaS, sites de conteúdo e páginas de produtos, que é onde a maioria dos produtos B2B se encontra. Use 1,414 ou 1,618 para produtos editoriais, revistas ou focados em anúncios gráficos, onde os títulos precisam parecer títulos. O erro mais comum é escolher uma proporção porque soa impressionante em vez de porque se adequa ao produto.

Quantos tamanhos uma escala tipográfica deve ter?

A maioria das escalas prontas para produção tem de sete a nove tamanhos. Legenda, pequeno, corpo, primeiro elemento, h4, h3, h2, h1 e anúncio gráfico cobrem quase todas as superfícies reais de um produto. Usar menos de sete tamanhos deixa lacunas que os designers preencherão com ajustes pontuais. Usar mais de dez tamanhos torna a escala tão diluída que alguns tamanhos nunca são usados ​​e o sistema fica mais difícil de manter. De sete a nove é o ideal, e os nomes das funções devem descrever a finalidade de cada tamanho, não seu valor em pixels.

Devo usar rem ou px para os valores da escala tipográfica? Use rem para a web. O tamanho da fonte raiz do navegador é 16 pixels por padrão, mas o usuário pode alterá-lo por meio das configurações de acessibilidade e preferências do navegador, e uma escala baseada em rem respeita essas preferências automaticamente. Escalas baseadas em pixels as ignoram. Tailwind, Material Design e a maioria dos sistemas de design modernos usam rem por esse motivo. Para plataformas móveis, siga a plataforma: o iOS usa pontos e suporta tipografia dinâmica, o Android usa pixels independentes de escala (sp). O princípio é o mesmo: use a unidade relativa da plataforma, não unidades absolutas.

Qual a diferença entre uma escala tipográfica modular e tokens de design?

Uma escala tipográfica modular é a matemática, os tokens de design são como a matemática é implementada. A escala define os valores (10, 13, 16, 20, 25, 31, 39, 49, 61). Os tokens são a camada nomeada que permite que o restante do sistema de design referencie esses valores sem codificá-los diretamente no código. Você pode ter uma escala sem tokens, mas a escala não sobreviverá em um código-fonte real. Você pode ter tokens sem uma escala, mas os valores serão arbitrários. O sistema completo é a escala expressa como tokens, com camadas brutas, semânticas e de componentes, e enviada para Figma e código através da mesma fonte.

O padrão que a maioria das escalas tipográficas ignora

Uma escala tipográfica não é uma lista de tamanhos de fonte, é um contrato sobre como o texto conquista hierarquia em seu produto.

As equipes que acertam nisso não escolhem uma proporção e param. Elas escolhem uma proporção, constroem a escala, a enviam como tokens, a integram ao Figma e ao Tailwind e, em seguida, a aplicam por meio de uma revisão trimestral e uma regra sem exceções que realmente funciona. A escala não é o entregável, a disciplina é. O entregável é o que torna a disciplina possível.

As equipes que erram nisso tratam a escala como um painel de inspiração. Eles escolhem proporções perfeitas em um mockup do Pinterest, enviam um documento de especificações estático e descobrem seis meses depois que a equipe de engenharia nunca o adotou porque o documento não era um código executável. Ou enviam a escala para o Figma e nunca para o Tailwind, e os arquivos de design e o aplicativo de produção se distanciam até se tornarem dois produtos diferentes com fontes diferentes. Ou enviam para ambos sem nunca definir governança, e as exceções superam as regras em um ano.

O atalho é tratar a escala como um contrato desde o primeiro dia. Os cálculos definem as etapas. Os tokens tornam as etapas implementáveis. As variáveis ​​do Figma e a configuração do Tailwind tornam as etapas utilizáveis ​​em ambos os lados da linha entre design e engenharia. A governança mantém as etapas ativas após o lançamento. Cada parte do sistema tem uma função específica, e o sistema falha se alguma delas estiver ausente.

Se você deseja uma escala tipográfica modular funcional, tokens reais, variáveis ​​reais Figma, configuração real do Tailwind e um plano de governança que mantenha a escala coesa após o lançamento, contratar ⟦MARCA0⟧. Nós entregamos sistemas de design completos através do BrandBrainy e UXBrainy, com escalas tipográficas projetadas como tokens desde o primeiro dia, o sistema tipográfico conectado ao paleta de cores da marca e as regras que mantêm o sistema ativo após o lançamento.