Sites institucionais

Tipografia e cores do site: escolhas que comunicam (sem ser designer)

Tipografia e cor são onde o site comunica antes de o leitor ler uma palavra. E são onde a maioria dos sites de PME portuguesas falha — não por falta de gosto, mas por excesso de escolhas: 4 fontes diferentes, 8 tons de azul, títulos cinzentos sobre fundo cinza claro. Sem treino de design, é fácil confundir "variedade" com "personalidade".

Este guia mostra as decisões que mais pesam (palete simples, par de fontes, hierarquia, contraste) e dá regras práticas para chegar lá sem ser designer — e sem entregar o site a um designer que cobra 4.000€ pelo manual.

Cores: a regra 1 + 1 + 3 que resolve 90% dos casos

Site com muitas cores parece indeciso. Site com 1 cor parece pobre. A regra que serve PME:

  • 1 cor primária (a marca — botões, links importantes, logo).
  • 1 cor secundária / acento (contraste, destaques, alertas).
  • 3 neutros (fundo branco/quase-branco, fundo escuro, cinzento de texto secundário).

Total: 5 cores no design tokens. Tudo o resto deriva (variantes de hover, transparências).

Exemplo concreto (palete típica para uma PME de serviços):

PapelHEX
Primária#1E40AF (azul)
Acento#F59E0B (âmbar)
Fundo claro#FFFFFF
Fundo escuro#0F172A
Texto secundário#475569

Para uma marca premium ou editorial, retira saturação. Para uma marca jovem/energética, sobe saturação. Mas mantém 5 cores.

Como escolher a cor primária sem azar

A cor primária deve passar três testes:

  1. Diferente da concorrência direta no setor. Se os 5 concorrentes principais usam azul, considera verde, terracota ou preto.
  2. Funciona em botão branco-sobre-fundo (contraste suficiente para CTA legível).
  3. Significado cultural não compromete — em PT, vermelho está bem como acento mas raramente como dominante (associação a erro/alerta).

Ferramentas honestas:

  • Coolors.co — gera paletes a partir de uma cor base.
  • Color Hunt — paletes curadas por designers.
  • Adobe Color — roda cromática com regras (complementar, análoga, triádica).

Evita: o teu segundo gosto pessoal de cor. A escolha tem de funcionar para o negócio, não para o teu armário.

Contraste: o WCAG AA é o mínimo, não o objetivo

O Decreto-Lei 83/2018 transpõe a Diretiva Europeia 2016/2102 e exige acessibilidade em sites públicos. Para sites privados, é boa prática — e protege contra problemas de leitura para 8%-12% dos utilizadores com algum tipo de défice visual ou daltonismo.

Mínimo WCAG AA (verificável no W3C Quick Reference):

  • Texto normal: rácio de contraste ≥ 4.5:1.
  • Texto grande (≥18pt regular ou ≥14pt bold): ≥ 3:1.
  • Elementos interativos (botões, focus state): ≥ 3:1 com o seu redor.

Como verificar:

  • Plugin do Figma "Contrast" durante o design.
  • Lighthouse no Chrome — secção "Accessibility".
  • Webaim Contrast Checker — copia e cola HEX.

A armadilha comum: texto cinzento #9CA3AF sobre fundo branco. Parece "elegante". É 2.8:1 — reprova. Para acessibilidade web em Portugal, o detalhe legal e técnico está num post dedicado.

Tipografia: 2 fontes, no máximo

A regra de ouro em 2026:

  • 1 fonte para títulos (display — personalidade).
  • 1 fonte para corpo (legibilidade — neutra).

Em casos raros, 1 fonte para tudo (super-família como Inter ou DM Sans). Mais do que 2 fontes acrescenta peso (rede) e ruído (estético).

Pares que funcionam de saída — todos disponíveis no Google Fonts:

TítuloCorpoSensação típica
Playfair DisplayInterEditorial, premium
Space GroteskInterTech, moderno
FrauncesManropeCaloroso, contemporâneo
DM Serif DisplayDM SansClássico mas atual
ArchivoSource Sans 3Corporate decente
Inter (700)Inter (400)Minimalista, único peso

Como escolher entre pares:

  • Lê o título de um post típico do teu blog em cada par.
  • Imprime mentalmente em A4 e em ecrã de telemóvel.
  • Pergunta: "este par parece quem somos ou parece outra marca que não somos?".

Hierarquia: 6 tamanhos cobrem tudo

Não precisas de 14 tamanhos de texto. Precisas de 6:

PapelTamanho típico (desktop)Tamanho mobile
H148-56 px32-40 px
H232-40 px24-28 px
H324-28 px20-22 px
Corpo16-18 px16 px (não menor)
Pequeno (caption, label)14 px13-14 px
Microcopy (legais)12 px12 px

16 px é o mínimo absoluto para corpo em 2026 — Apple Human Interface, Material Design e WCAG concordam. Texto mais pequeno é hostil ao leitor, especialmente para 45+.

Espaçamento entre linhas (line-height):

  • Títulos: 1.1-1.2.
  • Corpo: 1.5-1.7.

Performance: Google Fonts CDN vs auto-hospedado

