Tipografia e cor na landing page: o que segura a leitura

O resumo direto

Tipografia e cor na landing page decidem se a pessoa lê a oferta ou só vê um cartaz. Duas famílias de fonte, poucos tamanhos e uma cor de ação bastam para a maior parte das páginas de campanha. O resto é contraste, largura de linha e a fonte aparecer antes de a pessoa desistir. A WCAG marca o mínimo: texto comum em 4,5:1, texto grande em 3:1, botão identificável em 3:1, e a página inteira ainda funciona se o texto for ampliado ou espaçado. A largura de 80 caracteres é um teto de leitura do nível AAA, não uma multa automática. Eu uso esse teto porque linha infinita cansa, e deixo o navegador poder alterar cor e espaço. Abaixo está a escala que eu monto, o que a cor faz, e como a fonte da web não pode atrasar a primeira frase.

1. Duas fontes e uma escala curta

Uma landing não precisa da família inteira da marca. Eu escolho uma fonte para título e a mesma, ou uma segunda, para o texto. Título em uma família de personalidade e corpo em uma neutra. Três famílias na mesma dobra competem, e cada arquivo a mais é download a mais.

A escala que cabe numa página de oferta é curta. Um tamanho de título, um de subtítulo, um de corpo, um de nota (prazo, rodapé, obs). Peso regular no corpo. Negrito só no que a pessoa precisa achar de novo: preço, nome do plano, a palavra do botão. Negrito em tudo é negrito em nada.

Itálico fica para um termo estrangeiro ou um nome de produto, não para um parágrafo inteiro. Caixa alta fica na etiqueta curta ("novo", "turma"), não no título longo. Caixa alta em frase grande atrasa a leitura e, se for texto pequeno, ainda piora o contraste percebido.

A ordem da página segue a mesma escala. O título diz o que é a oferta. O subtítulo diz para quem é. O corpo prova em poucos parágrafos. O botão repete o verbo da oferta ("pedir a proposta", "ver a turma"), não um "saiba mais" genérico. Se o título precisa de três linhas no celular, ele está longo. Eu corto a frase, não diminuo a letra até ela virar corpo.

A identidade da marca, logo e paleta, vem antes desta página. O artigo sobre identidade visual antes do site explica essa ordem. Aqui o assunto é o que a landing faz com a tipografia e a cor que já existem. Se a página vende um produto de loja, a página de produto é o passo seguinte, com foto e variação. A landing não substitui isso.

Se o projeto é o site ou a loja inteira, o e-commerce e o site é o lugar em que essa página entra no conjunto, não solta.

2. Contraste: o número e a exceção da logo

Texto comum, e imagem que é texto, precisa de contraste de pelo menos 4,5:1 com o fundo. Texto grande pode ficar em 3:1. A definição de texto grande, na página de entendimento da WCAG, é 18 pontos, ou 14 pontos em negrito. Título de hero costuma passar dessa faixa. Nota de rodapé quase nunca passa. Eu não uso o limite frouxo do texto grande para esconder cinza no miúdo.

Tem exceção. Texto que faz parte da logo ou do nome da marca não entra na exigência. Decoração pura também não. Isso não autoriza escrever o preço dentro da logo para fugir do contraste. O preço é texto da oferta. Ele entra no 4,5:1.

Componente de interface, como a borda do campo e o botão, tem outro número: 3:1 contra a cor vizinha, no critério 1.4.11, para a pessoa identificar o que é clicável e o estado (ativo, foco, erro). Botão amarelo claro em fundo creme costuma falhar mesmo com a palavra "enviar" em negrito. Eu separo os pares e testo cada um: texto sobre fundo, texto do botão sobre a cor do botão, borda do campo sobre o fundo da página.

Cor não é o único sinal. Erro em só vermelho, sem ícone ou frase, some para quem não distingue o vermelho. O critério de contraste trata da luminosidade, não de "vermelho significa erro". Eu escrevo "confira o e-mail" ao lado da cor.

Fonte: WCAG 2.2 e a página de entendimento do contraste mínimo, lidas em 16/10/2026.

Fundo com foto atrás do título é o caso que mais quebra essa tabela. A foto muda de tom no meio da frase. Eu ponho uma faixa sólida, ou uma máscara uniforme, atrás das palavras. Texto direto sobre céu, rosto ou produto fica ilegível num pedaço e legível no outro. A máscara é parte do design, não um remendo.

3. Largura, entrelinha e o que acontece se a pessoa aumentar

Linha muito longa faz a pessoa perder o começo da próxima. O critério 1.4.8, nível AAA, fala em largura de no máximo 80 caracteres (40 em escrita CJK), texto sem justificar nas duas margens, e entrelinha de pelo menos um espaço e meio. A nota 1 é clara: a página não é obrigada a já nascer com esses valores. O requisito é existir um meio de mudá-los, e o navegador pode ser esse meio.

