Combinação de fontes para título e texto

Escolha um par de fontes e veja na hora como título e texto funcionam juntos – até com o seu próprio texto. Todos os pares usam apenas fontes pré-instaladas do sistema: nada para baixar e nenhuma requisição ao Google ou a outros servidores. Cada par traz a justificativa, a altura-x medida e a disponibilidade por sistema operacional.

Par de fontes

Tamanho do texto

O título aparece 1,8 vez maior.

Seus dados ficam salvos só neste navegador.

Prévia

A arte de um bom título

Boa tipografia não chama atenção. Ela conduz o olhar com calma pelo texto, cria uma hierarquia clara e deixa o conteúdo falar – no celular e também no monitor grande.

Seu título (opcional)Seu texto (opcional)

Seu texto fica nesta janela do navegador: não é salvo, não é enviado e não aparece no endereço da página.

CSS para copiar

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

Todos os pares de fontes

Resultado

Par de fontes: Georgia + Verdana
Por que funciona: Contraste clássico entre uma fonte serifada e uma sem serifa: Georgia nos títulos, Verdana no texto. Matthew Carter desenhou as duas para tela, por isso proporções e ritmo combinam. A Verdana tem altura-x muito grande e é larga – use o texto cerca de 1 px menor.
Altura-x (medida): Georgia: 0,481 em · Verdana: 0,545 em – no mesmo tamanho, o texto parece cerca de 13% maior
Disponibilidade por sistema operacional: Sistema Título Texto
Windows 10/11 Georgia Verdana
macOS Georgia Verdana
iPhone/iPad Georgia Verdana
Android Noto Serif (substituta) Roboto (substituta)

Sistema	Título	Texto
Windows 10/11	Georgia	Verdana
macOS	Georgia	Verdana
iPhone/iPad	Georgia	Verdana
Android	Noto Serif (substituta)	Roboto (substituta)

Como o cálculo é feito

Como combinar fontes

Duas fontes combinam quando são claramente diferentes, mas de construção parecida. O caminho mais seguro é o contraste entre uma serifada e uma sem serifa: uma para os títulos, outra para o texto. Duas serifadas ou duas sem serifa parecidas costumam parecer um descuido.

Tão importante quanto isso é a altura-x – a altura das letras minúsculas em relação ao tamanho da fonte. Uma fonte com altura-x grande (Verdana: 0,545 em) parece bem maior no mesmo tamanho que uma com altura-x pequena (Calibri: 0,464 em). Se as alturas-x de um par forem muito diferentes, compense no tamanho. Os valores vêm da tabela OS/2 dos arquivos de fonte do Windows 11.

Por que só fontes do sistema?

As fontes do sistema já estão instaladas no aparelho: a página carrega mais rápido, o texto não pula no carregamento e nenhuma requisição vai para servidores de terceiros. Carregar fontes web direto de uma CDN envia o IP de cada visitante ao provedor – um ponto sensível pela LGPD. Se quiser fontes próprias, hospede-as no seu servidor.

Pilha de fontes: por que vários nomes?

Nenhuma fonte existe em todos os sistemas. Por isso o CSS lista várias fontes em sequência (uma pilha de fontes): o navegador usa a primeira instalada, e uma família genérica como serif ou sans-serif cobre o resto. A tabela mostra qual fonte aparece de fato no Windows, macOS, iPhone/iPad e Android, segundo as listas de fontes da Microsoft e da Apple e a configuração de fontes do Android (consultadas em 27/09/2026). O Android não tem Georgia nem Verdana e mostra Noto Serif ou Roboto; no Linux, as fontes variam conforme a distribuição.

Dicas para um texto legível

Na tela, use pelo menos 16 px no texto, de preferência 17–20 px, com entrelinha de 1,5 a 1,7.
Deixe os títulos bem maiores (1,6 a 2 vezes) e mais pesados que o texto – aí até uma única família basta.
Limite as linhas a cerca de 60–80 caracteres.
Confira o contraste de cor: cinza sobre branco fica fraco rápido – para isso existe o verificador de contraste.

Perguntas frequentes

Quais fontes combinam bem?

Pares de uma serifada com uma sem serifa quase sempre funcionam: Georgia com Verdana, Palatino com a fonte do sistema ou Cambria com Calibri. O que importa é um contraste claro e alturas-x parecidas.

Quantas fontes um site deve usar?

No máximo duas: uma para títulos e outra para o texto. Uma terceira, como uma monoespaçada para código, só se tiver função própria.

Georgia e Verdana existem em todos os aparelhos?

No Windows, macOS e iOS, sim. O Android não traz essas fontes e mostra Noto Serif ou Roboto – por isso toda pilha de fontes deve terminar em uma família genérica como serif ou sans-serif.

O que é altura-x?

A altura de um x minúsculo em relação ao tamanho da fonte. Uma altura-x grande melhora a leitura no mesmo tamanho, mas pede um pouco mais de entrelinha.

Por que não carregar fontes de uma CDN?

Cada visita envia o IP do visitante ao provedor de fontes e acrescenta um download antes de o texto aparecer. As fontes do sistema evitam as duas coisas; fontes próprias podem ser hospedadas no seu servidor.

Meu texto de prévia fica salvo?

Não. Seus títulos e textos ficam só nesta janela. Apenas o par escolhido e o tamanho da fonte são lembrados.

Fontes e base legal

Última atualização: 27 de setembro de 2026