Tipografia para publicações em redes sociais: o guia prático

Use uma sans serif limpa, um título entre 72 e 110 px numa tela de 1080 px, texto de apoio de 40 a 48 px e nada abaixo de cerca de 32 px. Estes números são uma recomendação nossa, construída a partir do mínimo de 11 pt da Apple para texto no iOS e da forma como uma imagem de 1080 px é reduzida para o ecrã de um telemóvel.

Na nossa opinião, a maioria das publicações sociais é lida a deslizar o polegar, à distância do braço, em um ou dois segundos. A tipografia tem aí uma única função: ser reconhecida instantaneamente. Este guia é o centro do nosso grupo de tipografia. Dá-lhe uma escala tipográfica que pode copiar, as contas que a sustentam e um teste do que acontece a um título em tamanho real de telemóvel.

Que tamanho tem 1080 px num telemóvel?

Um iPhone 16 tem um ecrã de 2556 por 1179 píxeis. Uma publicação com 1080 px de largura que ocupe a largura do ecrã é, portanto, mostrada com aproximadamente o mesmo número de píxeis que a largura do ecrã, pelo que pode pensar num píxel da tela como cerca de um píxel do dispositivo. As diretrizes da Apple, no entanto, estão escritas em pontos, não em píxeis. Dividir a largura de 1179 px por 3 (o nosso pressuposto de trabalho para o ecrã 3x) dá um ecrã com cerca de 393 pt de largura. Resumindo: 1 pt = 3 px do dispositivo, pelo que 1 px da tela equivale a cerca de 1 px do dispositivo e 2,75 px da tela equivalem a cerca de 1 pt.

A conversão que usamos: 1080 / 393 = cerca de 2,75 px da tela por ponto. Isto funciona quando a publicação ocupa o ecrã de ponta a ponta. Os feeds acrescentam margens e algumas superfícies mostram a imagem mais pequena, por isso trate 2,75 como o melhor caso e junte uma margem de segurança.

Valor do iOS da Apple	Pontos	px da tela com 1080 de largura (x 2,75)
Tamanho mínimo de texto	11	cerca de 30
Caption 1	12	cerca de 33
Footnote	13	cerca de 36
Default body	17	cerca de 47
Title 2	22	cerca de 61
Large Title	34	cerca de 94

Todos os valores em pontos vêm dos estilos de texto do iOS da Apple; a coluna de píxeis é aritmética nossa. As próprias dicas de design da Apple também referem 11 pt como o menor texto legível.

Que tamanhos de letra funcionam numa publicação de 1080 px?

Esta é a escala que recomendamos para telas de 1080 px de largura. É uma recomendação nossa, não uma regra de plataforma. Nenhuma rede social publica um tamanho de letra mínimo para imagens.

Função	Tamanho a 1080 px	Aproximadamente no telemóvel	Peso	Altura de linha
Título	72 a 110 px (mínimo 72)	26 a 40 pt	700 a 800	1,0 a 1,15
Subtítulo	48 a 60 px	17 a 22 pt	600	1,2
Texto de apoio	40 a 48 px	15 a 17,5 pt	400 a 500	1,3 a 1,5
Sobretítulo ou etiqueta (maiúsculas)	32 a 36 px	12 a 13 pt	600, espaçamento largo	1,2
Letra miúda (nunca essencial)	32 px no mínimo	12 pt	500	1,3

Três regras sustentam a tabela. Tudo o que o leitor tem de perceber fica a 40 px ou mais. Tudo o que está abaixo de 32 px é decoração, texto legal ou um identificador. Mantenha o título pelo menos 1,5 vezes maior do que o texto de apoio: 72 px sobre 48 px é o par mais apertado da nossa tabela e, com 110 px sobre 40 px, a diferença chega a cerca de 2,75 vezes, pelo que a hierarquia sobrevive a um relance. Para o layout em torno destes tamanhos, consulte o nosso pilar de princípios de layout. As contas por trás dos mínimos de 40 e 32 px, e como mudam em telas de 1200 e 1500 px, estão no nosso guia sobre o tamanho mínimo de letra em gráficos para redes sociais.

Que tipos de letra são mais fáceis de ler em tamanhos pequenos?

Escolha primeiro pela legibilidade. O Nielsen Norman Group separa legibilidade de leitura fluida: a legibilidade é se as pessoas conseguem reconhecer fisicamente os carateres e depende do tamanho, do contraste e da clareza do tipo de letra. Uma publicação social testa a legibilidade mais do que quase qualquer outro meio.

As nossas recomendações:

