Design de Sistema Tipográfico: Como Construir Tipografia que Escala

Escolher uma fonte não é projetar um sistema tipográfico. Escolher duas fontes que combinam bem ainda não é projetar um sistema tipográfico. Um sistema tipográfico é o conjunto de regras que determina como cada pedaço de texto em seu produto, marca ou interface se comporta em todos os contextos em que aparecerá.

A maioria dos designers pula esta etapa. Eles escolhem uma fonte para títulos e uma para o corpo do texto, ajustam os tamanhos no 'olhômetro' e consideram o trabalho feito. Seis meses depois, o site de marketing usa uma escala, o aplicativo usa outra, o pitch deck usa uma terceira, e ninguém consegue explicar por que a marca parece inconsistente, mesmo que o logotipo não tenha mudado.

Essa inconsistência é um problema de sistema tipográfico. E é solucionável.

O Que um Sistema Tipográfico Realmente Contém

Um sistema tipográfico real define cinco coisas:

1. Uma escala tipográfica. A relação matemática entre os tamanhos do seu texto.
2. Combinações de fontes. Quais tipografias desempenham quais papéis e por quê.
3. Regras de peso e estilo. Quando usar negrito, itálico, médio, e o que cada peso sinaliza.
4. Padrões de espaçamento. Altura da linha, espaçamento entre letras e espaçamento de parágrafos para cada tamanho.
5. Comportamento responsivo. Como cada elemento acima se adapta em diferentes tamanhos de tela.

Se o seu "sistema tipográfico" não possui algum desses itens, você tem escolhas de fontes, não um sistema.

A Escala Tipográfica é a Fundação

Uma escala tipográfica é um conjunto de tamanhos de fonte gerados a partir de uma proporção matemática consistente. Em vez de escolher tamanhos por intuição (16px aqui, 24px ali, talvez 36px para o hero), você escolhe um tamanho base e uma proporção, e todos os outros tamanhos fluem a partir disso.

Proporções comuns que funcionam:

Comece com uma base de 16px (o padrão do navegador, acessível, legível) e multiplique para cima para títulos, divida para baixo para legendas e rótulos. Uma escala de Terça Maior a partir de 16px lhe dá: 10px, 12.8px, 16px, 20px, 25px, 31.25px, 39px. Arredonde para valores limpos e você terá uma escala que parece intencional em vez de arbitrária.

A Combinação de Fontes é Estratégia

A internet está cheia de listas de "melhores combinações de fontes". A maioria delas é conselho de decoração disfarçado de conselho de design. A combinação real de fontes é estratégica.

As regras que realmente funcionam:

Contraste na estrutura, harmonia na proporção. Combine uma sans geométrica com uma serif humanista. O contraste estrutural cria interesse visual. A altura-x e a proporção compartilhadas fazem com que pareçam pertencer juntas. Inter + Merriweather. DM Sans + Lora. Satoshi + Source Serif.

Uma voz por função. Sua tipografia de título carrega personalidade. Sua tipografia de corpo de texto carrega conteúdo. Sua tipografia de UI carrega função. Tentar fazer uma única fonte fazer os três é como você acaba com um sistema que parece genérico ou forçado.

Duas fontes são quase sempre suficientes. Três é o máximo para qualquer sistema que precise ser gerenciável. Cada tipografia adicional multiplica o número de decisões de combinação, decisões de peso e decisões responsivas que você precisa tomar. Se você acha que precisa de quatro fontes, provavelmente precisa usar duas fontes melhor.

Teste a combinação no contexto, não em um espécime. Uma combinação que parece bonita em um pôster de espécime tipográfico pode desmoronar dentro de um componente de cartão ou de uma barra de navegação. Teste no layout real antes de se comprometer.

Regras de Peso e Estilo

O peso é hierarquia. Negrito significa importante. Médio significa suporte. Regular significa corpo de texto. Leve significa decorativo ou secundário. Essas associações estão enraizadas na forma como as pessoas leem.

O erro é usar o peso de forma inconsistente. Se o seu H2 é semibold no site de marketing, mas bold no aplicativo, a marca parece diferente, mesmo que a fonte seja a mesma. Um sistema tipográfico define isso:

• H1: Negrito (700). Sempre. Esta é a sua voz mais forte.
• H2: Semibold (600) ou Negrito (700). Escolha um, use-o em todos os lugares.
• H3: Médio (500). Contraste suficiente para ser notado sem competir com o H2.
• Corpo de texto: Regular (400). Legível, neutro, sem atrito.
• Legendas e rótulos: Regular (400) ou Médio (500) em tamanhos menores.

O itálico tem uma única função: ênfase dentro do corpo do texto. Usar itálico para fins decorativos (citações destacadas, rótulos de seção) dilui seu significado e torna a ênfase real invisível.

O Espaçamento é Onde os Sistemas Falham

