Tipografia para siteComo escolher fontes, tamanho e espaçamento para o texto ser lido (e vender).
Mais de 90% do que existe num site é texto. Quando a fonte é pequena, a linha é longa demais ou o carregamento “pula”, o visitante não reclama: simplesmente vai embora. Este guia mostra o problema, os critérios para decidir e ferramentas para calcular tudo.
Qual o tamanho e o espaçamento ideais de fonte para um site?
Para texto corrido, use entre 16 e 20 px (rem no CSS), entrelinha de 1,4 a 1,7 e linhas de 45 a 75 caracteres. Limite o site a duas famílias de fonte, carregue poucos pesos em WOFF2 e use clamp() nos títulos para que acompanhem a tela. São faixas de referência, e o ideal depende da fonte e do público.
Texto bonito que ninguém consegue ler
Antes de escolher qualquer fonte, entenda o que torna um texto confortável. Mexa nos controles e veja o placar mudar.
A maioria dos sites de pequenas empresas tem o mesmo problema: o texto foi pensado para ser visto, não para ser lido. Fonte de 13 ou 14 pixels no celular, linhas que atravessam a tela inteira, entrelinha apertada, cinza claro sobre branco. Na tela do designer, com monitor grande e olho treinado, parece elegante. Na mão de um cliente, de pé no ônibus, vira esforço.
Esforço de leitura tem custo direto: o visitante lê menos, entende pouco da oferta e abandona a página antes de chegar ao botão. A boa notícia é que legibilidade não é gosto pessoal. Existem faixas de valores que funcionam para a maioria das pessoas, e três delas explicam quase tudo: tamanho da fonte, entrelinha (line-height) e comprimento da linha (quantos caracteres cabem antes da quebra).
Use o laboratório abaixo. Ele não substitui um teste com pessoas reais, mas mostra, de forma imediata, em que ponto o conforto de leitura começa a cair.
Corpo de texto. Títulos são outra conversa.
Multiplicador do tamanho da fonte.
Largura máxima do parágrafo, em caracteres.
Entrega em 7 dias úteis, sem surpresa no valor
Criamos sites rápidos para empresas de São Paulo. Você aprova o layout antes de qualquer desenvolvimento, acompanha cada etapa pelo WhatsApp e recebe o site publicado com treinamento para editar os textos sozinho. O prazo começa a contar quando recebemos o conteúdo, e qualquer ajuste de texto nos primeiros trinta dias está incluído.
0
Nota: As faixas usadas aqui (corpo entre 16 e 20 px, entrelinha entre 1,4 e 1,7 e linhas de 45 a 75 caracteres) são recomendações amplamente adotadas em tipografia para a web, não regras absolutas. Fonte e público mudam o ideal.
O vocabulário mínimo: as linhas invisíveis de toda letra
Quem entende cinco linhas imaginárias consegue comparar fontes com critério, em vez de “achar bonita”.
Toda fonte é construída sobre linhas invisíveis. Quando você escolhe duas fontes para o mesmo site, a diferença entre elas quase sempre está na altura do x (a altura das letras minúsculas), e não no desenho de cada letra. Fontes com x-height alta parecem maiores no mesmo tamanho em pixels e mantêm a leitura confortável em telas pequenas.
Clique nos termos para ver cada linha sobre uma palavra real. A medição é feita na hora, com a fonte que o seu navegador está usando, e por isso as posições mudam de fonte para fonte.
Topo do b, d, h, k, l
Em muitas fontes passa um pouco da altura das maiúsculas. Entrelinhas muito apertadas fazem ascendentes e descendentes se tocarem.
O que define o “tamanho aparente”
Duas fontes em 16 px podem parecer de 15 e de 18. Compare sempre com o mesmo texto, lado a lado.
Onde as letras “pisam”
É a referência do alinhamento entre ícone, botão e texto. Desalinhar por 2 px já dá sensação de descuido.
Cauda do g, j, p, q, y
Precisa de espaço: cortar a cauda por causa de um line-height muito baixo ou de um overflow hidden é erro comum em botões.
Como escolher fontes sem cair na armadilha do “gostei dessa”
O critério não é beleza: é o que a marca precisa transmitir, onde o texto será lido e quanto custa carregar.
Escolher fonte começa pela pergunta “o que o visitante precisa sentir em três segundos?”. Uma clínica quer transmitir segurança e acolhimento; uma agência de tecnologia, precisão; um buffet, calor e celebração. A fonte não faz o trabalho sozinha, mas reforça (ou contradiz) a mensagem do texto.
Depois vêm os critérios práticos, nesta ordem: 1) legibilidade em tamanho pequeno, 2) suporte a acentos e símbolos do português (teste “ção, ã, õ, é, ü, R$, ª, º”), 3) quantidade de pesos disponíveis, 4) licença para uso web e 5) peso do arquivo. Um bom ponto de partida são famílias de licença aberta (como as do Google Fonts), que já têm subsets e variantes pensados para a web.
Escolha o perfil da sua marca. A ferramenta sugere uma direção e mostra uma prévia com fontes do sistema, apenas para ilustrar o estilo. Os nomes sugeridos são pontos de partida para você testar no seu layout, não receitas fechadas.
Seu negócio, no ponto certo
Atendimento próximo, prazo claro e resultado que dá para medir. Peça um orçamento sem compromisso e receba a proposta em até um dia útil.
Pedir orçamentoRegra de ouro das combinações: use no máximo duas famílias (uma para títulos, outra para texto) e crie contraste claro entre elas. Duas fontes “quase iguais” parecem erro. Se a dúvida for grande, uma única família com pesos diferentes (regular, semibold, bold) resolve 90% dos casos e carrega mais rápido.
Evite também usar fontes decorativas em textos longos, itálicos em blocos grandes e caixa-alta em frases inteiras. A leitura por formato da palavra funciona melhor com minúsculas: em maiúsculas todas as palavras viram retângulos parecidos.
Hierarquia com método: a escala modular
Em vez de escolher tamanhos “no olho”, multiplique o corpo por uma razão fixa. O resultado tem ritmo.
Sites sem sistema acabam com 14 tamanhos de fonte diferentes, quase iguais entre si (17, 18, 19, 20 px…), o que cria ruído visual sem criar hierarquia. A escala modular resolve isso: você escolhe o tamanho do corpo e uma razão (por exemplo, 1,25) e cada nível seguinte é o anterior multiplicado pela razão.
Razões menores (1,125 a 1,2) dão hierarquia sutil, boa para interfaces densas e blogs. Razões maiores (1,333 a 1,618) dão contraste forte, útil em páginas de venda com poucos blocos. Ajuste abaixo e copie o CSS pronto.
Observe que, mesmo com a escala, o título principal da página costuma ser tratado de forma especial. No hero, muitos sites usam tamanhos fluidos (próxima seção) para que o título nem estoure no celular nem fique tímido no desktop.
Fonte que acompanha a tela: calculadora de clamp()
Em vez de três tamanhos fixos por breakpoint, uma única regra que cresce de forma contínua entre dois limites.
A função CSS clamp(mínimo, preferido, máximo) permite definir que um texto nunca fique menor que X, nunca maior que Y e, no meio, cresça de forma proporcional à largura da tela. É uma das melhores técnicas para títulos: acabam os saltos bruscos entre tablet e desktop e o texto não precisa de uma dezena de media queries.
O cálculo envolve uma pequena equação de reta, mas você não precisa fazê-la à mão. Informe o menor e o maior tamanho, e a largura de tela em que cada um deve valer. Arraste a tela simulada para ver o texto responder.
Cuidado: Boa prática de acessibilidade: o texto precisa continuar legível quando o usuário aumenta o zoom. Por isso, prefira rem a px nos limites e evite travar o máximo em valores baixos. Veja o guia de acessibilidade.
O custo escondido: fontes que pesam e fazem a página “pular”
Fonte é arquivo. Cada família e peso entram na conta de velocidade e podem causar mudança de layout.
Muitos sites carregam quatro famílias com seis pesos cada, em formatos antigos, de servidores de terceiros. O resultado é uma fila de arquivos que atrasa a renderização do texto. Pior: enquanto a fonte final não chega, o navegador mostra uma fonte reserva, e na troca o texto muda de largura. Parágrafos reflowam, botões se movem e o visitante clica no lugar errado. Esse efeito entra na métrica CLS (Cumulative Layout Shift) dos Core Web Vitals, que aprofundamos no guia de site lento no celular.
Dois caminhos reduzem o problema: pesar menos (menos famílias e pesos, formato WOFF2, subset do alfabeto latino, fonte variável quando fizer sentido) e trocar sem pular (font-display adequado e uma fonte reserva com métricas parecidas). Use as ferramentas para sentir a diferença.
Valores ilustrativos: a ordem de grandeza varia muito por fonte. Meça os arquivos reais no painel de rede do navegador.
@font-face {
font-family: "Minha Fonte";
src: url("/fonts/minha-fonte-latin.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
/* Fonte reserva com métricas ajustadas para reduzir o pulo */
@font-face {
font-family: "Minha Fonte Fallback";
src: local("Arial");
size-adjust: 104%;
ascent-override: 92%;
descent-override: 24%;
}
body { font-family: "Minha Fonte", "Minha Fonte Fallback", sans-serif; }
Os valores de ajuste (size-adjust, ascent-override) dependem de cada fonte. O exemplo acima é só ilustrativo: ferramentas de geração de métricas e a documentação do navegador ajudam a calcular os números corretos. Também vale precarregar (preload) apenas a fonte do texto principal e hospedar os arquivos no próprio domínio, o que costuma ser mais rápido e evita enviar dados do visitante a terceiros, ponto relevante para a LGPD.
O teste de apertar os olhos: o que se destaca quando tudo fica borrado?
Hierarquia visual é a ordem em que os olhos percorrem a página. Dá para testá-la em dez segundos.
Um teste simples de designers: olhe a página de longe ou com os olhos semicerrados. O que continua visível é o que sua hierarquia está dizendo que importa. Se o que sobra é o logotipo e uma imagem de banco de imagens, e o benefício e o botão sumiram, o problema não é a cor: é o contraste entre níveis de tipografia.
A tela abaixo simula esse teste. Aumente o desfoque nos dois modelos e compare. A versão “sem hierarquia” usa o mesmo peso e tamanho para tudo (um erro muito comum em páginas feitas por blocos); a versão “com hierarquia” usa três níveis claros.
Pergunte a alguém: “o que essa página oferece e o que eu faço agora?”. Se a pessoa hesita, a hierarquia falhou.
Para criar hierarquia com tipografia, você tem seis alavancas: tamanho, peso, cor, caixa, espaçamento e posição. Use duas ou três de cada vez. Um título grande e bold já basta; se ainda por cima ele for colorido, em caixa-alta e sublinhado, os elementos competem entre si.
Seis erros de tipografia que derrubam conversão
Arraste o controle e veja a diferença entre um texto apertado e um texto confortável, com o mesmo conteúdo.
Sites que trazem pedidos de orçamento
Criamos sites institucionais, lojas virtuais e landing pages.
Cada projeto tem prazo definido, layout aprovado antes do desenvolvimento e foco em velocidade e SEO.
Fonte pequena demais
Corpo abaixo de 16 px no celular obriga o zoom. Em listas e rodapés, 14 px ainda pode funcionar; no texto principal, não.
Linhas gigantes
Acima de 80 caracteres, o olho se perde na volta para a linha seguinte. Limite a largura do parágrafo, mesmo em telas grandes.
Entrelinha apertada
Valores abaixo de 1,3 em texto corrido cansam. Títulos podem ter 1,0 a 1,2; parágrafos pedem de 1,4 a 1,7.
Texto centralizado em bloco longo
Centralizar funciona para uma ou duas linhas. Em parágrafos, a borda esquerda irregular dificulta achar o início da linha.
Caixa-alta e itálico em excesso
Maiúsculas em frases longas e itálico em blocos reduzem a velocidade de leitura. Reserve para rótulos curtos e ênfases.
Pesos finos em fundo escuro
Fontes light sobre fundo preto “vibram” e perdem contraste. Aumente o peso e o tamanho nesse caso e confira o contraste no guia de acessibilidade.
Gere o seu sistema tipográfico em CSS
Reúna tudo o que decidiu em variáveis: um lugar só para mudar, um site inteiro coerente.
Depois de entender cada peça, falta consolidar. Um sistema tipográfico é um conjunto curto de decisões registradas em variáveis CSS: famílias, escala, pesos, entrelinhas e largura de leitura. Num site WordPress com Elementor, essas variáveis podem ser colocadas no CSS personalizado do site e referenciadas em todos os widgets, em vez de se ajustar bloco a bloco.
Escolha as opções e copie. O resultado usa clamp() nos títulos e rem nos limites, conforme visto nas seções anteriores.
Troque as famílias do sistema pelas que você escolheu (Google Fonts, por exemplo) mantendo uma pilha de reserva.
Como aplicar no Elementor: em Site Settings → Custom CSS (ou no CSS do tema filho) cole as variáveis; nos estilos globais de tipografia, aponte cada nível para elas. Revise as páginas mais importantes (home, serviços, contato) e o blog, e depois meça o impacto na velocidade e nas conversões, como no guia de landing page.
Checklist final e resumo
Passe por estes itens antes de publicar qualquer página ou refazer o site.
Resumindo: tipografia é a interface do conteúdo. Com corpo entre 16 e 20 px, entrelinha confortável, linha de 45 a 75 caracteres, no máximo duas famílias, poucos pesos e carregamento enxuto, você resolve a maior parte dos problemas de leitura e ainda melhora a velocidade.
O que fazer esta semana:
- Abra a página mais importante no celular e responda: o corpo está confortável sem zoom?
- Meça quantas famílias e pesos o site baixa hoje (aba Rede do navegador).
- Defina a escala e as variáveis com a ferramenta da seção 09.
- Troque tamanhos fixos dos títulos por
clamp(). - Aplique o teste de apertar os olhos nas páginas de serviço e contato.
- Anote a mudança e compare as conversões em 30 dias.
Como este guia foi feito
Conteúdo escrito pela equipe da Criação de Sites São Paulo, com base na documentação oficial listada ao lado e na nossa experiência em projetos de sites, lojas virtuais e presença digital. Última revisão em 14 de outubro de 2026.
As simulações e os números de exemplo são didáticos: troque pelos valores da sua operação. Informações técnicas, legais e de plataformas mudam; confirme na fonte oficial e, quando for o caso, com um profissional habilitado.
Quer aplicar isso no seu projeto? Você pode criar um site com tipografia pensada para leitura e velocidade.
Perguntas frequentes
Dúvidas comuns sobre fontes e legibilidade em sites.
Qual o melhor tamanho de fonte para um site?
Para texto corrido, entre 16 e 20 px. Em celular, evite ficar abaixo de 16 px. Rodapés e legendas podem ser menores, desde que continuem legíveis.
Quantas fontes posso usar no site?
Duas famílias já bastam: uma para títulos e outra para texto. Uma única família com pesos diferentes também funciona bem e carrega mais rápido.
Fonte com serifa ou sem serifa para o corpo do texto?
Ambas funcionam em telas atuais. O que mais pesa é a altura do x, o espaçamento e o tamanho. Escolha pela personalidade da marca e teste a leitura no celular.
O que é font-display: swap?
É uma instrução do CSS que mostra um texto reserva imediatamente e troca pela fonte final quando ela chega. Evita texto invisível, mas pode causar mudança de layout se as métricas forem muito diferentes.
Fonte variável vale a pena?
Quando você usa vários pesos de uma mesma família, uma fonte variável pode pesar menos do que vários arquivos separados. Se usa só um ou dois pesos, o ganho é pequeno. Meça no seu caso.
Posso usar Google Fonts?
Pode, e as licenças costumam ser abertas. Para desempenho e privacidade, avalie hospedar os arquivos no próprio domínio. Sobre LGPD, consulte um profissional jurídico.
O que é clamp() e quando usar?
É uma função CSS que define um valor mínimo, um preferido e um máximo. É ótima para títulos que precisam crescer de forma contínua entre celular e desktop.
Como saber se a hierarquia está boa?
Faça o teste de apertar os olhos ou aplique um desfoque na página. Se o que continua visível é o título, o benefício e o botão, a hierarquia está funcionando.
Leia também
Outros guias práticos da Criação de Sites São Paulo para quem quer decidir melhor.
Seu texto está sendo lido?
Revisamos tipografia, hierarquia e carregamento de fontes do seu site, e entregamos um sistema pronto para o WordPress.
