Tipografia para sites: como escolher fontes que parecem premium (pares, tamanhos e ritmo)

Um site parece premium quando a tipografia tem sistema: texto corrido de 16 a 18 px, escala com uma razão fixa, linhas de 50 a 75 caracteres, entrelinha em torno de 1,5, uma serifada e uma sem serifa que contrastam de verdade, arquivos woff2 com font-display definido e licença lida. A fonte em si é a última decisão, não a primeira.

Como montar a escala tipográfica de um site?

Comece pelo tamanho do texto corrido e derive o resto por uma razão fixa. Butterick coloca o corpo ideal na web entre 15 e 25 pixels, e nós trabalhamos com 16 a 18 px para sites de empresa: 16 px quando a fonte tem altura de x generosa, 18 px quando o projeto pede leitura longa. Os títulos não são escolhidos um a um: nascem de uma escala modular, que Tim Brown descreveu na A List Apart como uma sequência de números gerada a partir de um tamanho-base e de uma razão (no exemplo dele, 18 px e 1,618, o que dá 29,124 px para o h1).

A razão define a personalidade. Razões pequenas (1,2 a 1,25) dão um site discreto, editorial, em que o título é apenas um pouco maior que o texto. Razões grandes (1,414 a 1,618) dão contraste de pôster, bom para landing page com uma frase forte e pouco texto. O erro comum é escolher a razão grande e manter os parágrafos longos: o título de 60 px esmaga o texto de 16 px e a página parece um cartaz com rodapé.

Fontes: valores calculados pelo estúdio a partir de Butterick, A List Apart, WCAG 1.4.12 e web.dev, consultados em outubro de 2026.

No celular, a escala precisa encolher sem perder a proporção. A documentação do web.dev recomenda escalonar com clamp(), por exemplo font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem), e avisa para não usar vw sozinho no tamanho da fonte, porque o texto deixa de responder ao zoom do usuário. Um título de 55 px que vira 32 px no celular mantém a hierarquia; um que vira 55 px num aparelho de 360 px de largura quebra a palavra ao meio.

Qual é o comprimento de linha e a entrelinha certos?

De 50 a 75 caracteres por linha e entrelinha de 1,4 a 1,5 para o texto corrido. O Baymard Institute fixa a faixa de 50 a 75 caracteres e lembra que a WCAG estabelece o teto de 80: linha longa demais faz o olho se perder na volta, linha curta demais quebra o ritmo. A documentação do web.dev traduz isso em CSS com max-inline-size: 66ch para artigos e 45ch para citações, citando Bringhurst sobre a linha de 66 caracteres.

A entrelinha tem duas referências que convergem. Butterick recomenda entre 120% e 145% do tamanho da fonte para a maioria dos textos, e o critério 1.4.12 da WCAG 2.2, nível AA, exige que a página continue funcionando quando o usuário define a entrelinha em pelo menos 1,5 vez o tamanho da fonte, com 2 vezes de espaço entre parágrafos, 0,12 entre letras e 0,16 entre palavras. Projetar já em 1,5 evita descobrir na auditoria que o layout quebra. O que a norma brasileira e a ação do MPF exigem de sites de empresa está em acessibilidade digital e a NBR 17225.

A regra prática: linha mais longa pede entrelinha maior, linha curta aceita entrelinha menor. Título de 44 px com entrelinha de 1,5 vira um bloco frouxo; o mesmo título em 1,1 fica compacto e presente. Use line-height sem unidade, como o web.dev recomenda, para que a entrelinha acompanhe o tamanho em cada breakpoint.

Como combinar serifada e sem serifa, e quais pares funcionam?

Um par funciona quando as duas fontes têm papéis diferentes e contraste visível: uma manda nos títulos, a outra no texto, e ninguém confunde as duas. Par de fontes parecidas (duas sem serifa geométricas, por exemplo) parece erro de arquivo, não escolha. E a alternativa ao par é a superfamília: uma família com versão serifada e sem serifa desenhadas juntas, que resolve o contraste sem risco.

Fugir das fontes mais usadas ajuda a parecer premium por um motivo simples: o visitante já as viu em milhares de sites. O Web Almanac 2024 mediu que Roboto aparece em 15,2% dos sites desktop, Open Sans em 5,6% e Poppins em 4,7%, e que o Google Fonts serve 57% dos sites desktop. Nada disso é defeito dessas fontes; é que um site premium não pode parecer o template que o concorrente usou.

