Fontes de exibição: como desenhar com tipografia grande

As fontes de exibição são tipos de letra desenhados para se usarem em grande: títulos, cartazes, capas, embalagens e rajadas curtas de palavras. Os seus pormenores, do forte contraste entre traços grossos e finos ao espaçamento apertado e às formas expressivas, foram feitos para ficar melhores em tamanhos grandes e costumam desfazer-se em tamanhos de parágrafo. Usa uma fonte de exibição para as poucas palavras que devem fazer alguém parar, e uma fonte de texto mais discreta para tudo o que se lê a seguir.

Este guia trata do que faz de uma fonte uma fonte de exibição, do tamanho a dar-lhe, de como a combinar e de como evitar que a tipografia grande pareça apertada ou datada. Assenta nas bases da tipografia e na hierarquia visual.

O que distingue uma fonte de exibição de uma fonte de texto

As fontes de texto são feitas para o conforto ao longo de milhares de palavras: formas abertas, traços robustos, espaçamento generoso e uma grande altura-x para que as letras sobrevivam a tamanhos pequenos e a ecrãs fracos. As fontes de exibição trocam parte disso por carácter. A 80 px ninguém tem dificuldade em ver as letras, por isso o designer pode forçar o contraste, apertar as larguras, afiar os pormenores e fechar 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 ficheiro variável com um eixo de tamanho ótico que se ajusta sozinho conforme o tamanho muda. As fontes variáveis explicam o tamanho ótico com mais pormenor.

Tipos de fontes de exibição e o ambiente que cada uma cria

As fontes de exibição escolhem-se melhor pela sensação que queres. Cada família abaixo inclui exemplos amplamente disponíveis no Google Fonts, para os experimentares nas tuas próprias palavras.

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

Que tamanho deve ter a tipografia de exibição

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 de exibição em relação à tela e não em pontos. Numa publicação de 1080 por 1350, um título de duas a quatro palavras costuma ocupar cerca de 70 a 90 por cento da largura. Num site, o título de um cabeçalho costuma ficar entre três e seis vezes o tamanho do texto.

Na web, o clamp() escala a tipografia de exibição de forma suave entre um mínimo e um máximo, para ser grande em ecrãs grandes sem transbordar em telemóveis. Aperta a entrelinha e o espaçamento entre letras à medida que o tamanho cresce; os valores predefinidos foram desenhados para texto mais pequeno.

.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;
}

Combinar uma fonte de exibição com uma fonte de texto

A combinação mais simples e fiável dá a cada fonte uma função. A fonte de exibição fala alto em poucas palavras; a de texto faz o trabalho discreto de legendas, texto corrido, datas e preços. Contrasta as duas em pelo menos um aspeto claro, como serifa contra sem serifa ou condensada contra largura normal, para não parecerem quase iguais por engano. A combinação de fontes trata as regras por inteiro.

Tipografia de exibição em gradientes e fundos carregados

A tipografia grande é o texto mais tolerante que podes pôr num fundo colorido, porque os traços grossos mantêm a forma contra o movimento do fundo. O risco está nas partes finas: as serifas como cabelos e os pormenores finos desaparecem nas zonas mais claras ou mais carregadas de um gradiente. Em fundos ricos, escolhe uma fonte de exibição com finos mais robustos, ou sobe o peso.

Na Gradiently, um Mark sabe onde estão as tuas palavras: a sua zona mais calma move-se para trás do título e as cores junto às letras aprofundam-se ou clareiam, por isso até a tipografia de exibição fina aguenta. Tratamentos de letras como Contorno, Interior e Extrusão dão carácter às palavras de exibição quando a própria fonte é simples; os efeitos de texto mostram quando funcionam.

Erros que fazem a tipografia de exibição parecer barata

1. 1

   Espaçamento predefinido em tamanhos enormes

   A tipografia grande com os valores de texto parece solta. Aperta a entrelinha para cerca de 1 a 1,1 e o espaçamento entre letras ligeiramente.

2. 2

   Negrito e itálico falsos

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

3. 3

   Esticar a tipografia para caber

   Nunca escales a tipografia na horizontal ou na vertical. Escolhe antes um corte condensado ou largo.

4. 4

   Fontes da moda sem motivo

   Uma fonte escolhida porque está em todo o lado esta estação envelhece com a estação. Escolhe pelo ambiente de que precisas.

5. 5

   Palavras órfãs em títulos de duas linhas

   Uma única palavra curta sozinha na segunda linha enfraquece o título. Reescreve, refaz a quebra ou usa text-wrap: balance.