# Design de publicações com citações que não parecem todas iguais

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

As publicações com citações são fáceis de fazer e fáceis de ignorar. A diferença entre as duas coisas está sobretudo na tipografia, e num fundo que mais ninguém usa.

## The short version

- Uma publicação com citação funciona quando a citação é curta, está bem atribuída e aparece em tamanho grande num tipo de letra com algum carácter.
- As aspas tipográficas, com a de abertura pendurada fora do texto, fazem uma citação parecer composta por um designer e não escrita à pressa.
- A atribuição fica numa linha própria, em letra mais pequena; uma quebra de linha e uma mudança de tamanho separam-na sem pontuação extra.
- As fotografias de banco de imagens com pores do sol e montanhas são a razão pela qual a maioria das citações parece igual, enquanto um gradiente ou uma textura sóbria e tua as torna reconhecíveis.
- As citações publicadas em série, num esquema fixo, tornam-se um formato reconhecível que as pessoas aprendem a procurar.

Um bom **design de publicações com citações** resume-se a quatro coisas: uma citação aparada até à sua frase mais forte, composta em tamanho grande num tipo de letra com carácter, atribuída de forma limpa numa linha própria e colocada sobre um fundo que te pertence em vez de um pôr do sol de banco de imagens. Acerta nisso e a publicação lê-se como uma peça de design pensada e não como mais um quadrado no feed.

## Escolher e aparar a citação

As melhores publicações com citações levam uma ideia que se percebe numa só leitura. As passagens longas transformam-se em letra pequena, e a letra pequena é ignorada no scroll. Aponta para uma citação de cerca de 8 a 20 palavras. Se a citação completa for mais longa, usa a frase que carrega a ideia e põe o resto na legenda.

### Demasiado

- Três frases de contexto antes do essencial
- Um parágrafo encolhido para caber no quadrado
- Uma frase não verificada atribuída a um nome famoso
- As tuas palavras embrulhadas no nome de outra pessoa

### Na medida certa

- A única frase que diz o essencial
- Poucas palavras, para as compores em tamanho grande
- Uma citação que verificaste na fonte
- As tuas palavras, atribuídas a ti, ou sem atribuição

> **Verifica antes de publicar** As citações estão entre as coisas mais mal atribuídas da internet. Se não encontras uma frase no livro, na palestra ou na entrevista original, não a publiques com esse nome. Vais citar um cliente ou um colega? Pergunta-lhe primeiro.

## Tipografia para publicações com citações

