Fontes display: como criar design com tipografia grande

Fontes display são tipografias desenhadas para serem usadas grandes: títulos, pôsteres, capas, embalagens e pequenas rajadas de palavras. Seus detalhes, do contraste forte entre traços grossos e finos ao espaçamento justo e às formas expressivas, foram feitos para ficar melhores em tamanhos grandes e costumam se desfazer em tamanhos de parágrafo. Use uma fonte display para as poucas palavras que devem fazer alguém parar e uma fonte de texto mais discreta para tudo que a pessoa lê depois.

Este guia mostra o que faz de uma fonte uma fonte display, que tamanho dar, como combiná-la e como evitar que a tipografia grande pareça apertada ou datada. Ele se apoia nos fundamentos de tipografia e na hierarquia visual.

O que diferencia uma fonte display de uma fonte de texto

As fontes de texto são feitas para dar conforto ao longo de milhares de palavras: formas abertas, traços firmes, espaçamento generoso e altura-x grande para que as letras sobrevivam a tamanhos pequenos e telas ruins. As fontes display trocam parte disso por personalidade. A 80 px ninguém tem dificuldade para enxergar as letras, então quem desenha pode forçar o contraste, estreitar larguras, afiar detalhes e apertar o espaçamento.

Algumas famílias vêm nas duas versões: um corte Text e um corte Display do mesmo desenho, ou um único arquivo variável com eixo de tamanho óptico que se ajusta sozinho conforme o tamanho muda. As fontes variáveis explicam o tamanho óptico com mais detalhe.

Tipos de fontes display e o clima que cada uma cria

É mais fácil escolher fontes display pela sensação que você quer. Cada família abaixo traz exemplos amplamente disponíveis no Google Fonts, para você testar com as suas próprias palavras.

• Serifadas de alto contraste: moda, cultura, editorial. Exemplos: Playfair Display, DM Serif Display, Bodoni Moda.
• Sem serifa condensadas: urgência, esporte, notícias, pôsteres. Exemplos: Bebas Neue, Anton, Oswald.
• Sem serifa largas e estendidas: tecnologia, marcas modernas, calma confiante. Exemplos: Syne, Unbounded.
• Suaves e arredondadas: simpatia, comida, crianças, bem-estar. Exemplos: Fraunces com o eixo soft, Fredoka.
• Grotescas pesadas: declarações fortes, lançamentos, ativismo. Exemplos: Archivo Black, Inter Tight no peso black.
• Script e desenhadas à mão: convites, artesanato, marcas pessoais, usadas com moderação. Exemplos: Caveat, Yellowtail.

Que tamanho dar à tipografia display

Grande o bastante para ser claramente a primeira coisa que as pessoas veem e pequena o bastante para as palavras caberem em poucas linhas. Um bom hábito é dimensionar a tipografia display em relação ao canvas, não em pontos. Num post de 1080 por 1350, um título de duas a quatro palavras costuma ocupar de 70 a 90 por cento da largura. Num site, o título de um herói costuma ficar em algo como três a seis vezes o tamanho do texto.

Na web, o clamp() escala a tipografia display com suavidade entre um mínimo e um máximo, então ela fica grande em telas grandes sem transbordar em celulares. Aperte a entrelinha e o espaçamento entre letras conforme o tamanho cresce; os padrões são desenhados para textos menores.

.hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 14ch;
}

.hero-lede {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
}

Combinando uma fonte display com uma fonte de texto

A combinação mais simples e confiável dá uma função a cada fonte. A fonte display fala alto por poucas palavras; a de texto faz o trabalho discreto de legendas, texto corrido, datas e preços. Contraste as duas de pelo menos um jeito claro, como serifada contra sem serifa ou condensada contra largura normal, para não parecerem quase iguais. A combinação de fontes traz as regras completas.

Tipografia display sobre gradientes e fundos cheios

A tipografia grande é o texto mais tolerante que você pode pôr sobre um fundo colorido, porque os traços grossos mantêm a forma diante do movimento do fundo. O risco está nas partes finas: serifas como fios de cabelo e detalhes delicados somem nas áreas mais claras ou mais agitadas de um gradiente. Em fundos ricos, escolha uma fonte display com finos mais firmes ou suba o peso.

No Gradiently, um Mark sabe onde estão as suas palavras: a região mais calma dele se move para atrás do título e as cores perto das letras escurecem ou clareiam, então até uma tipografia display fina se sustenta. Tratamentos de letras como Contorno, Interno e Extrusão dão caráter a palavras display quando a fonte em si é simples; os efeitos de texto mostram quando isso funciona.

Erros que deixam a tipografia display barata

1. 1

   Espaçamento padrão em tamanhos enormes

   Tipografia grande com os padrões de texto parece frouxa. Aperte a entrelinha para cerca de 1 a 1,1 e o espaçamento entre letras um pouco.

2. 2

   Negrito e itálico falsos

   Quando uma fonte não tem um estilo, ferramentas e navegadores podem falsificá-lo borrando ou inclinando as letras. Carregue os pesos e itálicos verdadeiros.

3. 3

   Esticar a tipografia para caber

   Nunca escale a tipografia na horizontal nem na vertical. Escolha um corte condensado ou largo.

4. 4

   Fontes da moda sem motivo

   Uma fonte escolhida por estar em todo lugar nesta estação envelhece com a estação. Escolha pelo clima de que você precisa.

5. 5

   Palavras sozinhas em títulos de duas linhas

   Uma única palavra curta sozinha na segunda linha enfraquece o título. Reescreva, quebre em outro ponto ou use text-wrap: balance.