# Post de frase que não parece com todos os outros

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

Posts de frase são fáceis de fazer e fáceis de ignorar. A diferença entre os dois está quase toda na tipografia e num fundo que ninguém mais está usando.

## The short version

- Um post de frase funciona quando a citação é curta, creditada corretamente e composta em tamanho grande numa fonte com alguma personalidade.
- Aspas tipográficas, com a aspa de abertura pendurada fora do texto, fazem uma citação parecer composta por um designer, e não digitada.
- O crédito fica numa linha própria, em letra menor; uma quebra de linha e uma mudança de tamanho o separam sem nenhuma pontuação extra.
- Fotos de banco de imagem com pôr do sol e montanhas são o motivo de a maioria dos posts de frase parecer igual, enquanto um gradiente ou uma textura discreta e sua os torna reconhecíveis.
- Frases postadas em série, num layout fixo, viram um formato reconhecível que as pessoas aprendem a procurar.

Um bom **post de frase** depende de quatro coisas: uma citação reduzida à sua linha mais forte, composta em tamanho grande numa fonte com personalidade, creditada de forma limpa numa linha própria e colocada sobre um fundo que pertence a você, e não sobre um pôr do sol de banco de imagem. Acerte isso e o post de frase passa a ser lido como uma peça de design pensada, e não como mais um quadradinho no feed.

## Como escolher e enxugar a frase

Os melhores posts de frase carregam uma ideia que é captada numa única leitura. Trechos longos viram letra pequena, e letra pequena é ignorada na rolagem. Mire numa citação de umas 8 a 20 palavras. Se a frase completa for maior, use a oração que carrega a ideia e coloque o resto na legenda.

### Demais

- Três frases de contexto antes da ideia
- Um parágrafo encolhido para caber no quadrado
- Uma frase não verificada atribuída a um nome famoso
- As suas próprias palavras com o nome de outra pessoa

### Na medida

- A única frase que transmite a ideia
- Poucas palavras, para que possam ser grandes
- Uma citação conferida na fonte
- As suas palavras, creditadas a você, ou sem crédito

> **Confira antes de postar** Citações estão entre as coisas mais atribuídas erradamente na internet. Se você não encontra a frase no livro, na palestra ou na entrevista original, não a publique com aquele nome. Vai citar um cliente ou um colega? Pergunte antes.

## Tipografia para posts de frase

