Fontes para títulos: tipografias que chamam a atenção

As melhores fontes para títulos são as que você lê num único relance em tamanhos grandes e que carregam um tom claro: sem serifa condensadas como Anton ou Bebas Neue para impacto, grotescas pesadas como Archivo Black para peso e serifadas de alto contraste como Playfair Display ou DM Serif Display para elegância. Todas são gratuitas no Google Fonts. A escolha certa depende menos de gosto do que da função: quantas palavras, quanto espaço e qual sensação o título precisa passar.

O que faz uma boa fonte para títulos

• Formas claras num relance. Miolos abertos e letras bem distintas, para que as palavras sejam lidas antes de o olho se acomodar.
• Peso de sobra. Uma família com bold, extra bold ou black, porque títulos no celular precisam de traços pesados.
• Bom espaçamento e kerning de fábrica. Letras grandes ampliam cada vão; fontes bem feitas precisam de menos ajustes. Veja kerning.
• Um tom que combine com a mensagem. Barulhento, calmo, luxuoso ou técnico. A fonte diz isso antes das palavras.
• A largura certa para o seu espaço. Fontes condensadas cabem palavras longas em formatos estreitos; fontes largas combinam com palavras curtas e espaço em volta.

As melhores fontes gratuitas para títulos, por estilo

Algumas observações que vale saber antes de escolher. A Bebas Neue só tem maiúsculas, então combina com frases curtas e gritadas, não com sentenças. A Oswald é uma releitura do estilo clássico Alternate Gothic e vem em vários pesos, o que a torna mais flexível que a Anton. A Fraunces é uma fonte variável com eixos de suavidade e um modo “wonky” brincalhão, então uma única família vai do nítido ao fofinho. A Syne fica visivelmente mais larga nos pesos mais pesados, o que dá presença real a um título em negrito.

Como escolher uma fonte para títulos

1. 1

   Escreva primeiro o título real

   Teste com as suas palavras de verdade, não com o texto de exemplo da fonte. Uma fonte linda em “Hamburgefonts” pode ficar estranha no nome da sua marca.

2. 2

   Meça o espaço

   Um título longo num formato estreito, como um story ou um pin, precisa de uma fonte condensada. Linhas curtas em formatos largos podem se dar ao luxo de uma fonte mais larga.

3. 3

   Combine o tom com a mensagem

   Anote três palavras sobre a sensação que o título deve passar. Só entram na lista as fontes que atendem às três.

4. 4

   Teste no menor tamanho real

   Reduza o design ao tamanho do celular ou de uma miniatura na grade. Traços finos e miolos apertados são os primeiros a falhar.

5. 5

   Combine com uma fonte de corpo discreta

   Escolha uma fonte calma e legível para o texto de apoio, para que o título continue sendo o elemento mais forte da página.

Como combinar fontes de título com o texto do corpo

Uma fonte de título é uma especialista. Ela brilha a 90 px e cansa a vista a 16 px. Combine-a com uma fonte de batalha que funcione bem em parágrafos e não chame atenção. As combinações mais seguras contrastam de um jeito claro, geralmente serifada contra sem serifa, ou condensada contra largura normal. Combinação de fontes explica os princípios, e combinações de Google Fonts traz muitas outras opções.

Como ajustar o título: tamanho, espaçamento e entrelinha

Até a fonte certa fica fraca nas configurações padrão. Letras grandes pedem espaçamento entre letras e entrelinha mais apertados que o texto do corpo, e pedem menos palavras. Na prática, isso significa espaçamento entre letras de menos 0,01 a menos 0,03 em e entrelinha entre 1,0 e 1,1. Num post de 1080 px, um título costuma ficar entre 90 e 140 px; tamanho de fonte para posts do Instagram traz a escala completa.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  h1 {
    font-family: "Anton", "Arial Narrow", sans-serif;
    font-size: clamp(2.75rem, 7vw, 6rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
  }
  body {
    font-family: "Inter", system-ui, sans-serif;
  }
</style>

O fundo também importa. Um título pesado sobre um gradiente agitado ainda pode se desfazer onde a cor muda atrás dele. Os Marks do Gradiently movem a região mais calma para trás das suas palavras e escolhem tinta clara ou escura linha por linha, e os tratamentos de Lettering, como Contorno, Interno e Extrusão, dão presença extra ao título sem caixas nem sombras. Para letras grandes em cartazes, veja fontes display e fontes em negrito; para thumbnails, texto em thumbnails.