Título em dois tons: a parte apagada guia a leitura, desde que passe no contraste
A segunda parte do título em tom mais apagado dá ritmo e hierarquia. Como usar sem perder legibilidade e onde ela costuma falhar.
- Post
- 27 de out de 2026
- 3 min de leitura
Abra o site do Studio Responsivo e olhe o título da primeira tela: “Colocamos produtos digitais no ar.” A primeira parte está em branco. O final, “no ar”, está num tom mais apagado. Parece detalhe, mas muda a forma como a frase é lida.
O título em dois tons é um dos recursos mais simples para dar hierarquia sem aumentar fonte, sem negrito e sem cor de destaque. E também é um dos que mais quebram quando usado sem critério.
Como ele funciona
O olho lê primeiro o que tem mais contraste. Num título em dois tons, a parte clara carrega a ideia principal e a parte apagada completa. Isso cria um ritmo: a pessoa entende o essencial num relance e lê o resto logo em seguida.
No meu Livro de Regras, isso tem uma combinação com outra regra: títulos grandes são leves. Nada em 600 ou 700. Como o título é leve, o dois tons é o que separa as partes, no lugar do negrito.
Regra 1: a parte apagada fica no fim
A ordem importa. A parte clara vem antes, porque é ela que segura a atenção. Se o título começa apagado e termina claro, o olho pula o começo e a frase perde sentido.
No título do Studio, a ação vem clara, “Colocamos produtos digitais”, e o resultado vem apagado, “no ar”. Quem passa o olho entende o que a empresa faz. Quem lê inteiro entende para onde vai.
Regra 2: a parte apagada completa a frase
O segundo tom não é lugar de enfeite nem de repetição. Ele precisa ser parte da mesma frase ou uma segunda frase que fecha a primeira. Se você consegue apagar a parte cinza e o título perde informação, ela está no lugar certo. Se não perde nada, corte.
Libere o resto da matéria
Você também recebe por e-mail o link desta matéria e a aula grátis do Conversão Visual.
Regra 3: passa no contraste
Aqui é onde o recurso mais falha. Para ficar bonito, a parte apagada vai ficando cada vez mais clara, ou mais escura no tema escuro, até quase sumir. No monitor do designer funciona. No celular, na rua, com o brilho baixo, ela desaparece.
A referência que eu uso é a das diretrizes de acessibilidade do W3C, a WCAG: contraste de pelo menos 4,5 para 1 em texto normal e 3 para 1 em texto grande. Título grande cai na segunda faixa, então há margem para apagar. Mas não infinita. Confira o tom apagado contra o fundo numa ferramenta de contraste antes de publicar.
O Livro de Regras faz esse alerta direto: cinza claro ao lado de branco perde contraste em alguns fundos. A regra permite o dois tons, mas pede a conferência.
Onde usar e onde não usar
Funciona bem em:
- título da primeira tela;
- títulos de seção com duas ideias, como “Quatro etapas. Uma data.”;
- painéis de CTA no fim da página.
Não funciona em:
- texto corrido e parágrafos;
- rótulos de botão;
- títulos que já são curtos demais para dividir.
E vale a regra de padrão: se você usa dois tons num título de seção, use o mesmo tom apagado em todos. Um cinza diferente em cada seção vira ruído.
Como pedir para a IA
Se você monta a página com IA, escreva a regra no arquivo que ela lê: segunda parte do título com o token de texto de apoio, sempre no fim, sempre conferida no contraste. Sem isso, a IA tende a criar um degradê colorido no título, que é outra coisa e costuma ter cara de template.
Detalhe que guia o olho
Página que vende é aquela que se entende num relance. O título em dois tons é uma das formas mais baratas de chegar lá.
No Conversão Visual eu ensino essas decisões de tipografia, cor e hierarquia, e como passar cada uma para a IA executar. A aula grátis mostra o processo completo, com uma página real indo para o ar.
