# Sistema tipográfico: dar uma função a cada tipo de letra

[Canonical HTML page](https://gradiently.design/pt-pt/guide/brand-typography-system)

Escolher fontes é a parte fácil. Decidir exatamente como se comportam, em que tamanho, em que peso, para que tarefa, é o que faz uma marca parecer consistente em todo o lado.

## The short version

- Um sistema tipográfico é um pequeno conjunto de funções com nome, como display, título, texto e etiqueta, cada uma com fonte, peso, tamanho, entrelinha e capitalização fixos.
- Os tamanhos de um sistema tipográfico vêm de uma só escala, um tamanho base multiplicado por uma razão constante, para que cada passo se relacione com os outros.
- A maioria das marcas precisa só de um ou dois tipos de letra; o sistema cria variedade através de funções, pesos e tamanhos.
- Os design tokens guardam cada função como um valor com nome, para que sites, aplicações e ficheiros de design usem as mesmas decisões de tipografia.
- Publicações sociais, diapositivos e sites precisam de tamanhos diferentes para as mesmas funções, por isso um bom sistema lista cada função por canal.

Um **sistema tipográfico** é o conjunto de regras que decide como a letra se comporta numa marca: algumas funções com nome (display, título, texto, etiqueta), cada uma com uma fonte, peso, tamanho, entrelinha e capitalização, todas dimensionadas a partir de uma só escala e guardadas como tokens para que todos os designers e programadores usem os mesmos valores. As fontes dão voz a uma marca. O sistema torna essa voz consistente, para que um título num cartaz, num site e num story pareçam vir do mesmo sítio. Eis como construir um.

## As funções de um sistema tipográfico

Começa pelas tarefas, não pelas fontes. Cada texto que uma marca publica faz uma de um punhado de tarefas, e cada tarefa passa a ser uma função. A maioria das marcas precisa de cinco a sete.

| Função | Tarefa | Definição típica |
| --- | --- | --- |
| Display | As maiores palavras: frases de campanha, capas, títulos de destaque | Fonte de títulos, negrito, entrelinha apertada, poucas palavras |
| Título | Títulos de secção e de publicações | Fonte de títulos, seminegrito ou negrito, minúsculas de frase |
| Subtítulo | Abre uma secção, introduções | Fonte de texto, peso médio, um passo acima do texto |
| Texto | Texto de leitura | Fonte de texto, regular 400, entrelinha de cerca de 1,5 |
| Etiqueta e sobretítulo | Texto pequeno acima dos títulos, etiquetas, botões | Fonte de texto, seminegrito, muitas vezes em maiúsculas com espaçamento acrescentado |
| Legenda | Créditos, notas de rodapé, letra miúda | Fonte de texto, regular, o passo mais pequeno |
| Numérico | Preços, estatísticas, tabelas | Algarismos tabulares para os dígitos alinharem |

Sete funções cobrem quase todas as marcas. Se não souberes dizer que tarefa um estilo faz, não é uma função; é uma exceção.

Uma publicação vertical ao estilo de newsletter com um pequeno sobretítulo, um título grande e uma curta linha de apoio

Três funções numa publicação: uma etiqueta de sobretítulo, um título e uma linha de texto. Cada uma é logo distinta, para o olhar saber por onde começar.

## Quantas fontes precisa um sistema tipográfico de marca

Normalmente uma ou duas. Uma família em três pesos pode sustentar um sistema inteiro. Duas fontes, uma para títulos e outra para texto, acrescentam carácter. Uma terceira só se justifica para uma tarefa específica, como código ou dados. A variedade vem das funções, tamanhos e pesos, não de mais tipos de letra. [Combinações de Google Fonts](https://gradiently.design/pt-pt/guide/google-fonts-pairings) e [fontes de marca](https://gradiently.design/pt-pt/guide/brand-fonts) ajudam-te a escolher.

### Evita

- Uma fonte nova para cada campanha
- Tamanhos escolhidos a olho em cada design
- Nove pesos carregados, três usados
- Regras de capitalização diferentes em equipas diferentes
- Um guia de estilo que lista fontes mas não funções

### Faz

- Uma ou duas famílias para tudo
- Todos os tamanhos de uma só escala
- Só os pesos de que as funções precisam
- Uma regra escrita de capitalização para títulos e botões
- Funções com fonte, peso, tamanho, entrelinha e capitalização

## Constrói uma escala tipográfica

Uma escala tipográfica escolhe um tamanho base e multiplica-o pela mesma razão a cada passo acima. Os passos relacionam-se entre si, por isso quaisquer dois tamanhos do sistema parecem intencionais juntos. Uma razão de 1,25 serve interfaces e páginas densas; 1,333 ou 1,5 dá mais drama a trabalho editorial e de marketing. [Escala tipográfica](https://gradiently.design/pt-pt/guide/typographic-scale) explica as razões com mais profundidade.

| Passo | Tamanho a 1,25 a partir de 16 px | Função |
| --- | --- | --- |
| Passo 0 | 16 px | Texto |
| Passo 1 | 20 px | Subtítulo, texto grande |
| Passo 2 | 25 px | Título pequeno |
| Passo 3 | 31 px | Título |
| Passo 4 | 39 px | Título grande |
| Passo 5 | 49 px | Display em telemóvel |
| Passo 6 | 61 px | Display em computador |
| Passo menos 1 | 13 px | Legenda, etiqueta |

Uma escala web a partir de uma base de 16 px com uma razão de 1,25, arredondada a pixéis inteiros. Cada função fica com um passo e mantém-no.

## Guarda o sistema como tokens

Um sistema que só vive num PDF desvia-se. Os tokens são valores com nome que o código e os ficheiros de design leem, por isso mudar um valor atualiza tudo. Dá nomes aos tokens pela função, nunca pelo tamanho: `--type-heading` sobrevive a um redesenho, `--type-31` não. [Design tokens](https://gradiently.design/pt-pt/guide/design-tokens) trata da ideia mais ampla.

```css
:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
  --type-heading: 600 1.9375rem / 1.15 var(--font-heading);
  --type-subheading: 500 1.25rem / 1.4 var(--font-body);
  --type-body: 400 1rem / 1.5 var(--font-body);
  --type-label: 600 0.8125rem / 1.2 var(--font-body);
}

h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }
```

Cada função é um token de atalho de fonte, para que o peso, o tamanho, a entrelinha e a família viajem sempre juntos. Os valores correspondem à escala acima em rem.

## Uma função, tamanhos diferentes por canal

Um título num site e um título numa publicação de Instagram fazem a mesma tarefa em tamanhos muito diferentes, porque um lê-se à distância de um braço num ecrã grande e o outro encolhe num feed de telemóvel. Mantém as funções idênticas e dá a cada canal os seus tamanhos.

| Função | Site | Publicação social 1080×1350 | Diapositivos 1920×1080 |
| --- | --- | --- | --- |
| Display | 49 a 61 px | 140 a 200 px | 120 a 160 px |
| Título | 31 px | 90 a 120 px | 88 a 112 px |
| Texto | 16 px | 40 a 48 px | 48 a 64 px |
| Etiqueta e sobretítulo | 13 px | 28 a 32 px | 36 a 44 px |

As mesmas funções, as mesmas fontes, os mesmos pesos, tamanhos diferentes. [Tamanho de letra para publicações de Instagram](https://gradiently.design/pt-pt/guide/font-size-for-social-media) e [fontes para apresentações](https://gradiently.design/pt-pt/guide/typography-for-presentations) explicam os números das redes sociais e dos diapositivos.

## Como construir o teu sistema tipográfico

1. **Reúne o que já publicas** Tira capturas de ecrã do teu site, publicações, emails e diapositivos. Rodeia cada estilo de texto distinto. A maioria das marcas encontra muito mais do que pensava ter.
2. **Agrupa os estilos em funções** Junta os quase duplicados. Procura cinco a sete funções que cubram tudo o que rodeaste.
3. **Escolhe as fontes para as funções** Normalmente uma fonte de títulos e uma de texto. Verifica se a licença cobre web, aplicações e qualquer uso em logótipos.
4. **Define a escala e os detalhes** Escolhe uma base e uma razão e fixa depois o peso, a entrelinha, a capitalização e o espaçamento de cada função. Decide uma vez a capitalização dos títulos; [maiúsculas de frase vs de título](https://gradiently.design/pt-pt/guide/title-case-vs-sentence-case) ajuda.
5. **Publica-o como tokens e uma folha de uma página** Tokens para código e ficheiros de design, uma única folha visual no teu [guia de estilo da marca](https://gradiently.design/pt-pt/guide/brand-style-guide) para todos os outros.

Para publicações e apresentações do dia a dia, um kit de marca da Gradiently (no Pro) guarda as fontes de títulos e de texto do teu sistema, incluindo ficheiros de fontes carregados, junto com logótipos, cores e voz. Os novos designs começam com essas duas fontes, e o Designer aplica o kit ao compor um design, para que a divisão entre títulos e texto se mantenha sem ninguém ter de se lembrar dela.

## FAQ

### O que é um sistema tipográfico?

Um conjunto de funções tipográficas com nome, como display, título, texto e etiqueta, cada uma com fonte, peso, tamanho, entrelinha e capitalização fixos, normalmente guardadas como design tokens.

### Quantas fontes deve usar uma marca?

Uma ou duas para a maioria das marcas: uma para títulos e outra para texto. Só vale a pena acrescentar uma terceira para uma tarefa específica, como código ou dados.

### O que é uma escala tipográfica?

Uma sequência de tamanhos de letra obtida multiplicando um tamanho base por uma razão constante, como 1,25, para que cada tamanho do sistema se relacione com os outros.

### Como devem ser nomeados os tokens de tipografia?

Pela função, como type-heading ou type-body, e não pelo tamanho. Os nomes de função continuam com sentido quando os tamanhos mudam.

### As publicações de redes sociais devem usar os mesmos tamanhos de letra que um site?

Não. Mantém as mesmas funções e fontes, mas usa tamanhos muito maiores nas publicações, porque são vistas pequenas num feed de telemóvel.