Tamanho mínimo de letra para gráficos de redes sociais

Num gráfico social com 1080 px de largura, o nosso mínimo é 40 px para qualquer texto que o leitor tenha de perceber e 32 px para qualquer coisa, o que dá cerca de 14,4 e 11,6 píxeis CSS quando a publicação preenche um ecrã de telemóvel de 390 pontos. Nenhuma rede social publica um tamanho mínimo de letra para imagens, por isso estes são os nossos números, construídos a partir do mínimo de 11 pt da Apple para iOS e da aritmética de reduzir uma imagem de 1080 px até um telemóvel.

O nosso guia central de tipografia apresenta a escala tipográfica completa. Este artigo foca-se no piso: a matemática, como muda com o tamanho da tela e o que acontece quando um texto mais longo empurra a letra de um modelo para baixo.

Existe um tamanho mínimo de letra oficial para as redes sociais?

Não. As plataformas publicam dimensões de imagem e limites de ficheiro, e não encontrámos nenhum tamanho mínimo de texto para imagens nas páginas de ajuda do LinkedIn, Instagram, X ou Threads que consultámos a 5 de outubro de 2026. Os números oficiais mais próximos vêm das diretrizes de interface e das normas de acessibilidade:

• As diretrizes de tipografia da Apple indicam 17 pt como tamanho predefinido e 11 pt como tamanho mínimo de texto em iOS e iPadOS. A mesma página aconselha a evitar os pesos Ultralight, Thin e Light, difíceis de ver em tamanhos pequenos.
• As WCAG não definem tamanho mínimo nenhum. O seu critério de contraste pede 4.5:1 abaixo de 18 pt (ou 14 pt a negrito) e 3:1 acima, e diz que esses tamanhos correspondem aproximadamente a 24 px e 18.5 px em CSS. Também abrange imagens de texto, que é o que um gráfico social é.

Os 11 pt da Apple foram escritos para texto de interface ao vivo que as pessoas podem ampliar. O texto gravado num PNG não pode ser ampliado pelo leitor, e é por isso que tratamos os 11 pt como piso absoluto, não como meta.

Como se convertem píxeis da tela em tamanhos num telemóvel?

Três passos, usando um telemóvel como referência. Um iPhone 16 tem um ecrã com 1179 px de largura e desenha 3 píxeis físicos por ponto, logo tem 1179 / 3 = 393 pontos de largura. Arredondamos para 390 pontos como largura de referência. A nossa hipótese de trabalho é que um píxel CSS num navegador de telemóvel equivale a um ponto, pelo que as duas unidades são aqui intercambiáveis.

1. Fator de escala. Uma publicação de 1080 px que preenche um ecrã de 390 pontos é escalada por 390 / 1080 = 0.361.
2. Píxeis por ponto. Ao contrário, 1 ponto = 1080 / 390 = 2.77 px de tela.
3. O piso da Apple na sua tela. 11 pt x 2.77 = 30.5 px de tela.

Esses 30.5 px só se aplicam quando a imagem vai de margem a margem. Muitos feeds mostram a imagem mais estreita do que o ecrã, ao lado de uma coluna de avatar ou dentro de margens. Como hipótese de trabalho para esses feeds, considere uma imagem com cerca de 300 pontos de largura: o fator desce para 300 / 1080 = 0.278, 1 ponto passa a 3.6 px de tela e os 11 pt da Apple passam a 11 x 3.6 = 39.6 px. Arredonde para cima e obtém a nossa regra de 40 px para texto essencial.

Tamanho numa tela de 1080 px	Largura total, 390 pt (x 0.361)	Feed com margens, 300 pt (x 0.278)	O nosso veredicto
110 px	39.7	30.6	Título
72 px	26.0	20.0	Título mais pequeno que recomendamos
48 px	17.3	13.3	Texto de apoio confortável
40 px	14.4	11.1	Mínimo para texto que as pessoas têm de ler
32 px	11.6	8.9	Só etiquetas, nomes de utilizador, números de página
24 px	8.7	6.7	Demasiado pequeno para qualquer coisa importante
20 px	7.2	5.6	Decoração

As colunas do meio estão em px CSS, que tratamos como pontos. Todos os valores da tabela são aritmética nossa.

Como muda o mínimo com o tamanho da tela?

A mesma regra dá um número de píxeis diferente em cada tela, porque uma tela mais larga é reduzida com mais força. Divida a largura da tela pela largura apresentada para obter os px de tela por ponto, e depois multiplique por 11.