Fontes: pares são escolha editorial do estúdio; dados de uso das famílias do Web Almanac 2024; condições de uso na FAQ da SIL Open Font License, consultados em outubro de 2026.

Para calibrar o olho, estude como os sites premiados usam uma só família com cinco pesos e muito espaço: o roteiro de engenharia reversa de um site do Awwwards mostra onde olhar, e os 20 sites para estudar em 2026 trazem exemplos de tipografia forte. Quando a referência é um site específico, extrair cores, fontes e espaçamentos explica como identificar a família e os tamanhos sem adivinhar.

Fonte não deixa um site premium. Sistema deixa: tamanho, razão, linha, entrelinha e peso decididos uma vez e respeitados em todas as páginas.

Como carregar as fontes sem pesar e sem fazer a página pular?

Use só woff2, declare o font-display, pré-carregue a fonte do título e carregue apenas os pesos que o sistema usa. O web.dev é direto: WOFF2 comprime 30% melhor que WOFF, e a recomendação citada no artigo é "use só WOFF2 e esqueça o resto". O Web Almanac 2024 mostra que o mercado já foi: 81% dos sites desktop servem WOFF2, e o arquivo de fonte mediano tem 39 KB (116 KB no percentil 90).

O font-display decide o que o visitante vê enquanto a fonte não chegou. Sem ele, o web.dev explica que Chromium e Firefox bloqueiam o texto por até 3 segundos; swap mostra o texto na fonte do sistema imediatamente e troca quando a fonte web chega, o que pode causar um salto visível; optional espera no máximo 100 ms e, se a fonte não veio, fica com a do sistema, com o menor risco de deslocamento. O Web Almanac mediu swap em 44 a 45% das páginas e block em 23 a 24%. A nossa regra: swap no texto corrido com size-adjust para aproximar a fonte substituta, optional em fontes decorativas. O deslocamento de layout que isso evita é um dos três Core Web Vitals, explicados em Core Web Vitals em 2026.

Fonte variável é a outra decisão de peso. O guia do MDN explica que texto corrido costuma exigir ao menos quatro arquivos estáticos (regular, itálico, negrito e negrito itálico), de cerca de 20 KB ou mais cada, e que uma fonte variável reúne todos os pesos num arquivo de tamanho parecido com o dos quatro, com cinco eixos registrados: peso, largura, inclinação, itálico e tamanho óptico. O web.dev acrescenta a ressalva: a variável costuma ser maior que um arquivo de estilo único, então ela compensa quando o projeto usa muitos pesos, e não compensa num site que usa só regular e negrito. O Web Almanac encontrou fontes variáveis em 33% dos sites desktop.

O que a licença da fonte permite em um site comercial?

Depende da licença, e o Google Fonts resolve a maioria dos casos. As famílias distribuídas por lá usam, em geral, a SIL Open Font License, e a FAQ da OFL é clara: uso comercial permitido, inclusive em logotipos e material impresso; carregar como webfont por @font-face é o método recomendado; o que não pode é vender a fonte sozinha, e uma versão modificada não pode usar o Reserved Font Name. Para um site de empresa, isso significa que você pode hospedar o arquivo no seu servidor, subconjuntar e converter para woff2 sem pedir nada a ninguém.

Fontes pagas funcionam de outro jeito. A licença de desktop, que permite usar a fonte no Figma e em peças impressas, em geral não cobre o uso como webfont, e a licença web costuma ser vendida à parte, com condições próprias de volume e de domínio. Antes de comprar, leia a licença da fundição e confira se ela cobre @font-face no domínio do cliente. O que o manual de marca precisa entregar para o site funcionar, inclusive a licença web da fonte da identidade, está em identidade visual e site: a ordem certa.

E quando a referência vem de um site de terceiros, lembre que a fonte tem dono mesmo que o estilo seja livre: identifique a família, encontre a licença e, se for paga, compre ou escolha uma alternativa aberta com desenho parecido. O Extrator de Sites, que é o nosso, gera o design system de um site de referência com a seção de tipografia (famílias, tamanhos, pesos), o que ajuda a estudar; ele não substitui a licença, e não serve para publicar o site de outra pessoa como seu.

Quais erros de tipografia entregam um site amador?

Texto corrido abaixo de 16 px, entrelinha apertada, três ou mais famílias, pesos vizinhos no mesmo bloco e cinza claro sobre branco. Cada um desses sinais é lido em frações de segundo, antes de qualquer argumento, e os estudos sobre primeira impressão reunidos em design vende? mostram por que esse julgamento pesa na credibilidade.