Num post de frase, a letra *é* o design, então escolha uma fonte com alguma personalidade. Uma serifada com um bom itálico combina com frases reflexivas ou literárias; uma grotesca forte combina com frases curtas e de impacto; uma fonte display consegue carregar uma ou duas palavras. O guia [serifa ou sem serifa](https://gradiently.design/pt-br/guide/serif-vs-sans-serif) explica o que cada uma costuma transmitir, e o de [combinação de fontes](https://gradiently.design/pt-br/guide/font-pairing) mostra como acrescentar uma segunda fonte para o crédito.

- **Use tamanho grande.** Num post de 1080 pixels de largura, uma frase curta pode ter de 70 a 110 pixels.
- **Aperte a entrelinha.** Linhas grandes parecem soltas com a altura de linha normal; algo entre 1,1 e 1,2 as mantém juntas.
- **Quebre as linhas pelo sentido.** Termine cada linha numa pausa natural, não onde a caixa de texto por acaso quebra.
- **Use aspas tipográficas.** As curvas “ e ” em vez das retas ", que parecem digitadas.
- **Pendure a aspa de abertura.** Deixe a aspa de abertura um pouco 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 navegadores a `hanging-punctuation` é limitado, então confira no [caniuse](https://caniuse.com/css-hanging-punctuation) e mantenha o recuo negativo como alternativa. Numa ferramenta de design, basta empurrar a aspa um pouco para a esquerda.

Um post de frase em retrato com uma citação curta em serifa grande e um crédito pequeno

Retrato: a frase grande e centralizada, o crédito pequeno embaixo.

Uma versão quadrada do mesmo post de frase sobre o mesmo fundo

Quadrado: a mesma frase em menos linhas, para que possa continuar tão grande quanto.

## Como dar o crédito de uma frase com elegância

O crédito deve ser fácil de achar e discreto o bastante para não competir. Coloque o nome numa linha própria, claramente menor que a frase, num peso diferente ou em maiúsculas com um pouco mais de espaçamento entre letras (veja [espaçamento entre letras](https://gradiently.design/pt-br/guide/letter-spacing)). Não precisa de pontuação antes do nome: a quebra de linha e a mudança de tamanho já dizem quem falou.

| Parte | Tratamento | Exemplo |
| --- | --- | --- |
| Frase | Grande, normal ou itálico | “Faça o que você queria que existisse.” |
| Nome | Pequeno, peso médio ou maiúsculas | O nome completo de quem falou |
| Fonte | Ainda menor, mais leve | Caderno do estúdio, 2026 |

Três degraus de tamanho e peso, para que o olhar leia primeiro a frase, depois quem falou e, por fim, onde.

## Fundos para posts de frase

O motivo de a maioria dos posts de frase parecer igual é o fundo: uma montanha ao amanhecer, uma praia, um café desfocado. Essas imagens são compartilhadas por milhares de contas e não dizem nada sobre você. Um gradiente ou uma textura discreta nas suas cores faz o contrário. Dá espaço às palavras, é reconhecidamente seu e mantém o olhar de quem lê na frase.

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

Quatro fundos discretos para frases. Cada um tem uma área calma e uniforme no meio, onde ficam as palavras. Combine os dois claros com uma tinta quase preta e os dois escuros com um branco quente.

Deixe a parte mais calma e uniforme do fundo atrás das palavras e confira o contraste ali. O guia de [texto sobre um gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) explica como escolher a tinta pela luminosidade para que a frase continue legível em qualquer parte do campo.

## Como transformar frases numa série reconhecível

Um post de frase é um bom momento. Vinte no mesmo layout viram um formato que as pessoas reconhecem de longe no feed, e uma série de frases é uma das formas mais fáceis de dar ritmo a uma grade, como mostra o guia de [estética do feed do Instagram](https://gradiently.design/pt-br/guide/instagram-grid-aesthetic).

1. **Defina o layout** A mesma fonte, a mesma faixa de tamanhos, a mesma posição para a frase e o nome, sempre.
2. **Defina a família de fundos** Um material ou uma família de gradientes, variando um pouco de post para post.
3. **Dê um nome ou um número** Um rótulo pequeno como *Pensamento de quinta* ou *Nº 12* transforma posts soltos numa série.
4. **Tenha um banco de frases** Reúna frases conferidas numa lista com as fontes, para que cada novo post leve minutos.

No Gradiently, um modelo de frase pode usar qualquer Mark, e o Mark move sua região mais calma para trás das palavras, então a frase é lida sem caixa nem sombra. Reservar um Mark torna esse fundo só seu.

## FAQ

### Qual a melhor fonte para posts de frase?

Uma serifada com um bom itálico combina com frases reflexivas, e uma sem serifa forte combina com frases curtas e de impacto. Escolha uma com personalidade e use em tamanho grande.

### Qual deve ser o tamanho de uma frase num post?

Umas 8 a 20 palavras funcionam melhor. Frases mais longas obrigam a usar letra pequena; leve o resto para a legenda.

### Como dar o crédito de uma frase num post?

Coloque o nome numa linha própria, claramente menor que a frase, com a fonte ainda menor. Uma quebra de linha e uma mudança de tamanho bastam; não precisa de pontuação extra.

### Por que os meus posts de frase parecem genéricos?

Normalmente por causa do fundo. Fotos de paisagem de banco de imagem são usadas por milhares de contas; um gradiente ou uma textura discreta nas suas cores torna as frases reconhecíveis.