Fontes para Carrossel, Tamanho do Texto e Contraste

Qual o tamanho da fonte no carrossel?

Crie pensando no celular, não no seu monitor. O celular mostra um slide de 1080 px com cerca de 360 pontos de largura, um terço da largura em pixels (celulares grandes mostram um pouco maior). Então cada tamanho que você define no slide fica umas três vezes menor na tela em que as pessoas leem.

As diretrizes de design da Apple colocam o menor texto no iPhone em 11 pontos e o tamanho padrão de leitura em 17 pontos. Multiplique por três e você tem os números para um slide de 1080 px: cerca de 33 px como mínimo para qualquer coisa que as pessoas devam ler, e cerca de 51 px para um corpo de texto confortável. O verificador de PDF do LinkedIn grátis do aiCarousels aponta texto abaixo de uns 24 px como difícil de ler no celular: trate isso como o piso para rótulos pequenos, como o número da página ou o seu @, não como tamanho para frases.

Tamanhos de texto num slide de 1080 px, e como ficam no celular

Tamanhos do slide divididos por três: um celular que mostra o slide com 360 pontos de largura. Pontos de tela são a unidade da Apple, cerca de um pixel CSS cada; a WCAG mede texto grande em pontos de impressão, e os 18 pt dela equivalem a uns 24 desses. A última coluna é desenhada nesse tamanho de tela. Tamanhos da Apple: Human Interface Guidelines, Typography, e UI Design Dos and Don’ts.

Trabalhando numa tela maior? Escale do mesmo jeito: com 2.160 px de largura, dobre cada número. Uma fonte fina ou condensada precisa de mais do que esses tamanhos, não de menos; as diretrizes da Apple dizem para ir maior quando uma fonte personalizada tem peso fino.

Os tamanhos de carrossel mais comuns têm todos 1080 px de largura (1080 × 1350 para LinkedIn e Instagram 4:5, 1080 × 1440 para Instagram 3:4, 1080 × 1920 para TikTok), então esses tamanhos servem em todas as redes. Os tamanhos exatos de cada app estão em tamanhos de carrossel em todas as redes.

Quais as melhores fontes para carrossel?

A melhor fonte para carrossel é aquela que as pessoas não percebem enquanto leem. Algumas regras que valem em todas as redes:

• Duas fontes bastam. Uma para os títulos, outra para todo o resto. Use tamanho e peso para o resto da hierarquia, não uma terceira fonte.
• Deixe a personalidade com a fonte do título. Uma serifada, uma grotesca pesada ou uma display condensada funciona para poucas palavras grandes.
• Mantenha a fonte do corpo simples. Letras abertas, uma altura-x generosa (a altura das letras minúsculas) e um peso regular firme. A maioria das sem serifa limpas serve.
• Evite pesos finos e light em tamanhos pequenos. As diretrizes da Apple avisam que os pesos Ultralight, Thin e Light são difíceis de ver, principalmente em texto pequeno.
• Guarde as cursivas e as maiúsculas para poucas palavras. Uma fonte manuscrita ou uma linha em maiúsculas é mais lenta de ler que minúsculas. Tudo bem num título curto, cansativo num parágrafo.
• Use as mesmas em todos os slides, e em todos os carrosséis. As pessoas aprendem o seu visual, e um kit de marca guarda as fontes e as cores para cada carrossel novo.

Combinações de fontes que aguentam o celular

Combinações do gerador de combinações de fontes grátis. Todas são Google Fonts, de uso comercial livre.

Quanto contraste o texto do carrossel precisa?

Contraste é a diferença de luminosidade entre o texto e o que está atrás dele, escrita como uma razão de 1:1 (nenhum) a 21:1 (preto no branco). O padrão de acessibilidade da web, a WCAG 2.2, pede pelo menos 4,5:1 para texto, e 3:1 para texto grande: 18 pontos, ou 14 pontos em negrito. A WCAG diz que o mesmo vale para imagens de texto, e todo slide de carrossel é uma. Só logos e texto incidental ficam de fora: palavras que são pura decoração ou que por acaso fazem parte de uma foto. O título e o corpo de um slide não são nem uma coisa nem outra.

