Uma boa tipografia para site usa uma ou duas famílias de fonte legíveis em tela pequena, com suporte completo aos acentos do português, poucos pesos e carregamento rápido. A escolha se resolve em quatro critérios: legibilidade, personalidade da marca, desempenho e acessibilidade. Fonte bonita que atrasa a página ou cansa a leitura no celular perde para uma fonte simples que aparece na hora.
- Escolha uma família para títulos e texto, ou uma para cada, e não passe de duas.
- Teste a fonte com ã, ç, é e ô antes de decidir, porque nem toda fonte desenha bem os acentos.
- Use pouquíssimos pesos (normal e negrito costumam bastar), ou uma fonte variável.
- Defina font-display para o texto aparecer enquanto a fonte carrega.
- Mantenha contraste de 4,5 para 1 e texto que aguente zoom de 200% sem quebrar o layout.
Tipografia é a parte do site que o visitante mais usa e menos percebe: quase tudo que ele faz ali é ler. Quando ela funciona, ninguém comenta, e quando falha, a pessoa desiste antes de saber por quê.
Este guia mostra como escolher, combinar e carregar fontes num site de empresa local, com as recomendações atuais do web.dev e da WCAG. Se você quer ver o trabalho de ponta a ponta, a página de criação de sites profissionais em Florianópolis explica como organizamos um projeto.
O que considerar ao escolher uma fonte para o site
A escolha começa pelo que a fonte precisa fazer: ser lida com conforto numa tela pequena, por qualquer pessoa, em qualquer conexão. A personalidade vem depois, e cabe dentro desse limite.
Estes cinco pontos orientam a decisão:
- Legibilidade em tamanho pequeno: letras que não se confundem (o l minúsculo, o I maiúsculo e o número 1 devem ser distinguíveis).
- Acentuação completa: ã, õ, ç, é, ê, ô e maiúsculas acentuadas precisam estar desenhadas na fonte.
- Pesos disponíveis: normal e negrito no mínimo, e itálico se o texto usar ênfase.
- Licença de uso na web: cada fonte define se pode ser usada em site, então confira antes de instalar.
- Peso do arquivo: cada peso e cada estilo é um arquivo a mais para baixar.
Um teste de dois minutos resolve boa parte das dúvidas. Escreva uma frase real do seu negócio, com acentos e números, em tamanho de celular, e leia. Se cansa, a fonte não serve, por mais bonita que seja.
Fonte serif ou sem serifa, qual usar no site
Nenhuma das duas vence sempre, e a decisão fica com a legibilidade do desenho específico e com o tom da marca. Fontes serifadas têm pequenos traços nas pontas das letras e passam formalidade e tradição. Fontes sem serifa têm traço limpo e passam simplicidade e modernidade.
Em tela, o que pesa mais do que a categoria é a qualidade do desenho: abertura das letras, altura do x e espaçamento. Vale testar dois ou três candidatos no tamanho real do texto antes de decidir.
Uma combinação que funciona para muitos negócios locais é usar uma fonte com personalidade nos títulos e uma neutra e legível no corpo do texto. O contraste entre as duas cria hierarquia sem esforço.
Como combinar fontes sem cansar o leitor
A combinação segura é uma família para títulos e outra para o texto, com estilos claramente diferentes entre si. Duas fontes parecidas demais criam ruído, porque a diferença parece um erro e não uma escolha.
Para montar uma hierarquia que se entende à primeira vista:
- Título principal (H1) em tamanho maior e peso maior que os demais.
- Subtítulos (H2 e H3) em tamanho intermediário, usando a mesma família do título.
- Texto corrido em tamanho confortável, com entrelinha folgada.
- Botões e avisos com o mesmo peso e o mesmo estilo em todas as páginas.
Uma terceira fonte raramente se justifica. Se você precisa de mais variação, use pesos e tamanhos diferentes dentro das duas famílias que já escolheu. Isso mantém o site coerente e reduz o número de arquivos carregados.
Essa coerência faz parte da identidade visual do negócio, assunto do guia sobre tendências de design de sites em 2026.
Como deixar o texto legível na tela
Texto legível depende de tamanho, entrelinha, largura da linha e contraste trabalhando juntos. O tamanho padrão de texto dos navegadores é de 16 pixels, e reduzir muito abaixo disso força o visitante a dar zoom no celular.
A WCAG, as Diretrizes de Acessibilidade para Conteúdo Web do W3C, traz números que servem de régua para o texto:
| Aspecto | Referência da WCAG 2.2 | Nível |
|---|---|---|
| Contraste do texto comum | 4,5 para 1 (critério 1.4.3) | AA |
| Contraste do texto grande | 3 para 1 (critério 1.4.3) | AA |
| Ampliação do texto | Até 200% sem perda de conteúdo (critério 1.4.4) | AA |
| Espaçamento que o layout aguenta | Entrelinha de 1,5 vez o tamanho, espaço entre parágrafos de 2 vezes, letras 0,12 e palavras 0,16 (critério 1.4.12) | AA |
| Largura da linha | No máximo 80 caracteres (critério 1.4.8) | AAA |
| Alinhamento | Sem justificação nas duas margens (critério 1.4.8) | AAA |
Em texto: o layout precisa continuar funcionando quando a pessoa amplia o texto ou aumenta o espaçamento por conta própria, e os níveis AAA da tabela são recomendação de melhor prática, mais rigorosos do que o mínimo exigido no AA. Na prática, texto alinhado à esquerda, linhas de tamanho moderado e entrelinha folgada seguem o que a WCAG recomenda.
Para respeitar o zoom, defina tamanhos em unidades relativas, como rem, em vez de pixels fixos. Assim quem configurou fonte maior no navegador ou no celular vê o site do jeito que precisa.
Fontes do sistema ou fontes hospedadas
Fontes do sistema são as que já estão instaladas no aparelho do visitante e carregam sem custo, e fontes hospedadas são arquivos que o site envia para o navegador. A escolha equilibra velocidade e identidade.
| Critério | Fontes do sistema | Fontes hospedadas |
|---|---|---|
| Velocidade | Nenhum arquivo para baixar | Cada família e cada peso é um arquivo |
| Identidade visual | Aparência varia entre Windows, Mac, Android e iOS | Visual igual em todo aparelho |
| Risco de salto no layout | Nenhum | Pode haver, se a troca não for bem configurada |
| Configuração | Uma linha de CSS | Arquivos, declaração e ajuste de carregamento |
| Indicada para | Sites que priorizam velocidade máxima | Sites com identidade tipográfica definida |
Em texto: para a maioria das empresas locais, o melhor equilíbrio é uma fonte hospedada de boa qualidade, bem configurada e com poucos pesos, e uma fonte do sistema como reserva. O web.dev cita o system-ui como uma alternativa para quem quer reduzir pedidos de arquivo.
Fontes seguras para a web, o termo antigo para fontes presentes em quase todo computador, hoje se resolvem com essa pilha de reserva. Você declara a fonte escolhida e, logo depois, uma fonte do sistema parecida, para o texto aparecer na hora enquanto a fonte hospedada carrega.
Como carregar fontes sem deixar o site lento
Fonte mal carregada atrasa o texto ou faz a página pular de lugar, e as duas coisas se corrigem com poucas decisões. O web.dev, o site de boas práticas de desempenho do Google, reúne as recomendações abaixo.
- Use o formato WOFF2. O web.dev diz que ele comprime 30% melhor do que o WOFF, o que reduz o download.
- Defina o font-display. Essa regra de CSS controla o que aparece enquanto a fonte carrega. O web.dev sugere swap para elementos de marca e optional para o texto do corpo, que evita saltos de layout.
- Use subconjuntos de caracteres. Um subconjunto (subset) envia só os símbolos que o site usa. Para português, o subconjunto latino cobre os acentos, e o Google Fonts inclui o latino automaticamente.
- Limite os pesos. Cada peso de uma fonte estática é um arquivo. Pesos que ninguém vê podem sair.
- Considere uma fonte variável. Ela guarda vários estilos em um só arquivo, e o web.dev cita um caso em que 48 fontes individuais viraram um único arquivo com 88% menos peso.
- Use o preload com cuidado. Ele antecipa a busca da fonte, mas o web.dev alerta que consome recursos do navegador, então serve para a fonte principal e mais nada.
Sobre onde hospedar, o web.dev cita uma análise em que fontes de terceiros renderizaram mais rápido do que fontes próprias, e observa que hospedar por conta própria funciona bem com uma CDN e HTTP/2. A recomendação é medir o seu caso em vez de assumir que um caminho é sempre melhor.
Para evitar o salto de layout na troca de fonte, o CSS tem as regras size-adjust e ascent-override, que ajustam a fonte de reserva às medidas da fonte final. Segundo o web.dev, elas têm suporte no Chrome, no Edge, no Firefox e, nas versões recentes, no Safari.
Se o seu site já está lento, o guia site lento, como resolver mostra outros pontos de peso além das fontes.
Tipografia e acessibilidade
Uma tipografia acessível é a que funciona para quem enxerga pouco, lê com dificuldade ou usa o celular sob sol forte. Os mesmos critérios que ajudam esses leitores ajudam todos os outros.
A lista prática cabe em cinco itens:
- Contraste de 4,5 para 1 no texto comum, conferido com uma ferramenta de contraste.
- Tamanho de texto que aguente ampliação de 200% sem cortar ou sobrepor conteúdo.
- Espaçamento que não quebre quando o leitor aumenta entrelinha e espaço entre letras.
- Links reconhecíveis por mais do que a cor, como o sublinhado.
- Sem texto importante dentro de imagem, porque ele não amplia nem é lido por leitor de tela.
A acessibilidade do site como um todo, com formulários, foco visível e navegação por teclado, está no guia sobre como tornar seu site acessível.
Como definimos a tipografia de um site
Recomendamos duas famílias, poucos pesos e uma fonte de reserva do sistema, com tamanhos definidos uma única vez e aplicados em todas as páginas. É o padrão que usamos nos projetos, porque entrega coerência visual e velocidade ao mesmo tempo.
Na Virtual Floripa, a escolha das fontes acontece junto com a definição das cores e do logo, depois da conversa inicial sobre o negócio. Recomendamos testar a fonte com texto real do cliente, incluindo os acentos, e olhar o resultado no celular antes de fechar. Recomendamos aprovar a tipografia junto com o cliente numa página de teste, e usamos essa página como referência para o restante do site.
Montamos a declaração das fontes com font-display definido, formato WOFF2 e só os pesos que o site usa. Entregamos o site com painel visual, para o cliente editar textos sem mexer na tipografia definida.
Como escolher a fonte do seu site em cinco passos
O caminho abaixo leva de uma lista de candidatas a uma fonte configurada, sem depender de gosto pessoal.
- Liste duas ou três fontes que combinam com a personalidade da marca.
- Teste cada uma com uma frase real do negócio, com acentos, em tamanho de celular.
- Escolha a de leitura mais confortável e defina um único par de famílias.
- Limite os pesos e escolha o formato WOFF2, com subconjunto latino.
- Meça a velocidade e confira o contraste antes de publicar.
Se a fonte final atrasa a página, volte ao passo 4 e reduza pesos. Se cansa a leitura, volte ao passo 2 e teste outra candidata.
Erros comuns na tipografia de sites e como corrigir
Os erros mais comuns nascem de escolher pelo visual e deixar o desempenho para depois. Todos têm correção direta.
- Muitas famílias e muitos pesos: reduza para duas famílias e os pesos que aparecem na tela.
- Texto pequeno demais no celular: aumente o texto do corpo e teste com o zoom do navegador.
- Fonte sem acentos completos: troque por uma que desenhe bem ã, ç e ô.
- Fonte carregada sem font-display: acrescente a regra e confira se o texto aparece durante o carregamento.
- Texto claro sobre fundo claro: ajuste as cores até chegar a 4,5 para 1.
- Título em imagem: reescreva como texto, para ampliar e ser lido por leitor de tela.
Perguntas frequentes
Quantas fontes devo usar em um site?
Uma ou duas famílias bastam. Mais do que isso pesa no carregamento e enfraquece a identidade visual.
Qual a melhor fonte para site de empresa?
Não existe uma melhor para todos. A que combina com a sua marca, lê bem em celular, tem acentos completos e carrega rápido é a certa para o seu caso.
Google Fonts ou fonte hospedada no próprio site?
O web.dev recomenda medir os dois. Uma análise citada por ele mostrou fontes de terceiros renderizando mais rápido, e hospedar por conta própria funciona bem com CDN e HTTP/2.
O que são fontes seguras para a web?
São fontes instaladas na maioria dos aparelhos, que carregam sem download. Hoje funcionam como fonte de reserva para o texto aparecer enquanto a fonte escolhida chega.
Que tamanho de fonte usar no celular?
O padrão dos navegadores é 16 pixels para o texto do corpo, e o mais importante é que o texto aguente ampliação de 200% sem quebrar o layout. Teste no seu próprio aparelho e em um celular mais simples.
Fonte variável vale a pena?
Vale quando o site usa vários pesos, porque tudo vem em um arquivo só. Para um site que usa apenas normal e negrito, duas fontes estáticas em WOFF2 costumam bastar.
Como decidir a tipografia do seu site
Escolha uma ou duas famílias legíveis, com acentos completos, poucos pesos e carregamento configurado. O critério que orienta a decisão é a leitura no celular, com a velocidade e o contraste conferidos.
Para ver como a tipografia entra na conversão do site, o guia sobre a taxa de conversão do site mostra o que medir.
Se você quer revisar as fontes do seu site, fale com a gente pela página de contato.
Design e conversão entram no projeto desde o primeiro rascunho, e não como conserto depois. Conheça a criação de sites profissionais da Virtual Floripa e o que cada pacote inclui.
