# Fontes para títulos: tipografias que chamam a atenção [Canonical HTML page](https://gradiently.design/pt-br/guide/headline-fonts) Um título tem cerca de um segundo para ser lido. A fonte faz uma parte surpreendente desse trabalho. Aqui estão tipografias gratuitas que conquistam atenção, agrupadas pela função que cumprem melhor, com combinações para usar hoje. ## The short version - Boas fontes para títulos têm formas de letra claras, pesos fortes e personalidade suficiente para serem reconhecidas num relance. - Fontes condensadas como Anton e Bebas Neue cabem palavras longas em tamanhos grandes, o que combina com cartazes e thumbnails. - Serifadas de alto contraste como Playfair Display e DM Serif Display dão aos títulos um tom editorial e refinado. - Uma fonte de título costuma ser combinada com uma fonte de corpo mais discreta, como Inter ou DM Sans, para todo o resto. - Títulos em tamanho grande geralmente pedem espaçamento entre letras e entrelinha um pouco mais apertados que o padrão da fonte. 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](https://fonts.google.com). 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](https://gradiently.design/pt-br/guide/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 | Estilo | Google Fonts para testar | Sensação | Ideal para | | --- | --- | --- | --- | | Sem serifa condensada | Anton, Bebas Neue, Oswald, Barlow Condensed, Big Shoulders Display | Barulhenta, urgente, esportiva | Cartazes, thumbnails, posts de promoção | | Grotesca pesada | Archivo Black, Inter Tight, Work Sans em black | Direta, moderna, sem rodeios | Anúncios, lançamentos de produto | | Sem serifa geométrica | Montserrat, Poppins, Outfit, League Spartan | Simpática, limpa, arredondada | Startups, serviços, posts para redes sociais | | Sem serifa com personalidade | Bricolage Grotesque, Space Grotesk, Syne | Marcante, atual, um pouco excêntrica | Marcas que querem ter voz | | Serifada de alto contraste | Playfair Display, DM Serif Display, Instrument Serif | Editorial, refinada, cara | Moda, beleza, revistas, cardápios | | Serifada suave | Fraunces, Young Serif | Calorosa, artesanal, acessível | Gastronomia, cafés, lojas independentes | Uma lista inicial. Todas as fontes aqui são gratuitas no Google Fonts, sob uma licença aberta que permite uso comercial. 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. Um post retrato de promoção com LIQUIDA VERÃO em grandes maiúsculas condensadas sobre um gradiente vivo Palavras curtas e gritadas em maiúsculas: o registro para o qual uma fonte condensada como Anton ou Bebas Neue foi feita. Um post retrato editorial com um título em serifada refinada que diz A volta silenciosa do linho Um título editorial pede o oposto: uma serifada de alto contraste como Playfair Display desacelera o leitor e transmite cuidado. ## Como escolher uma fonte para títulos 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. **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. **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. **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. **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](https://gradiently.design/pt-br/guide/font-pairing) explica os princípios, e [combinações de Google Fonts](https://gradiently.design/pt-br/guide/google-fonts-pairings) traz muitas outras opções. | Título | Corpo | Por que funciona | | --- | --- | --- | | Anton | Inter | Impacto condensado sobre uma sem serifa neutra e muito legível | | Playfair Display | Source Sans 3 | O contraste editorial clássico entre serifada e sem serifa | | Bricolage Grotesque | DM Sans | Um título com personalidade sobre um corpo geométrico calmo | | DM Serif Display | DM Sans | Desenhadas como parceiras, então as proporções combinam | | Archivo Black | Archivo | Uma família em dois pesos, a combinação mais simples que existe | | Fraunces | Manrope | Uma serifada calorosa e suave sobre uma sem serifa limpa e moderna | Seis combinações feitas com Google Fonts gratuitas. Use a fonte de título em uma ou duas linhas; deixe a fonte de corpo cuidar de todo o resto. ## 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](https://gradiently.design/pt-br/guide/font-size-for-social-media) traz a escala completa. ### Evite - Um peso light no título principal no celular - Fontes cursivas ou decorativas em títulos longos - Entrelinha padrão num título de três linhas - Duas fontes display diferentes no mesmo design - Doze palavras em tamanho de título ### Faça - De semibold a black para redes sociais e thumbnails - Uma fonte display para impacto, uma sem serifa para os detalhes - Entrelinha perto de 1,05 em linhas empilhadas - Uma única fonte de título, usada com consistência - De cinco a oito palavras, cortando até doer ```html ``` Carregando uma combinação de título e corpo do Google Fonts. A pilha de fontes alternativas mantém a linha com largura parecida enquanto a fonte carrega. 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](https://gradiently.design/pt-br/guide/display-fonts) e [fontes em negrito](https://gradiently.design/pt-br/guide/bold-fonts); para thumbnails, [texto em thumbnails](https://gradiently.design/pt-br/guide/typography-for-thumbnails). ## FAQ ### Qual é a melhor fonte para títulos? Depende da função. Anton ou Bebas Neue combinam com títulos curtos e barulhentos; Playfair Display ou DM Serif Display com títulos editoriais; Montserrat ou Outfit com títulos simpáticos e limpos. ### As Google Fonts são gratuitas para uso comercial? As fontes do Google Fonts são publicadas sob licenças abertas, na maioria a SIL Open Font License, que permitem uso comercial. A página de cada fonte no Google Fonts mostra a licença, então confira antes de depender dela. [Licenciamento de fontes](https://gradiently.design/pt-br/guide/font-licensing) explica os detalhes. ### Títulos devem ser serifados ou sem serifa? Os dois funcionam. Sem serifa passa uma imagem direta e moderna; serifadas passam uma imagem editorial e refinada. Escolha pelo tom que você quer e combine com o oposto no texto do corpo. ### Qual deve ser o tamanho da fonte de um título? Num post de 1080 px, em torno de 90 a 140 px. Num site, mais ou menos 2,5 a 4 vezes o tamanho do corpo, dependendo da sua escala tipográfica. ### Posso usar duas fontes de título no mesmo design? Raramente é uma boa ideia. Uma fonte display mais uma fonte de corpo calma criam uma hierarquia mais clara e parecem mais intencionais.