A WCAG coloca 18 pontos de impressão em cerca de 24 px na tela, os 24 pontos de tela da tabela acima. Num slide que o celular mostra a um terço do tamanho, isso dá cerca de 72 px (ou cerca de 56 px em negrito). Então títulos desse tamanho podem usar 3:1. Todo o resto, incluindo o corpo do texto, precisa de 4,5:1.

Exemplos de contraste para cores de carrossel

Razões calculadas com a fórmula da WCAG para essas cores exatas. O laranja mostra a correção mais comum: mantenha a cor e mude o texto em cima dela.

• Texto sobre foto muda de contraste de letra para letra. Coloque as palavras num painel sólido, ou escureça a foto atrás delas, e confira o ponto mais claro atrás do texto.
• Cores da marca costumam falhar como cor de texto. Use-as em fundos, formas e numa palavra de destaque, e coloque o texto no seu neutro escuro ou claro.
• Deixe uma folga. 4,5:1 é o mínimo numa tela boa. As pessoas leem carrosséis no sol, com o brilho baixo. Uma razão maior não custa nada.

Quanto texto cabe num slide de carrossel?

Menos do que você imagina. Se as palavras não cabem nos tamanhos acima, o slide tem coisa demais.

• Uma ideia por slide. Um título que diz o ponto e uma ou duas linhas que o sustentam.
• Uma capa curta. 12 palavras ou menos é a meta que a verificação Pronto para publicar do aiCarousels conta no primeiro slide.
• Divida, não encolha. Quando um slide parece um parágrafo, faça dois slides. A maioria das redes dá espaço: o Instagram aceita até 20.
• Listas curtas. Poucos itens por slide, cada um numa linha.

No aiCarousels você define isso antes de qualquer coisa ser escrita: Mais opções › Palavras por slide tem Auto, Direto ao ponto (o mínimo de palavras), Equilibrado e Detalhado. Enquanto você edita, texto que não cabe num tamanho legível ganha uma etiqueta vermelha Longo demais para esta caixa em vez de encolher, e Encurtar para caber corta o texto na sua voz. Esse é o ajuste inteligente de texto. Ou troque o slide para um layout com mais espaço: as suas palavras vão junto.

Negrito Unicode atrapalha leitores de tela?

Depende de onde está o negrito.

• Num slide: o negrito é o peso bold da própria fonte, desenhado na imagem. Fica igual para todo mundo que enxerga. Sem problema.
• Numa legenda: o “negrito” que você cola de um formatador de texto não é negrito. É outro conjunto de caracteres, os Mathematical Alphanumeric Symbols (U+1D400 a U+1D7FF), feitos para matemática. O Unicode recomenda não usá-los no lugar de formatação de verdade. Leitores de tela podem pular esses caracteres ou ler algo como “mathematical sans-serif script t”, como explica a ONG de deficiência Scope.

Então deixe as letras estilizadas para poucas palavras, e nunca num nome, numa hashtag ou na frase que as pessoas precisam entender. Como fazer em cada app está em negrito no LinkedIn e no formatador de texto para Instagram.

Fontes e tamanhos de texto mudam no LinkedIn, no Instagram e no TikTok?

Os tamanhos acima valem em todo lugar, porque todos os slides têm 1080 px de largura. O que muda é o que fica por cima deles:

• TikTok e slides 9:16: os botões do app e a legenda cobrem as bordas do slide. Deixe as palavras longe deles. O aiCarousels desenha essas áreas quando você ativa Mostrar zonas seguras.
• Instagram: o contador de slides fica no canto superior direito e os pontinhos embaixo da imagem. Deixe uma margem nas bordas e escreva texto alternativo para cada slide.
• LinkedIn: o carrossel é um documento PDF. Tamanho da página, capa e o próprio PDF estão em dicas de design e especificações de carrossel no LinkedIn.

Um exemplo: um carrossel feito com essas regras

Seis slides em 4:5. Títulos grandes, uma linha de corpo em cada, escuro no claro, e uma combinação de fontes da capa ao último slide.

Como definir fontes, tamanho do texto e contraste no aiCarousels