📚 Relacionado: site para dentista em butia rs • pagina vendas estrutura copywriting funciona • whitespace espaco branco para design
📖 Aprofunde-se: Guia completo de conversão para sites
Você abriu o site no celular pra mostrar pra um amigo e precisou dar zoom pra ler o próprio texto que escreveu. Ele riu, disse "tá pequeno isso aí" e devolveu o celular. Se aconteceu com ele, acontece com todo visitante que chega pelo Google e desiste antes de entender o que você vende. Tipografia não é decoração — é ferramenta de conversão.
Por que tipografia importa para vendas
Tipografia é invisível quando está certa e insuportável quando está errada. Um visitante não pensa "que fonte horrível". Ele pensa "não consigo ler isso" e sai. Metade dos seus visitantes acessa pelo celular. Se o texto fica pequeno demais, ilegível ou cansativo, você perde a venda antes do visitante entender sua oferta.
Escolhas tipográficas certas aumentam a taxa de leitura, reduzem o esforço visual e comunicam profissionalismo. Escolhas erradas custam clientes.
Legibilidade acima de tudo: escolha fontes limpas
Fontes muito decorativas ou finas demais dificultam a leitura, especialmente em telas pequenas. A fonte "elegante" que você adora pode ser ilegível para quem tem dislexia ou baixa visão.
Para textos de corpo, priorize fontes sans-serif limpas e testadas: Inter, Roboto, Segoe UI ou a família de fontes nativa do sistema operacional. Essas foram desenvolvidas especificamente pra legibilidade em telas.
Fontes recomendadas por contexto
- Títulos (H1, H2): Você pode usar uma fonte com mais personalidade: Montserrat, Playfair Display (elegante), ou uma sans-serif mais ousada.
- Corpo (parágrafos): Inter, Roboto, Segoe UI, -apple-system. Simples, limpo, legível.
- Contraste visual: Use uma fonte para títulos e outra para corpo. Não misture mais de duas — excesso de fontes cria amadorismo visual.
Dica: Faça download de uma fonte que combine leitura e estilo no Google Fonts — é grátis e você testa antes de implementar.
Tamanho mínimo de texto: 16px é a regra ouro
Textos de corpo abaixo de 16px são difíceis de ler no celular e forçam o visitante a dar zoom — uma fricção que aumenta o abandono. Use no mínimo 16px para parágrafos em dispositivos móveis. Isso significa que sua CSS precisa ser responsiva: o texto cresce automaticamente em telas grandes.
Títulos podem ser maiores (24-36px), mas nunca use texto de corpo menor que 16px. Pesquisa com usuários reais mostra que esse é o limite onde leitura fica confortável sem esforço ocular adicional.
Contraste entre texto e fundo: legibilidade é acessibilidade
Texto cinza claro (RGB 170, 170, 170) sobre fundo branco pode parecer elegante, mas prejudica a leitura, especialmente para usuários com baixa visão, daltonismo ou em ambientes com brilho de tela alto.
A recomendação de acessibilidade internacional (WCAG) é contraste mínimo de 4.5:1 entre texto e fundo. Na prática: use texto escuro (cinza muito escuro ou preto) sobre fundo claro, ou texto claro (branco) sobre fundo escuro. Não tente ser criativo aqui — legibilidade vem em primeiro lugar.
Dica: Use uma ferramenta online como WebAIM Contrast Checker para validar o contraste do seu site. Custa zero e resolve.
Não misture mais de duas ou três fontes
Excesso de fontes diferentes na mesma página cria poluição visual. Visitante vê caos visual — e associa caos com falta de profissionalismo. O padrão profissional é: uma fonte para títulos, outra para corpo. Pronto.
Se você quer adicionar variedade, use pesos diferentes da mesma fonte (regular, bold, light) em vez de trocar de fonte.
Espaçamento entre linhas (line-height): respire!
Textos com linhas muito próximas (line-height 1.2 ou menos) cansam a leitura. Olho tem dificuldade pra pular pra próxima linha. Resultado: visitante cansa, para de ler e sai.
Um espaçamento de 1.5 a 1.7 vezes o tamanho da fonte melhora significativamente a experiência de leitura em blocos de texto longos. Isso significa que um texto de 16px deve ter espaçamento de linha entre 24-27px.
Parágrafos também precisam respirar: deixe espaço entre um e outro (margin-bottom de 20-30px).
Hierarquia tipográfica clara: guie o olhar
Diferenças evidentes de tamanho e peso entre títulos, subtítulos e corpo do texto ajudam o visitante a escanear a página rapidamente. Ele consegue encontrar a informação que procura sem precisar ler tudo palavra por palavra.
Sem hierarquia clara, tudo parece igual — e quando tudo é importante, nada é importante.
Implemente assim:
- H1: 32-48px, bold ou semibold
- H2: 24-28px, bold ou semibold
- H3: 18-22px, semibold
- Parágrafo: 16px, regular
- Destaque dentro do texto: bold ou itálico, mesma cor de base
Espaçamento entre palavras e letras: menos é mais
Aumentar artificialmente o espaço entre palavras (word-spacing) ou letras (letter-spacing) pode parecer moderno, mas reduz legibilidade. Olho humano lê por agrupamentos de letras, não palavra por palavra. Espaçamento excessivo quebra esse ritmo.
Use espaçamento padrão entre palavras. Para letter-spacing, só aumente em títulos (0.5px a 1px) — nunca no corpo do texto.
Tamanho de linha (width): evite linhas muito longas
Linhas muito longas (mais de 70-80 caracteres) dificultam a leitura — olho perde a posição ao pular pra próxima linha. Por isso a maioria dos blogs e jornais usa coluna de 600-750px de largura. Se seu site tem parágrafo que vai de uma ponta a outra da tela em desktop, o visitante vai desistir de ler.
Use max-width: 750px em parágrafos. Seu texto vai ficar mais respirado e mais fácil de ler.
Alinhamento de texto: esquerdista é padrão
Texto justificado (distribuído nos dois lados) pode parecer mais formal, mas deixa espaçamento irregular entre palavras — prejudica leitura, especialmente em dispositivos móveis. Use alinhamento à esquerda (padrão). Centralizador apenas para títulos e destaques.
O teste do "amigo no ônibus"
Mande seu site pra alguém agora e peça pra ler em pé, no ônibus, sem dar zoom. Se a pessoa precisar aproximar o celular do rosto ou der zoom pra ler, seu tamanho de fonte já está custando clientes. Essa é a realidade — seus visitantes leem em movimento, em contextos distraídos, em diversas luminosidades.
Se funciona no ônibus, funciona em qualquer lugar.
Dica prática: Faça um teste de responsividade no seu telefone pessoal. Abra seu site em 4G (não WiFi), em um local com luz solar. Se funcionar bem nessas condições difíceis, funciona em qualquer lugar.
Tipografia é uma decisão que afeta cada visitante que chega no seu site. Fonte pequena, ilegível ou confusa custa conversão. A Desenvolve Sites estrutura sites com tipografia pensada no usuário — tamanho legível, hierarquia clara, contraste acessível. Se seu site força zoom ou cansa de ler, é hora de revisar. Comece hoje.
Perguntas Frequentes
Qual fonte devo usar para meu site?
Para corpo: Inter, Roboto, Segoe UI ou fontes nativas do sistema (mais rápidas de carregar). Para títulos: você pode usar algo com mais personalidade. Use no máximo duas fontes no site inteiro. Teste no Google Fonts antes de implementar.
Qual é o tamanho de fonte ideal para celular?
16px é o mínimo absoluto para parágrafos — essa é a recomendação internacional de acessibilidade. Não use nada menor. Em desktop você pode manter 16-18px, ou aumentar para 18-20px se quiser mais respiro. O importante é: seja responsivo — o texto cresce em telas maiores.
Como saber se meu contraste está bom?
Use a ferramenta WebAIM Contrast Checker (gratuita) ou a ferramenta nativa do Chrome DevTools. Teste seu texto atual versus fundo. A recomendação é 4.5:1 para texto normal, 3:1 para texto grande. Se o seu contraste está abaixo disso, mude a cor do texto ou do fundo.
Preciso usar uma fonte "diferente" pra destacar minha marca?
Não. Marcas fortes usam tipografia limpas e legíveis. O que diferencia você é o conteúdo, a mensagem e a consistência — não a fonte exótica. Use fontes limpas e dedique energia a escrever bem.