• Uma sans serif de trabalho com x-height generosa (a altura das letras minúsculas) e formas de letra abertas. Inter, Roboto e as famílias sans do sistema servem todas.
• Três pesos no máximo: regular para o corpo, semibold para etiquetas, bold para títulos.
• Evite pesos leves. As diretrizes da Apple dizem que Ultralight, Thin e Light são difíceis de ler em tamanhos pequenos.
• Reserve uma serifa ou um tipo de exibição para citações e títulos editoriais e teste-o com 390 px de largura antes de se comprometer.
• Mantenha o espaçamento entre letras apertado em texto grande e aberto em versaletes. Títulos de 90 px ou mais normalmente pedem um espaçamento ligeiramente negativo, e um sobretítulo de 32 px pede um pouco de positivo.

Escolher tipos de letra é também uma decisão de marca, por isso registe o par de uma vez por todas. O nosso guia de diretrizes de marca para equipas pequenas explica como.

O que acontece quando o título é demasiado longo?

É aqui que uma tela fixa morde. Eis um modelo, criado a partir da nossa marca de demonstração AURORA, com um título definido a 92 px numa caixa de 888 por 440 px. Primeiro, um título de duas palavras.

Agora o mesmo modelo com um título de 99 carateres.

O motor reduziu o tipo um pouco (a nossa medição: de 92 px para cerca de 80 px) para caber em vez de deixar transbordar. No Chikaboom, o designer define um tamanho ideal e um mínimo (este título começa a 92 px com um mínimo de 56 px e admite 5 linhas); se o texto ainda assim não couber no mínimo, termina em reticências. Ninguém na equipa consegue empurrar o texto para fora da caixa ou abaixo do mínimo. Esse é o argumento prático a favor dos modelos bloqueados: as decisões tipográficas são tomadas uma só vez por quem as compreende.

O título longo continua legível em tamanho de telemóvel?

Abaixo está o mesmo modelo e texto criados nativamente a 393 por 393 px, perto da largura do ecrã de um telemóvel. É um render novo, não uma cópia reduzida da imagem de 1080, por isso as quebras de linha são diferentes.

A nossa observação: o título continua legível. Tenha presente que o mínimo de 56 px deste modelo de demonstração está abaixo da nossa própria recomendação de 72 px para títulos: equivale a cerca de 20 pt numa vista de telemóvel em largura total (56 / 2,75), aceitável para um título longo, mas um contraexemplo para um título curto. Nos seus modelos, defina o mínimo de títulos em 72 px ou mais. As etiquetas pequenas são os elementos mais fracos: neste modelo ficam perto do mínimo de 32 px que recomendamos e, a 393 px, mal se leem, pelo que deve tratá-las como decoração. Faça esta verificação em todos os modelos que publicar: crie-o a 393 px e leia-o à distância do braço. Pode experimentar por si na demonstração ao vivo.

Como se aplicam as regras WCAG ao texto em imagens?

Na nossa opinião, o contraste importa mais do que qualquer regra de tamanho. As WCAG foram escritas para conteúdo web e o seu critério de contraste abrange imagens de texto; aplicar as suas razões a imagens sociais é uma recomendação nossa, não um requisito de plataforma. Exige 4,5:1 para texto normal e 3:1 para texto grande, em que grande significa 18 pt ou maior, ou 14 pt a negrito ou maior (cerca de 24 px e 19 px em termos de CSS). Note que as WCAG não definem um tamanho de letra mínimo, apenas limiares de contraste que dependem do tamanho, e avisam que as imagens de texto não escalam tão bem como o texto real. Para ver melhor os pares de cores, leia o nosso guia de contraste de cor.

O espaçamento é um caso diferente. O critério 1.4.12 indica uma altura de linha de 1,5 vezes o tamanho da letra, um espaçamento de parágrafo de 2 vezes, um espaçamento entre letras de 0,12 em e um espaçamento entre palavras de 0,16 em, mas pede que o conteúdo sobreviva quando os utilizadores aplicam esses valores, não que os designs os usem. Não se pode aplicar a um PNG achatado, por isso use os números apenas como referência. As nossas recomendações de altura de linha na tabela são mais apertadas para títulos de propósito.

Como os utilizadores não podem redimensionar o texto numa imagem, ponha a mensagem real também na legenda e no texto alternativo.

Uma lista de verificação de tipografia antes de publicar

• Título de 72 px ou maior, tudo o que é essencial a 40 px ou mais, nada abaixo de 32 px.
• Uma sans serif, três pesos no máximo, sem pesos finos ou leves.
• Título pelo menos 1,5x o texto de apoio (72 px sobre 48 px no caso mais apertado).
• Contraste de 4,5:1 para texto pequeno, 3:1 para texto de 24 px (18 pt) ou mais em termos WCAG. Lembre-se de que a tela de 1080 px é reduzida, por isso verifique o tamanho real.
• Título testado no comprimento máximo permitido e a 393 px de largura.
• Tamanho mínimo definido em cada campo de texto, para que o texto mais longo encolha e termine em reticências em vez de transbordar.
• Espaçamento entre letras apertado para tamanhos de exibição e aberto para versaletes.
• Texto dentro das zonas seguras da plataforma. Consulte a referência completa de tamanhos e o guia de zonas seguras de Stories e Reels.