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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/display-fonts)

A tipografia grande pode sustentar um design inteiro sozinha. Também pode gritar, apertar e envelhecer mal. A diferença está sobretudo na escolha da fonte, no tamanho e no que lhe juntas.

## The short version

- As fontes de exibição, ou display, são tipos de letra desenhados para tamanhos grandes, em títulos, cartazes, logótipos e capas, e não para parágrafos.
- Costumam ter mais contraste, espaçamento mais apertado ou mais personalidade do que as fontes de texto, o que as torna marcantes em grande e difíceis de ler em pequeno.
- Usa uma fonte de exibição para poucas palavras de cada vez e combina-a com uma fonte de texto calma e legível para tudo o resto.
- A tipografia grande precisa de entrelinha mais apertada e, muitas vezes, de um espaçamento entre letras ligeiramente mais fechado do que o predefinido.
- Muitas famílias incluem um corte Display à parte ou um eixo de tamanho ótico que adapta o desenho automaticamente para tamanhos grandes.

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](https://gradiently.design/pt-pt/guide/typography-basics) e na [hierarquia visual](https://gradiently.design/pt-pt/guide/visual-hierarchy).

## 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.

| Característica | Fonte de texto | Fonte de exibição |
| --- | --- | --- |
| Contraste dos traços | Baixo a moderado | Muitas vezes alto, com finos como cabelos |
| Espaçamento | Aberto, para tamanhos pequenos | Apertado, para tamanhos grandes |
| Pormenores | Simples, robustos | Serifas finas, armadilhas de tinta, singularidades |
| Melhor tamanho | Aproximadamente 12 a 24 px no ecrã | Aproximadamente 40 px ou mais |
| Função | Ser lida | Ser notada e depois lida |

Intervalos aproximados: cada família é diferente, e a verificação final é sempre o design real no tamanho real.

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](https://gradiently.design/pt-pt/guide/variable-fonts) 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.

Uma capa vertical ao estilo de revista com um grande título em fonte de exibição sobre um gradiente profundo

Uma capa editorial: um título em fonte de exibição sustenta o design, com texto pequeno numa fonte discreta.

Uma publicação vertical de saldos com tipografia de exibição condensada e forte sobre um gradiente vivo

Uma publicação de saldos: a tipografia de exibição condensada põe palavras grandes num espaço estreito.

## 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.

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

Um título de exibição fluido com entrelinha apertada e um ligeiro espaçamento negativo, combinado com uma entrada de texto legível. O `max-width` em `ch` mantém o título em poucas linhas.

> **O teste da miniatura** Reduz o teu design ao tamanho com que vai aparecer num feed ou num resultado de pesquisa. Se a tipografia de exibição continuar a ser a primeira coisa que lês, o tamanho está certo. Se as palavras se tornarem textura, corta palavras antes de reduzir a fonte.

## 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](https://gradiently.design/pt-pt/guide/font-pairing) trata as regras por inteiro.

### Evita

- Duas fontes de exibição a competir no mesmo design
- Uma fonte de exibição em texto corrido ou legendas pequenas
- Uma combinação tão parecida que parece um erro
- Todas as palavras do design em tamanho de exibição

### Faz

- Uma fonte de exibição e uma fonte de texto calma
- Tipografia de exibição só em poucas palavras
- Um contraste claro na estrutura ou na largura
- Palavras grandes em cima, palavras pequenas a explicar

## 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.

Uma publicação vertical com um grande título sobre um gradiente que suaviza por trás do texto

Tipografia de exibição sobre um gradiente vivo: o fundo acalma e abre espaço por trás das palavras.

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](https://gradiently.design/pt-pt/guide/text-effects) mostram quando funcionam.

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

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. **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. **Esticar a tipografia para caber** Nunca escales a tipografia na horizontal ou na vertical. Escolhe antes um corte condensado ou largo.
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. **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`.

## FAQ

### O que é uma fonte de exibição?

Uma fonte de exibição é um tipo de letra desenhado para tamanhos grandes, como títulos, cartazes e logótipos. Os seus pormenores e o espaçamento apertado ficam melhores em grande e costumam ler-se mal em tamanhos de parágrafo.

### Posso usar uma fonte de exibição em texto corrido?

É melhor não. As fontes de exibição sacrificam a legibilidade em tamanho pequeno em favor do carácter, por isso os parágrafos compostos nelas cansam a ler. Combina-as antes com uma fonte de texto.

### Que tamanho deve ter uma fonte de exibição?

Grande o bastante para ser a primeira coisa que as pessoas veem, normalmente várias vezes o tamanho do texto corrido. Numa publicação de 1080 por 1350, um título curto costuma ocupar a maior parte da largura.

### Onde encontro fontes de exibição gratuitas?

O Google Fonts tem muitas famílias de exibição com licenças abertas, incluindo Playfair Display, Bebas Neue, Anton e Fraunces. Verifica sempre a licença de uma fonte antes de a usar numa marca.