Altura da linha, espaçamento entre letras e espaçamento de parágrafos são onde a maioria dos "sistemas tipográficos" silenciosamente se desfaz. Os tamanhos das fontes combinam entre os produtos, os pesos combinam, mas o texto parece diferente porque o espaçamento é inconsistente.

Regras de altura da linha:

Títulos precisam de uma altura de linha mais apertada (1.1 a 1.3) porque textos grandes criam muito espaço vertical em proporções de corpo de texto. O corpo do texto precisa de uma altura de linha mais solta (1.5 a 1.8) para uma leitura confortável. O erro comum é aplicar 1.5 a tudo, o que faz os títulos flutuarem e o corpo do texto parecer apertado no tamanho errado.

Regras de espaçamento entre letras:

Textos grandes (títulos, display) se beneficiam de um espaçamento entre letras ligeiramente negativo (-0.01em a -0.02em). O espaçamento óptico em tamanhos grandes cria lacunas que parecem mais largas do que o pretendido. Textos pequenos (legendas, rótulos, maiúsculas) se beneficiam de um espaçamento entre letras ligeiramente positivo (+0.02em a +0.05em) porque o espaçamento apertado em tamanhos pequenos reduz a legibilidade.

Espaçamento de parágrafo:

Use um multiplicador consistente da sua unidade base. Se sua base é 16px com uma grade de 4px, o espaçamento do parágrafo deve ser 16px ou 24px, não um valor arbitrário. Isso mantém o ritmo vertical consistente em todas as páginas.

Comportamento Responsivo

Um sistema tipográfico que funciona em um único breakpoint não é um sistema. É uma captura de tela.

Tipografia fluida escala os tamanhos das fontes suavemente entre os breakpoints usando CSS clamp(). Em vez de pular de 16px para 14px em um breakpoint, o tamanho interpola. Isso elimina a instabilidade de layout que vem de mudanças bruscas de breakpoint.

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

Compressão da escala no celular. Sua proporção de escala para desktop (digamos 1.250) cria muito contraste em uma tela pequena. Um H1 de 39px no desktop funciona. Um H1 de 39px em um telefone de 375px não funciona. A solução: comprimir a proporção no celular (cair para 1.125 ou 1.150) mantendo o tamanho base o mesmo. A hierarquia permanece, os tamanhos se adaptam.

Tamanhos mínimos legíveis. Nunca use menos de 16px para o corpo do texto no celular. Nunca use menos de 12px para qualquer texto. A acessibilidade não é opcional, e textos pequenos em telas pequenas falham com usuários reais.

Falhas Comuns em Sistemas Tipográficos

O buffet de fontes. Cinco tipografias, sem justificativa. Cada página parece uma marca diferente.

O peso órfão. Usar Thin (100) ou Black (900) para um elemento decorativo e nada mais. Isso adiciona ruído visual sem adicionar valor ao sistema.

A adivinhação de espaçamento. Alturas de linha e espaçamento entre letras que mudam entre componentes porque ninguém definiu as regras.

A escala apenas para desktop. Fica ótimo em um mockup de 1440px. Desmorona em qualquer coisa menor porque ninguém testou o comportamento responsivo.

Os tokens ausentes. Um sistema tipográfico definido em um arquivo Figma, mas não traduzido em design tokens ou propriedades personalizadas CSS. O sistema existe em teoria, mas não em código, então os engenheiros o reinventam a cada sprint.

Perguntas Frequentes

O que é um sistema tipográfico em design?

Um sistema tipográfico é o conjunto completo de regras que governam a seleção de fontes, dimensionamento, peso, espaçamento e comportamento responsivo em uma marca ou produto. Ele vai além da escolha de fontes para definir como cada pedaço de texto escala e mantém a consistência.

Quantas fontes um sistema de design deve ter?

Duas é o padrão. Três é o máximo para a maioria dos sistemas. Uma tipografia para display ou títulos e uma para o corpo do texto atende à vasta maioria das necessidades de design. Adicionar mais cria uma complexidade exponencial nas decisões de combinação, peso e responsividade.

Qual é a melhor proporção de escala tipográfica?

Não existe uma única melhor proporção. A Terça Maior (1.250) funciona bem para marketing e editorial. A Terça Menor (1.200) se adequa a interfaces densas. A Quarta Perfeita (1.333) cria um forte contraste nos títulos. Escolha a proporção que corresponde à densidade do seu conteúdo e às necessidades de hierarquia.

Construa o Sistema Antes de Escolher a Fonte

A fonte é a última decisão, não a primeira. Defina sua escala, suas regras de espaçamento, sua hierarquia de peso e seu comportamento responsivo. Em seguida, escolha a tipografia que se encaixa nessas restrições. Uma fonte medíocre dentro de um ótimo sistema superará uma ótima fonte sem sistema todas as vezes.