O Google Fonts é prático mas tem dois problemas em 2026:

  1. Performance. Cada fonte carregada da CDN é round-trip extra. Em sites muito otimizados, custa 100-300ms ao LCP. Ver Core Web Vitals explicado.
  2. RGPD. Pedido à CDN da Google envia o IP do utilizador para servidor fora da UE. Há jurisprudência alemã (Munique, 2022) a considerar isto violação de RGPD em sites públicos. Em Portugal não há jurisprudência igual, mas o risco é real.

A alternativa: auto-hospedar as fontes (descarregar do Google Fonts, servir do teu domínio). Vantagens:

  • Sem chamada externa — melhor LCP.
  • Sem partilha de IP com Google — RGPD limpo.
  • Cache no próprio domínio.

Boas práticas:

  • Servir em formato WOFF2 (mais comprimido).
  • font-display: swap para evitar invisible text (FOIT).
  • Pré-carregar apenas as fontes acima da dobra (<link rel="preload">).
  • Subset por idioma (PT só precisa de latin-ext, não de cirílico).

Detalhes técnicos em web.dev — Font Best Practices.

Cores e dark mode em 2026

Dark mode deixou de ser feature premium. Em 2026, ~40% dos utilizadores em telemóvel têm o sistema em escuro. Sites que não respeitam ficam mal renderizados.

Para uma PME pequena, não tens de implementar dark mode se o site for simples. Mas:

  • Não interfere com o dark mode do sistema com <meta name="color-scheme" content="light"> se ficar mais simples.
  • Evita imagens com fundo branco fixo que destoam num browser em dark mode.
  • Logo em SVG com cor adaptativa se quiseres jogar bem.

Como o briefing deve documentar tipografia e cores

Para o estúdio fazer o site sem 5 rondas estéticas, o briefing de website deve incluir:

  • Manual de marca (se existe) ou referências.
  • Palete em HEX (mesmo que provisória) ou 3 sites referência.
  • Par de fontes ou indicação ("queremos algo editorial / tech / corporate").
  • Restrições — cores que detestas, fontes que detestas.
  • Logo em SVG (não JPG).

Sem isto, o estúdio faz suposições e gasta tempo a refazer.

Caso típico: redesign onde a tipografia salva o site

Numa boa parte dos casos de redesign de site, 50% do "ar fresco" sentido depois vem só de:

  • Mudar a fonte de corpo para uma legível (Inter, DM Sans).
  • Aumentar tamanho do corpo de 14px para 17px.
  • Aumentar line-height de 1.3 para 1.6.
  • Reduzir a palete de 9 cores para 5.

Não precisas de rebrand. Precisas de respiração tipográfica.

Design tokens em CSS: como o código respeita o design

Para o site não destoar dos mockups, as cores, fontes e tamanhos vivem em CSS variables (custom properties), declarados num só sítio:

:root {
  --color-primary: #1E40AF;
  --color-accent: #F59E0B;
  --color-bg: #FFFFFF;
  --color-bg-dark: #0F172A;
  --color-text-secondary: #475569;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --text-h1: 3rem;
  --text-h2: 2rem;
  --text-body: 1.0625rem;
}

Cada componente do site refere as variáveis (color: var(--color-text-secondary)), nunca o valor direto. Vantagens:

  • Mudar uma cor em todo o site = mudar 1 linha.
  • Tematizar (dark mode, marca alternativa) = redeclarar variáveis num seletor.
  • Coerência garantida — ninguém usa #1E40AE em vez de #1E40AF por engano.

Em Tailwind 4 e em frameworks modernos, este padrão é nativo. Estúdios que ainda hard-code cores em cada componente em 2026 estão a deixar dívida técnica grátis ao próximo developer.

Erros de tipografia que matam a leitura

Lista curta dos erros mais comuns em sites de PME PT:

  1. Texto cinza claro sobre fundo branco — #9CA3AF sobre #FFFFFF reprova WCAG. Manter texto principal a #1F2937 ou mais escuro.
  2. Linha de texto demasiado longa — corpo com 1100px de largura corre mal. Conforto: 60-75 caracteres por linha (max-width: 65ch).
  3. Sem hierarquia clara entre H2 e H3 — quando ambos têm 22px, o leitor perde-se. Diferença mínima 25% entre níveis.
  4. Fontes a renderizar mal em Windows — testar no Chrome em Windows, não só Mac. Sansations diferentes.
  5. Centrar parágrafos longos — texto centrado é para 1-2 linhas, nunca para 4+. Esquerda alinhada para corpo.
  6. Itálico em ecrã pequeno — perde legibilidade em 14px. Reservar para citações curtas.

A regra que junta tudo

5 cores, 2 fontes, 6 tamanhos, contraste WCAG AA, fontes auto-hospedadas em WOFF2 com font-display: swap. Cumprida esta lista, o site comunica profissional sem te transformares em designer. Tudo o resto — animações, gradientes, efeitos — é decoração que se acrescenta quando o resto está sólido. Decoração sobre base fraca é só ruído.

No sitesfixe.pt desenhamos sites em Portugal com tipografia auto-hospedada em WOFF2, paletes de 5 cores em CSS variables, contraste WCAG AA verificado no Lighthouse, e LCP <1s. Sites legíveis, rápidos e profissionais sem cair em rebrand caro. Fala connosco. Sites desde 1.500€.

Lê também:

Fontes

Precisas de um site ou loja online?

Agência digital portuguesa. Sites e lojas online rápidos, otimizados para o Google e feitos para resultado.

Pedir orçamento