Tipografia de estúdio: uma família, três tamanhos e um peso por nível
A tipografia é o que mais denuncia página sem sistema. Três decisões simples deixam qualquer site com cara de estúdio.
- Carrossel
- 23 de out de 2026
- 3 min de leitura
De tudo o que existe numa página, a tipografia é o que mais denuncia falta de sistema. Cor dá para ajustar depois, imagem dá para trocar. Mas quando cada título tem um tamanho, cada parágrafo tem um peso e três fontes dividem a mesma tela, a página parece montada por partes, e o visitante sente isso antes de ler a primeira frase.
A boa notícia é que a correção é pequena. São três decisões, tomadas uma vez e repetidas no site inteiro.
1. Uma família só
Uma família tipográfica com bons pesos resolve título, texto, botão e rótulo. Misturar uma fonte para títulos, outra para o corpo e uma terceira para destaques quase sempre cria ruído, porque cada família tem proporções e espaçamentos diferentes.
Escolha uma família neutra e bem desenhada, com pelo menos os pesos regular e médio. Geist e Inter são exemplos que funcionam muito bem em interfaces. A personalidade vem do tamanho, do espaço e do contraste, não da quantidade de fontes.
2. Poucos tamanhos, sempre os mesmos
O segundo problema comum é o tamanho solto: um título com 38 pixels aqui, outro com 42 ali, um texto com 17 em uma seção e 18 na seguinte. Ninguém percebe o número, mas todo mundo percebe a falta de ritmo.
Defina uma escala curta. Para a maioria dos sites, um tamanho para o título principal, um para títulos de seção, um para o texto de apoio e um para rótulos pequenos já é suficiente. Cada nível usa sempre o mesmo tamanho, em todas as páginas.
Libere o resto da matéria
Você também recebe por e-mail o link desta matéria e a aula grátis do Conversão Visual.
3. Título grande e leve
O instinto é usar negrito pesado para dar importância ao título. O resultado é uma página que grita. Títulos grandes funcionam melhor em peso regular ou médio, com o espaçamento entre letras levemente reduzido. A hierarquia vem do tamanho e do espaço em volta, não da espessura da letra.
Guarde o peso médio para o que precisa de ênfase pequena: o nome de um card, o texto do botão, um rótulo. E use a cor de texto em dois ou três tons de neutro para separar o principal do secundário.
Um peso por nível
Juntando as três decisões, a regra fica simples: cada nível de texto tem um tamanho, um peso e uma cor, e não muda. Título principal sempre igual, título de seção sempre igual, texto de apoio sempre igual. Quando o padrão existe, a página ganha ritmo sem esforço, e cada nova seção já nasce consistente.
Como passar isso para a IA
Se você cria páginas com IA, escreva a escala nas instruções do projeto: a família, os tamanhos de cada nível, o peso de cada um e as cores de texto. Sem isso, cada pedido gera uma tipografia nova. Com isso, a IA repete o padrão como um designer faria.
No Conversão Visual eu ensino a montar esse sistema no Figma e a transformar cada decisão em regra para o Claude Code executar. A aula grátis mostra o caminho completo.