Eu mesmo assim limito a coluna do texto por volta desse teto. Em tela larga, um parágrafo de ponta a ponta da janela cansa. A landing ganha margem. O título pode ser mais largo que o parágrafo. O parágrafo não.

Justificar o bloco nas duas margens abre rios de espaço no meio da linha, sobretudo em português, com palavras longas. Eu alinho à esquerda.

O critério 1.4.12, este sim nível AA, não manda eu publicar já com aqueles espaços. Manda a página não quebrar se a pessoa aplicar, ao mesmo tempo, altura de linha de 1,5 vez o tamanho da fonte, espaço depois do parágrafo de 2 vezes o tamanho da fonte, espaço entre letras de 0,12 vez a fonte e espaço entre palavras de 0,16 vez a fonte. Botão com texto cortado, card que estoura, menu que sobrepõe: isso reprova. Eu desenho com folga, não com texto encaixado no pixel.

Ampliar também é AA. O critério 1.4.4 pede que o texto chegue a 200% sem perder conteúdo nem função, fora legenda e imagem de texto. E o 1.4.10 pede que, numa largura equivalente a 320 pixels CSS, a página role num eixo só. Coluna de texto em largura fixa de pixels, com título proibido de quebrar a linha, quebra os dois. Eu uso unidade que cresce com a letra e deixo o título quebrar.

Texto dentro de imagem não amplia direito. Slogan desenhado na arte do hero fica de fora do 1.4.4. Eu coloco a frase de verdade em HTML, por cima ou ao lado da arte. A arte ilustra. A frase se lê.

Se a página de campanha está bonita no arquivo e apertada no telefone, manda a URL ou o arquivo. Se ela faz parte de uma loja Shopify que ainda não existe, fala comigo antes de criar: a loja nasce como loja de desenvolvimento, é montada pronta e transferida para o seu nome.

Falar sobre o projeto

4. Uma cor de ação

Paleta de landing: fundo, texto, uma cor de apoio e uma cor de ação. A cor de ação pinta o botão principal e quase nada mais. Se o link, o selo, o fundo do depoimento e o botão usam o mesmo verde, o olho não sabe onde clicar.

A cor de apoio serve para fundo de faixa ou para um gráfico simples. Ela não compete com o botão. Se a marca só tem uma cor forte, o botão fica com ela e o resto fica em neutro: preto, branco, cinza que passe no 4,5:1.

Estado do botão muda de verdade. Hover em desktop escurece ou sublinha. No celular não existe hover. O estado que importa no dedo é o foco e o pressionado, ainda com 3:1 contra o que está em volta. Botão desabilitado pode ficar por fora da exigência de componente inativo. Eu não deixo o botão principal desabilitado sem dizer o que falta ("informe o e-mail").

A Shopify usa o mesmo princípio no checkout: a ajuda pede cor com contraste alto e página simples, porque a pessoa está preenchendo entrega e pagamento. Lá a fonte de título e a de corpo se trocam no editor, numa lista fechada. Na landing eu tenho mais liberdade de fonte. A disciplina é a mesma. Uma cor manda no clique. O resto não grita.

Link no meio do texto continua sublinhado, não só colorido. Cor sozinha se perde. Sublinhado funciona em preto e branco também.

5. A fonte precisa aparecer

Fonte de web que demora deixa a primeira frase invisível. O web.dev registra o comportamento padrão: Chrome e Firefox esperam até 3 segundos antes de mostrar uma fonte reserva. O Safari pode segurar o texto por tempo indeterminado. Três segundos numa landing é a pessoa já ter voltado para a busca.

font-display muda isso. swap mostra a reserva na hora e troca quando a fonte chega. O risco é o pulo de layout, se a reserva ocupa outro tamanho. optional espera no máximo 100 ms. Se a fonte não chegou, fica a reserva, sem troca tardia. Para o corpo da landing, eu prefiro texto visível cedo. Para um título de marca muito desenhado, swap ainda vale, desde que a reserva tenha largura parecida.

A fonte só baixa se a página usa. Declarar dez famílias e aplicar duas é desperdício, mas o arquivo das oito não vem se nenhum estilo pede. O que pesa é cada peso que o CSS realmente chama: regular, negrito, itálico. Eu publico os pesos que a escala usa. Não o catálogo.

system-ui no corpo usa a fonte do aparelho. Não há download. Em landing curta, com pressa de leitura, isso é uma opção honesta. A personalidade fica no título, num único arquivo.