Tela	Apresentada a	Px de tela por ponto	11 pt em px de tela	O nosso mínimo para texto essencial
Publicação de 1080 px (1:1, 4:5, 9:16)	390 pt largura total	2.77	30.5	40 px (feeds com margens)
Publicação de 1080 px	300 pt com margens	3.60	39.6	40 px
Horizontal ou anúncio de 1200 px	300 pt com margens	4.00	44.0	44 px
Cabeçalho do X de 1500 px	390 pt largura total	3.85	42.3	48 px
Anúncio vertical de 720 px	300 pt com margens	2.40	26.4	26 px

É por isso que um tamanho de letra copiado de um formato para outro corre mal. Uma etiqueta de 32 px que fica bem num anúncio de 720 px é demasiado pequena num cabeçalho de 1500 px. Para o cabeçalho em si, veja o guia visual de cabeçalho e publicações do X; para anúncios, o guia de design de anúncio de imagem única do LinkedIn.

O que acontece ao tamanho da letra quando o texto fica mais longo?

Um modelo com caixas de texto fixas tem de fazer alguma coisa quando as palavras não cabem. O nosso renderizador encolhe a letra passo a passo até um piso definido pelo designer, e só depois corta o texto. Eis um modelo de citação da nossa marca de demonstração AURORA com três comprimentos de texto. A citação começa a 72 px, tem um piso de 44 px e permite seis linhas; os tamanhos abaixo foram lidos da saída do renderizador.

42 caracteres: a citação fica a 72 px, cerca de 26 pontos à largura total do telemóvel.

159 caracteres: a letra desce para 60 px, cerca de 21,7 pontos.

190 caracteres: 50 px, cerca de 18 pontos à largura total ou 13,9 num feed com margens. Mesmo no piso de 44 px, a citação ficaria acima da nossa regra de 40 px, que é precisamente a razão de colocar o piso aí. Um piso a 26 px deixaria o mesmo modelo descer discretamente abaixo de tudo o que um telemóvel consegue mostrar bem.

Uma nota honesta sobre a nossa própria demonstração: a linha de atribuição neste modelo está fixa a 20 px, cerca de 7 pontos num telemóvel. Isso serve para um crédito decorativo, mas se o nome for importante, também deve estar na legenda.

Como ficam estes tamanhos à largura do telemóvel?

Abaixo está a citação longa mostrada com 390 px CSS de largura, a largura que recebe quando preenche o ecrã de um iPhone típico. Num monitor de secretária, um píxel CSS é fisicamente maior do que num telemóvel, por isso abra esta página no seu telemóvel para a avaliar no tamanho real.

E aqui está uma publicação vertical cuja linha de apoio está fixa a 24 px, primeiro em tamanho real e depois a 390 px CSS.

A 390 px, a linha de 24 px tem 8,7 pontos e o antetítulo de 13 px na pastilha fica abaixo de 5. O título sobrevive, os detalhes não. Essa é a falha habitual: ninguém faz o título demasiado pequeno, fazem a segunda linha demasiado pequena.

Como se incorporam mínimos num modelo?

A nossa lista de verificação, para quem constrói os modelos:

• Defina um piso em cada caixa de texto: 72 px para títulos, 40 px para tudo o que é essencial, 32 px para etiquetas, numa tela de 1080 px.
• Escale esses pisos pela largura da tela usando a tabela acima, nunca a olho.
• Limite o número de caracteres para que o texto mais longo permitido fique no piso ou acima dele.
• Teste o texto mais longo, não o texto de exemplo, e observe-o com 390 px de largura.
• Mantenha os pesos leves fora de tudo o que esteja abaixo de 48 px.
• Verifique o contraste em cada linha pequena; o nosso guia de contraste de cor tem os rácios das WCAG.
• Mantenha o texto pequeno dentro das zonas seguras, além de acima do piso; veja as zonas seguras de Stories e Reels.
• Repita tudo o que é essencial na legenda e no texto alternativo, já que ninguém consegue ampliar uma imagem do feed.

No Chikaboom, o designer define o tamanho inicial e o piso de cada caixa de texto uma única vez, e os colegas que preenchem o modelo não conseguem empurrar o texto abaixo dele. Pode experimentar o comportamento de redução na demonstração ao vivo. Para o lado da composição do mesmo problema, leia os nossos princípios de composição para gráficos sociais.