Numa publicação com citação, a letra *é* o design, por isso escolhe um tipo de letra com alguma personalidade. Uma serifa com um bom itálico serve citações reflexivas ou literárias; uma grotesca forte serve frases curtas e incisivas; um tipo de letra de destaque aguenta uma ou duas palavras. O guia [serifa vs sem serifa](https://gradiently.design/pt-pt/guide/serif-vs-sans-serif) explica o que cada uma costuma transmitir, e a [combinação de tipos de letra](https://gradiently.design/pt-pt/guide/font-pairing) mostra como juntar um segundo tipo para a atribuição.

- **Compõe em tamanho grande.** Numa publicação com 1080 píxeis de largura, uma citação curta pode ir de 70 a 110 píxeis.
- **Aperta a entrelinha.** As linhas grandes parecem soltas com a altura de linha normal; cerca de 1,1 a 1,2 mantém-nas juntas.
- **Quebra as linhas pelo sentido.** Termina cada linha numa pausa natural, não onde calhar a quebra da caixa de texto.
- **Usa aspas tipográficas.** As aspas curvas “ e ” em vez das retas ", que parecem escritas à máquina.
- **Pendura a aspa de abertura.** Deixa a aspa de abertura ficar mesmo fora da margem esquerda, para que as letras fiquem alinhadas.

```css
.quote {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.15;
  text-wrap: balance;
  hanging-punctuation: first;
}

/* Where hanging-punctuation isn't supported, pull the first line back by the width of the mark. */
@supports not (hanging-punctuation: first) {
  .quote { text-indent: -0.42em; }
}
```

Pontuação pendurada na web. O suporte dos browsers para `hanging-punctuation` é limitado, por isso consulta o [caniuse](https://caniuse.com/css-hanging-punctuation) e mantém o recuo negativo como alternativa. Numa ferramenta de design, basta empurrar a aspa para a esquerda.

Uma publicação vertical com uma citação curta em letra serifada grande e uma atribuição pequena

Vertical: a citação grande e centrada, a atribuição pequena por baixo.

Uma versão quadrada da mesma publicação com citação sobre o mesmo fundo

Quadrada: a mesma citação com menos linhas, para poder manter o mesmo tamanho.

## Como atribuir uma citação de forma limpa

A atribuição deve ser fácil de encontrar e discreta o suficiente para não competir. Põe o nome numa linha própria, um degrau claro abaixo do tamanho da citação, num peso diferente ou em maiúsculas com um pouco mais de espaçamento entre letras (vê o [espaçamento entre letras](https://gradiently.design/pt-pt/guide/letter-spacing)). Não precisas de pontuação antes do nome: a quebra de linha e a mudança de tamanho já dizem às pessoas quem o disse.

| Parte | Tratamento | Exemplo |
| --- | --- | --- |
| Citação | Grande, redonda ou itálica | “Cria o que gostavas que existisse.” |
| Nome | Pequeno, peso médio ou maiúsculas | O nome completo de quem o disse |
| Fonte | Ainda mais pequena, mais leve | Caderno do estúdio, 2026 |

Três degraus de tamanho e peso, para o olhar ler primeiro a citação, depois quem a disse e depois onde.

## Fundos para publicações com citações

A razão pela qual a maioria das citações parece igual é o fundo: uma montanha ao amanhecer, uma praia, um café desfocado. Essas imagens são partilhadas por milhares de contas e não dizem nada sobre ti. Um gradiente ou uma textura sóbria nas tuas cores faz o contrário. Dá espaço às palavras, é reconhecidamente teu e mantém o olhar de quem lê na citação.

- Papel e tinta: `linear-gradient(170deg, #f7f1e8 0%, #efe3d0 60%, #e2cfb3 100%)`
- Leitura noturna: `linear-gradient(170deg, #0d1321 0%, #1d2d44 60%, #3e5c76 100%)`
- Madrugada suave: `linear-gradient(170deg, #fde2e4 0%, #f6d5e8 50%, #d7d3f5 100%)`
- Castanho à luz de vela: `radial-gradient(ellipse at 50% 40%, #3a2a1e 0%, #1f1610 70%, #120d09 100%)`

Quatro fundos sóbrios para citações. Cada um mantém uma zona calma e uniforme ao meio, onde ficam as palavras. Combina os dois claros com tinta quase preta e os dois escuros com um branco-sujo quente.

Mantém a parte mais calma e uniforme do fundo por trás das palavras e verifica aí o contraste. O [texto sobre um gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) explica como escolher a tinta pela luminosidade, para a citação se manter legível em qualquer parte do campo.

## Transformar citações numa série reconhecível

Uma publicação com citação é um bom momento. Vinte com o mesmo esquema tornam-se um formato que as pessoas reconhecem de longe no feed, e uma série de citações é uma das formas mais fáceis de dar ritmo a uma grelha, como se descreve na [estética da grelha do Instagram](https://gradiently.design/pt-pt/guide/instagram-grid-aesthetic).

1. **Fixa o esquema** O mesmo tipo de letra, a mesma gama de tamanhos, a mesma posição para a citação e para o nome, sempre.
2. **Fixa a família de fundos** Uma matéria ou família de gradientes, com pequenas variações de publicação para publicação.
3. **Dá-lhe um nome ou um número** Uma pequena etiqueta como *Pensamento de quinta* ou *N.º 12* transforma publicações soltas numa série.
4. **Mantém um arquivo** Junta citações verificadas numa lista com as fontes, para que cada nova publicação demore minutos.

Na Gradiently, um modelo de citação pode vestir qualquer Mark, e o Mark desloca a sua zona mais calma para trás das palavras, para a citação se ler sem caixa nem sombra. Reservar um Mark torna esse fundo só teu.

## FAQ

### Qual é o melhor tipo de letra para publicações com citações?

Uma serifa com um bom itálico serve citações reflexivas, e uma sem serifa forte serve frases curtas e incisivas. Escolhe uma com carácter e compõe-na em tamanho grande.

### Que comprimento deve ter uma citação numa publicação para redes sociais?

Cerca de 8 a 20 palavras funciona melhor. As citações mais longas obrigam a letra pequena; passa o resto para a legenda.

### Como atribuo uma citação numa publicação?

Põe o nome numa linha própria, claramente mais pequeno do que a citação, e a fonte ainda mais pequena. Uma quebra de linha e uma mudança de tamanho bastam; não é precisa pontuação extra.

### Porque é que as minhas publicações com citações parecem genéricas?

Normalmente é o fundo. As fotografias de paisagens de banco de imagens são usadas por milhares de contas; um gradiente ou uma textura sóbria nas tuas cores torna as citações reconhecíveis.