Texto na thumbnail: quantas palavras, que tamanho e onde colocar

Por que menos palavras funcionam melhor

Quem rola um feed dá a cada thumbnail uma fração de segundo. Nesse tempo as pessoas captam um rosto, uma forma e uma ou duas palavras, não uma frase. Um texto que repete o título desperdiça o espaço; um texto que acrescenta um número, um resultado ou uma reviravolta dá ao espectador um segundo motivo para clicar.

Também há um problema de tamanho. Cada palavra a mais deixa todas as palavras menores, porque a largura do quadro é fixa. Passar de três para sete palavras reduz mais ou menos pela metade a altura de letra que você pode usar, e no tamanho da barra lateral essa é a diferença entre legível e invisível.

Quantas palavras cabem em um tamanho legível

Com letras de pelo menos 100 pixels de altura e espaçamento normal, uma tela de 1280 pixels de largura comporta cerca de 10–14 caracteres por linha depois de deixar as margens e o lado direito livre. Duas linhas de texto grande é o máximo prático antes de a própria imagem ficar sem espaço.

Crie um texto de thumbnail legível em seis passos

1. 01

   Decida o que o texto acrescenta

   Escreva o único fato ou reviravolta que a imagem não consegue mostrar. Se não houver, não use texto.

2. 02

   Corte para cinco palavras ou menos

   Tire artigos, enchimento e tudo o que já está no título.

3. 03

   Deixe grande e em negrito

   Faça a menor palavra importante ter pelo menos 100 px de altura em uma tela de 1280×720.

4. 04

   Adicione separação

   Use contorno, sombra ou uma caixa até o texto passar em uma verificação de contraste de 4,5:1.

5. 05

   Coloque no canto superior esquerdo

   Mantenha fora dos 22% da direita e dos 22% de baixo do quadro.

6. 06

   Confira em 168 pixels

   Abra o verificador de zona segura na largura de 168px e leia as palavras sem dar zoom.

Onde colocar o texto

Quem lê idiomas da esquerda para a direita tende a começar a varredura pelo canto superior esquerdo, e estudos de rastreamento ocular em páginas web mostram que as pessoas se concentram no começo das linhas e no lado esquerdo do conteúdo. Por isso o canto superior esquerdo e o topo central da thumbnail são lugares fortes para palavras. O canto inferior direito é o pior, porque o selo de duração o cobre em quase todas as superfícies.

Deixe uma margem de cerca de 50 pixels em volta das bordas em uma tela de 1280×720 e mantenha o texto fora dos 22% da direita e dos 22% de baixo do quadro. Não coloque texto sobre o rosto do tema; coloque ao lado do rosto, em uma área de fundo calma.

Números, símbolos e emojis na thumbnail

Números estão entre as palavras mais eficazes em uma thumbnail porque são curtos e específicos: “R$ 0”, “30 DIAS”, “1 x 100”. Dígitos em fontes em negrito são largos e claros, e sobrevivem bem à redução. Mantenha os símbolos de moeda e as unidades do mesmo tamanho dos dígitos, ou um pouco menores, mas nunca minúsculos.

Símbolos como setas, pontos de interrogação e sinais de confere podem substituir palavras, mas cada um acrescenta um elemento que disputa a atenção. Use no máximo um. Emojis são renderizados pelo editor como imagens, então diminuem como qualquer outro gráfico; um único emoji grande pode funcionar como reação, mas vários pequenos viram pontinhos coloridos em 168×94.

• Prefira números a números por extenso
• No máximo um símbolo ou seta
• Um emoji grande, nunca uma fileira de pequenos

Exemplo prático: de nove palavras para três

O primeiro rascunho de um reviewer de tecnologia diz “I USED THIS CHEAP LAPTOP FOR 30 DAYS” ao longo da base do quadro, em 64 pixels para caber. Em 168×94 as letras ficam com 8 pixels de altura e as duas últimas palavras ficam embaixo do selo de duração.

O segundo rascunho leva a afirmação para o título e mantém “30 DAYS LATER” no canto superior esquerdo, em 130 pixels e com contorno escuro. No tamanho da barra lateral as letras têm 17 pixels de altura, o canto fica livre e a verificação de texto da auditoria fica verde.

Erros comuns no texto da thumbnail