PT-BR

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

Para uma combinação de fontes, 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.

Fonte: Microsoft Learn – Font List Windows 11 (atualizado em 21 de abril de 2022, acessado em 27 de setembro de 2026). Atualizado em: .

px
O título aparece 1,8 vez maior.
Minha caixa de ferramentasSeus 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 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
SistemaTítuloTexto
Windows 10/11GeorgiaVerdana
macOSGeorgiaVerdana
iPhone/iPadGeorgiaVerdana
AndroidNoto 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.

Como combinar fontes

  1. Escolha um par de fontes na lista, por exemplo Georgia + Verdana.
  2. Ajuste o tamanho do texto (12–28 px) e, se quiser, teste seu próprio texto na pré-visualização.
  3. Confira a justificativa, a altura-x e a disponibilidade por sistema operacional e copie o CSS.

Exemplo: Georgia + Verdana com texto de 18 px: o título aparece 1,8 vez maior, ou seja, 1,8 × 18 = 32,4 px. A altura-x é de 0,481 em (Georgia) e 0,545 em (Verdana): no mesmo tamanho, o texto parece cerca de 13% maior.

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

Mais ferramentas de web design: escolha cores com o gerador de paleta de cores, converta-as com o conversor de cores e crie fundos com o gerador de gradiente CSS.

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: · Princípios editoriais

Ferramentas relacionadas