Uma escolha certa de cores e fontes é a diferença entre um site que gera desconfiança e um que fecha negócios.
TL;DR
- Cores não são decoração: cada uma envia uma mensagem emocional. Azul transmite confiança; verde, sustentabilidade; laranja, energia.
- Tipografia também fala: serifa = tradição; sans-serif = modernidade. Use máximo 2–3 fontes no site.
- A paleta de cores e a escolha de fontes devem refletir a identidade da sua empresa, não o gosto pessoal.
Por que cores e tipografia importam tanto?
Seu site tem 3 segundos para comunicar profissionalismo. Cores e tipografia formam uma parte fundamental desse trabalho — bem mais importante do que a maioria dos empresários imagina.
Um site com tipografia fina demais e cores "lindas" para o designer, mas desalinhadas com o nicho do cliente (um advogado com tons neon fluorescentes, por exemplo) não gera credibilidade — gera confusão. O visitante pensa: "Esse site não é para mim" e sai.
Cores ativam emoções. Tipografia cria hierarquia e legibilidade. Juntas, elas formam a linguagem visual do seu negócio — e essa linguagem precisa estar em sintonia com quem você quer atrair.
Escolhendo cores que transmitem credibilidade
Não existe "cor certa" universal. Existe a cor certa para seu negócio e sua audiência.
A maioria dos advogados, consultores e agências imobiliárias no Brasil usa azul ou tons de azul porque funciona — o público espera. Seu concorrente também usa azul. A diferença não vem da cor, e sim da intensidade e de como você a combina com as outras duas cores da paleta.
Paleta de 3 cores: a regra que funciona
Não use 10 cores. Use 3:
- Cor primária — a que mais aparece (logo, cabeçalho, CTAs). Use em boa parte do visual. Cor secundária — complemento e contraste. Aparece em 10%.
Exemplo: Desenvolve Sites usa azul-índigo (#4f46e5) como primária, branco como secundária e verde como destaque (para CTAs de ação).
Tipografia: a escolha entre tradição e modernidade
Tipografia é hierarquia. A fonte errada comunica sem você perceber.
Serifa vs. sans-serif
Na tela, sans-serif lê melhor porque os pixels não conseguem renderizar os "pés" da serifa com precisão. Por isso web modern = sans-serif. Mas um advogado ou contador ainda espera ver serifa em documentos — misture os dois.
A regra: máximo 3 fontes
- Título (H1): Uma fonte chamativa, que respeita a marca
- Subtítulos e headings: Outra fonte, ou a mesma em peso maior (bold)
- Corpo do texto: Sans-serif legível, 16px ou maior
Usar mais de 3 fontes cria poluição visual. Usar a mesma fonte em todo lugar fica monótono.
Exemplo de hierarquia clara:
- H1: Montserrat Bold (26px) — títulos chamam atenção
- H2–H3: Montserrat Regular (18px, 14px) — estrutura
- Body: Inter Regular (16px) — corpo fácil de ler
Contraste e acessibilidade
Cores bonitas de longe podem ser ilegíveis de perto. Você precisa de contraste mínimo de 4.5:1 entre texto e fundo (padrão WCAG, a norma de acessibilidade web).
Ferramenta grátis: WebAIM Contrast Checker.
Teste que todo site deveria fazer:
- Abra em tema escuro do navegador
- Leia o texto em um celular com brilho baixo
- Pergunte a alguém com baixa visão se consegue ler
Se passar nesse teste, passa em todo navegador.
Combinações que funcionam (e por quê)
Regra de ouro: sempre use branco ou cinza muito claro como secundária. Não existe design profissional com fundo colorido.
Como testar se sua paleta funciona
- Imprima seu site em preto e branco. Ainda é legível?
- Mostre a tela para 3 pessoas no seu nicho. Qual a primeira impressão?
- Abra em celular. As cores transmitem a mesma mensagem?
- Teste no Lighthouse (Google PageSpeed): as cores afetam contraste/acessibilidade?
Se passar nessas 4 coisas, sua paleta funciona.
Tipografia em números: o que a pesquisa mostra
Tipografia maior (16px+) em corpo de texto converte mais do que tipografia pequena (12px). Não é opinião, é medível via testes A/B — menos esforço para ler = mais tempo na página = mais conversão.
Tamanho de fonte para corpo de texto:
- Mobile: 16px mínimo (evita zoom automático)
- Desktop: 16px–18px (legibilidade ótima)
- Titles (H1): 26px–40px (depende da largura da tela)
Perguntas Frequentes
O que faço se meu logo usa uma cor que não combina com a paleta do site?
Separe os conceitos. Seu logo (marca fixa) pode ter uma cor. Sua paleta do site (ambiente digital) pode ter outra — desde que haja harmonia visual. Exemplo: logo todo preto com vermelho, site azul e branco com destaque em vermelho. O vermelho une os dois.
Preciso seguir as cores da minha marca à risca, ou posso adaptar para o site?
Adapte. Uma cor que funciona no cartão de visita pode não funcionar na web. Use a mesma cor, mas ajuste o tom (mais claro, mais escuro) para garantir contraste e legibilidade. Seu brand não é a cor exata — é o tom e a personalidade.
Qual fonte é melhor para SEO?
Todas as fontes web modernizadas (Google Fonts, Typekit, etc.) não afetam SEO direto. O Google lê o texto, não a fonte. Escolha a fonte que melhora a legibilidade, porque leitura melhor = tempo maior na página = sinal de qualidade.
Devo usar uma fonte diferente em mobile?
Não. Use a mesma fonte em tamanho maior (ajuste responsivo via CSS). Fonte diferente em mobile = confusão visual. Sistema responsivo (mesma fonte, tamanhos diferentes) = profissionalismo.
Quantas cores devo usar em call-to-action?
Uma. Um botão com a cor de destaque. Não mude a cor do botão para cada página — consistência é profissionalismo.
Sobre o Autor
Eduardo Mendonça é Diretor Criativo na Desenvolve Sites, com mais de 8 anos de experiência em design digital que converte. Trabalha com empresários que precisam de sites profissionais que realmente geram leads. Especialista em ui/ux, acessibilidade e padrões web modernos.
Leia Também
- Mobile-first: por que seu site precisa funcionar no celular
- Design que vende vs. design bonito
- Como medir a velocidade do seu site
- Identidade visual para pequenas empresas
- Por que seu site não gera leads
- Como aumentar conversão do site