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

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.

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 explica o que cada uma costuma transmitir, e a combinação de tipos de letra 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.

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

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

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.

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

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