O contraste é o erro mais frequente e o mais fácil de medir. O critério 1.4.3 da WCAG 2.2, nível AA, exige 4,5:1 entre texto e fundo, e 3:1 para texto grande (18 pt, ou 14 pt em negrito, cerca de 24 px e 18,5 px). O cinza "elegante" de muitos templates fica em 3:1 no texto de 16 px, e o visitante com o celular no sol simplesmente não lê. O mesmo critério vale para o texto sobre imagem da primeira dobra, que quase nunca passa.

Os outros sinais, em ordem de frequência: título em caixa alta com espaçamento apertado; parágrafos longos centralizados; linha que vai de uma borda à outra no desktop; dois pesos vizinhos (400 e 500) usados como se fossem hierarquia; fonte de ícones carregada inteira para mostrar três ícones, o que o web.dev aponta como causa frequente de deslocamento de layout, e recomenda trocar por SVG. E o site que pula enquanto a fonte carrega, que é o mais visível de todos no celular: o que mais quebra na tela pequena está em site desconfigurado no celular.

Quando a apresentação ao cliente acontece, esses detalhes são o que ele chama de "deixa mais bonito" sem saber nomear. Resolver a tipografia antes da reunião elimina uma rodada inteira de ajuste, como mostra o protocolo de como apresentar um site ao cliente.

Perguntas frequentes

Qual é o tamanho mínimo de fonte para um site?

16 px no texto corrido, e 18 px quando a leitura é longa. Butterick coloca a faixa ideal na web entre 15 e 25 pixels. Abaixo de 16 px o visitante dá zoom no celular, e a WCAG trata como texto grande apenas o que tem 24 px, ou 18,5 px em negrito. Legenda pode ter 14 px, desde que o contraste seja de 4,5:1.

Quantas fontes um site deve usar?

Uma ou duas famílias, com os pesos fazendo a hierarquia. Um par de serifada e sem serifa cobre título e texto; uma superfamília faz o mesmo com menos risco; uma única família com quatro pesos é o caminho mais seguro para quem está começando. Três famílias ou mais só se justificam com um papel claro para cada uma, e é raro que exista.

Google Fonts é grátis para uso comercial?

Sim, na quase totalidade das famílias, distribuídas sob a SIL Open Font License. A FAQ da OFL permite uso comercial, uso como webfont e modificação, e proíbe vender a fonte sozinha ou usar o nome reservado numa versão alterada. Confira a licença na página de cada família antes de usar em projeto de cliente, porque há exceções.

Fonte variável deixa o site mais leve?

Depende de quantos pesos o projeto usa. Segundo o MDN, uma fonte variável tem tamanho parecido com o dos quatro arquivos estáticos que o texto corrido costuma exigir, e entrega todos os pesos intermediários de brinde. O web.dev lembra que ela costuma ser maior que um arquivo de estilo único: com dois pesos, os estáticos pesam menos.

Qual font-display usar?

Swap para texto e títulos, optional para fontes decorativas. Com swap, o visitante lê imediatamente na fonte do sistema e a troca acontece quando a fonte web chega; o size-adjust reduz o salto. Com optional, a fonte web só entra se chegar em até 100 ms, o que elimina o deslocamento. Sem declaração, Chromium e Firefox podem segurar o texto por até 3 segundos.

Conclusão

Tipografia premium é uma sequência de decisões pequenas e coerentes: o tamanho do corpo, a razão da escala, o comprimento da linha, a entrelinha, o par de fontes, o formato do arquivo e a licença. Nenhuma delas é difícil. O que é difícil é tomar todas e mantê-las em cada página, e é isso que separa o site que parece caro do site que parece template.

O visitante não sabe dizer por que um site passa confiança e outro não. Mas ele percebe a diferença em frações de segundo, e a tipografia é a maior parte do que ele está vendo nesse instante.

O Método Brave Cross, que é o nosso, dedica um módulo ao acabamento que vale caro, e a tipografia é o centro dele. Ele não é um curso de tipografia nem de programação; é o caminho para criar sites premium sem programar, com IA, e vender projetos de R$ 4 mil a R$ 20 mil. Para quem quer só a teoria tipográfica, as fontes citadas neste texto bastam. Para quem quer aplicar e cobrar por isso, o módulo existe para encurtar o caminho.

Aprenda a dar acabamento premium a um site no Método Brave Cross