WOFF2 é o formato que o web.dev recomenda para fonte moderna: comprime cerca de 30% melhor que WOFF. Fonte latina fica na casa de 100 a 1.000 glifos. Se a página é em português, não preciso embutir o conjunto de uma escrita que a página não usa. Recortar o arquivo para o que o texto usa deixa o download menor. A licença da fonte tem de permitir esse recorte. Eu confiro antes.

Fonte variável junta vários pesos num arquivo só. O arquivo tende a ser maior que um peso isolado. Vale quando a página usa vários pesos de verdade. Numa landing com regular e negrito, dois arquivos enxutos costumam ser mais leves.

Um exemplo curto do que eu deixo no CSS, sem comando de terminal:

@font-face {
  font-family: "Sua fonte";
  src: url("/fontes/sua-fonte.woff2") format("woff2");
  font-display: swap;
}

O caminho do arquivo é o da sua página. Eu não colo esse bloco em tema de loja sem ver o que o tema já carrega. Tema que já traz a fonte da marca não precisa de uma segunda cópia.

6. O que eu risco na revisão da página

Eu leio a landing em voz baixa, no celular, do título ao botão. Se eu preciso aproximar o aparelho para ler a nota, o corpo está pequeno. Se o botão só aparece depois de três telas de depoimento, a cor de ação chegou tarde.

Confiro os quatro pares da tabela: corpo, título, botão, campo. Foto atrás de texto ganha faixa sólida. Logo pode ficar como a marca é. Preço não se esconde na exceção da logo.

Amplio o texto no navegador até o dobro. Se aparecer barra horizontal, ou se o botão sumir para fora, o 1.4.4 e o 1.4.10 não foram atendidos. Na largura estreita, equivalente a 320 pixels CSS, a página rola só para baixo.

Aumento o espaço entre linhas no navegador. Se um card corta a última linha, o 1.4.12 falhou. A correção é folga no componente, não travar a altura do texto.

Por último eu olho o carregamento. A primeira frase não pode ficar em branco enquanto cinco pesos baixam. Um título, um corpo. O Google ainda pede o mesmo título claro no celular e no desktop, e que o conteúdo principal não dependa de um gesto para existir. Sanfona de pergunta frequente pode recolher. O título da oferta, não.

Essa passagem é de página. Não substitui a identidade. Página com contraste certo e fonte genérica ainda pode estar sem cara de marca. Os dois trabalhos se encontram: a marca escolhe a cor, a landing obedece o contraste dessa cor. Se a cor da marca não passa em 4,5:1 no miúdo, ela fica no título grande ou na faixa, e o corpo vai para um neutro que passa.

Perguntas frequentes

Qual contraste a landing precisa ter?

Texto comum, 4,5:1 com o fundo. Texto grande, a partir de 18 pontos ou 14 em negrito, 3:1. Botão e borda de campo, 3:1 contra a cor vizinha. Texto que é a logo fica de fora. Preço, botão e parágrafo entram na conta.

Preciso limitar a linha a 80 caracteres?

O número está no critério 1.4.8, nível AAA, e a própria WCAG diz que a página não é obrigada a já usar esse valor: basta haver um meio de mudar, e o navegador serve. Eu limito mesmo assim, porque linha de ponta a ponta numa tela larga é difícil de seguir. Justificar nas duas margens eu não uso.

Posso usar qualquer fonte do catálogo?

Pode, se a licença permitir o uso na web. Eu publico WOFF2, só os pesos que o CSS usa, com font-display para o texto não ficar invisível. Chrome e Firefox podem esperar até 3 segundos no comportamento padrão. system-ui no corpo evita download e deixa a personalidade no título.

Cor de fundo escura com letra branca passa?

Passa se o par atingir 4,5:1 no texto comum. Cinza sobre cinza é o par que costuma falhar, e a cor "parece clara" não substitui a conta. Foto atrás da letra branca só vale com uma máscara estável.

A mesma regra vale no checkout da loja?

O princípio sim: contraste alto e página simples. A Shopify escreve isso na ajuda do checkout, e a fonte de lá sai de uma lista do editor, título e corpo. Na landing a fonte é sua, com o mesmo limite de contraste e de botão.

Conclusão

Tipografia e cor na landing page seguram a leitura quando o título é curto, o corpo cabe numa coluna, o contraste passa no miúdo e só uma cor aponta o botão. A fonte aparece cedo, em WOFF2, sem um catálogo de pesos. Ampliar e espaçar o texto não pode quebrar a página. Se a sua página de campanha está bonita no arquivo e ilegível no telefone, o caminho é o projeto de e-commerce e de site. Manda a URL da página ou o arquivo. Se a página faz parte de uma loja Shopify que ainda não existe, fala comigo antes de criar a loja: ela nasce como loja de desenvolvimento, é montada pronta e transferida para o seu nome.

Falar sobre o projeto