Tipografia no site: como escolher as fontes certas

Você já entrou em um site e, sem saber explicar por quê, achou que ele parecia amador? Ou abriu uma página e desistiu de ler porque o texto era pequeno, apertado e cansativo? Na maioria dos casos, o culpado não foi a cor, nem a foto, nem o layout. Foi a tipografia.

Tipografia é o jeito como as letras aparecem no seu site: qual fonte, em que tamanho, com quanto espaço entre as linhas. É um detalhe invisível para quem não é designer, mas é o elemento com que o visitante passa mais tempo em contato. Afinal, a maior parte de um site é texto. Neste guia, vamos explicar em linguagem simples como escolher as fontes do seu site e o que evitar.

O que é tipografia, afinal?

Tipografia é a arte de organizar o texto para que ele seja fácil de ler e agradável de olhar. Ela envolve três decisões principais:

• Qual fonte usar — o desenho das letras (também chamado de família tipográfica).
• Que tamanho dar a cada coisa — título, subtítulo, texto corrido, legenda.
• Como espaçar — distância entre linhas, entre letras e entre blocos de texto.

É comum confundir "fonte" com "tipografia". A fonte é o ingrediente; a tipografia é a receita. Você pode ter uma fonte excelente e, ainda assim, uma tipografia ruim — basta usá-la pequena demais, com linhas colando umas nas outras.

Por que a fonte do seu site importa mais do que parece

Antes de ler a primeira palavra, o visitante já formou uma impressão. E a letra participa dessa impressão de três formas:

1. Ela comunica personalidade

Uma fonte com traços finos e elegantes sugere sofisticação — combina com joalheria, arquitetura, estética. Uma fonte robusta e arredondada sugere proximidade e informalidade — combina com pet shop, hamburgueria, escola infantil. Uma fonte técnica e reta sugere seriedade — combina com contabilidade, clínica, advocacia. Escolher errado não é só uma questão de gosto: é uma mensagem trocada. Esse raciocínio é o mesmo que aplicamos às cores no design.

2. Ela afeta o quanto as pessoas leem

Texto difícil de ler é texto que ninguém lê. Se a sua página explica um serviço, apresenta preços ou responde dúvidas, cada trecho que o visitante pula é uma chance de venda perdida. Tipografia confortável faz a pessoa ficar mais tempo e chegar até o botão de contato.

3. Ela constrói consistência de marca

Quando o site, o cartão, o Instagram e o orçamento usam as mesmas fontes, tudo parece pertencer à mesma empresa. Essa repetição é uma das bases da identidade visual e é o que faz uma marca pequena parecer organizada e estabelecida.

Os tipos de fonte e o que cada um comunica

Serifadas

Têm pequenos "pezinhos" nas pontas das letras. Passam tradição, credibilidade e requinte. Boas para títulos e para negócios que querem transmitir história e confiança.

Sem serifa

Letras limpas, sem os pezinhos. São as mais usadas na internet porque funcionam muito bem em tela, inclusive em textos longos e em celular. Passam modernidade e clareza.

Manuscritas e decorativas

Imitam escrita à mão ou têm desenho muito marcante. Chamam atenção, mas cansam rápido. Use com moderação: um logotipo, uma frase curta, um selo. Jamais em parágrafos.

Hierarquia: o segredo dos sites fáceis de ler

Hierarquia é a diferença de tamanho e peso entre os elementos do texto. É ela que faz o visitante entender a página antes de ler: o olho bate no título grande, desce para o subtítulo, encontra o parágrafo. Sem hierarquia, tudo parece igualmente importante — e, quando tudo é importante, nada é.

Uma escala confortável para a maioria dos sites fica assim:

• Título principal: 40 a 48 px no computador.
• Subtítulos: 24 a 30 px.
• Texto corrido: 16 a 18 px — nunca menos de 16 px.
• Legendas e avisos: 12 a 14 px.
• Espaço entre linhas: cerca de 1,6 vez o tamanho da letra.

Como escolher as fontes do seu site em 5 passos

1. Defina a personalidade da marca em três palavras. Por exemplo: acolhedora, simples, confiável. Essas palavras viram um filtro na hora de olhar opções.
2. Escolha primeiro a fonte do texto. Ela é a que aparece mais. Priorize legibilidade acima de estilo.
3. Escolha uma fonte de título que contraste. Contraste é diferente de conflito: se as duas fontes forem parecidas, o resultado parece erro; se forem opostas em estrutura, funciona bem.
4. Limite-se a duas fontes. Três, no máximo, e só com um motivo claro. Para criar variedade, use pesos diferentes (regular, semibold, bold) da mesma família.
5. Teste no celular antes de decidir. Abra a página em um smartphone e leia um parágrafo inteiro. Se você se cansar, o cliente também vai. Vale revisar também o comportamento em sites responsivos.

Fontes e a velocidade do site

Cada fonte personalizada é um arquivo que o navegador precisa baixar. Colocar cinco famílias diferentes, com todos os pesos e estilos, pode adicionar centenas de kilobytes à página — e deixar o site visivelmente mais lento no celular. Como um site rápido ajuda a vender mais, vale seguir três regras simples:

• Carregue só os pesos que você realmente usa.
• Prefira formatos modernos, como WOFF2, que são mais leves.
• Configure o site para mostrar o texto imediatamente, mesmo que a fonte personalizada demore um instante para chegar.

Cinco erros comuns de tipografia

• Texto muito pequeno. O que parece elegante no monitor grande do designer fica ilegível no celular do cliente.
• Linhas longas demais. Parágrafos que atravessam a tela inteira cansam. O ideal fica entre 60 e 80 caracteres por linha.
• Contraste fraco. Cinza-claro sobre branco pode ser bonito em uma foto de referência e péssimo na vida real, especialmente para pessoas com baixa visão.
• Tudo em caixa alta. LETRAS MAIÚSCULAS EM FRASES LONGAS SÃO DIFÍCEIS DE LER, porque perdemos o desenho da palavra. Reserve-as para botões e etiquetas curtas.
• Excesso de fontes. Cada família nova é mais uma voz na conversa. Duas vozes combinam; cinco viram barulho.

Quem cuida disso no seu site?

Escolher e combinar fontes, montar a escala de tamanhos, ajustar espaçamentos, garantir contraste adequado e ainda manter tudo leve para carregar rápido é um trabalho de decisões pequenas e encadeadas — o tipo de coisa que consome tempo de quem tem uma empresa para tocar. A TH Designer resolve esse ponto junto com o projeto do site: definimos a tipografia a partir da personalidade da sua marca, aplicamos em todas as páginas de forma consistente e entregamos um padrão que você pode reaproveitar nas redes sociais e nos materiais impressos. Conheça nossos serviços e fale com a gente sem compromisso.

Conclusão

Tipografia não é enfeite. É a estrutura que sustenta praticamente tudo o que o visitante vê no seu site. Uma escolha bem-feita deixa a leitura leve, reforça a personalidade da marca e transmite cuidado — e cuidado, no fim, é o que o cliente traduz como profissionalismo.

Se você quiser começar por um único ajuste hoje, comece pelo tamanho do texto corrido: coloque 16 px ou mais, com bom espaço entre as linhas, e abra a página no celular. Só essa mudança já torna o seu site mais confortável para a maioria das pessoas que vão visitá-lo.

Perguntas frequentes