Como Escolher Fontes que Funcionam Bem Juntas
Descobre as regras simples para emparelhar títulos com fontes de corpo. Contraste, personalidade e harmonia.
Ler ArtigoEscalas Tipográficas Responsivas que Crescem com o Ecrã
Cria uma escala de tipos que se adapta perfeitamente a telemóveis, tablets e desktops. Aprende a usar proporções consistentes em todos os tamanhos de ecrã.
Por Que a Escala Tipográfica Importa
A verdade é que a maioria dos sites não pensa realmente sobre escalas. Usam tamanhos aleatórios de fonte, e depois tudo parece… desorganizado. Não tem hierarquia. Não tem respiração visual.
Uma escala tipográfica responsiva resolve isto. É uma sequência matemática de tamanhos de letra que funciona em qualquer dispositivo. Quando implementas bem, o teu site inteiro fica mais legível, mais profissional e muito mais fácil de manter.
Neste guia, vamos ver exatamente como construir uma escala que cresce com o ecrã. Sem complicações. Sem fórmulas estranhas. Só a abordagem que os designers usam realmente.
Os Fundamentos: Proporção e Consistência
Uma escala tipográfica começa com uma razão. É um multiplicador que aplicas repetidamente. As razões mais comuns? 1.125 (também chamada razão áurea menor), 1.25 (quinta perfeita) ou 1.5 (triada).
Se começares com um tamanho base de 16px e aplicares uma razão de 1.25, isto é o que obténs:
Corpo:
16px
H6:
20px
H5:
25px
H4:
31px
H3:
39px
H2:
49px
H1:
61px
Simples? Sim. Mas aqui está a questão: isto só funciona bem no desktop. No telemóvel, 61px para um título é absolutamente enorme. Precisa de escalar para baixo.
Escalas Responsivas: A Técnica Real
É aqui que entra a magia. Vais criar escalas diferentes para diferentes tamanhos de ecrã. No telemóvel (320px), usas uma razão menor, tipo 1.125. Isto mantém o teu H1 legível mas não gigante.
No tablet (768px), subes ligeiramente para 1.25. E no desktop (1024px+), podes ir para 1.5 ou até 1.618 (a verdadeira razão áurea). Isto é o crescimento responsivo.
A forma mais prática? Usar a função CSS clamp(). Isto permite que os tamanhos de fonte cresçam fluidamente entre breakpoints, sem saltos abruptos.
Como Implementar com CSS
Existem duas abordagens principais. A primeira é definir variables CSS para cada nível da tua escala. A segunda é usar clamp() diretamente nos elementos. Vou mostrar-te a segunda porque é mais elegante.
h1 { font-size: clamp(1.75rem, 5vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); }
h3 { font-size: clamp(1.25rem, 3vw + 0.5rem, 2rem); }
p { font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); }
O clamp() aceita três valores: mínimo, preferencial e máximo. O valor preferencial usa vw (viewport width), o que significa que o tamanho cresce conforme o ecrã alarga. Isto é responsivo puro, sem media queries necessárias.
A vantagem? Os tamanhos de letra crescem continuamente. Não há saltos quando mudam de tamanho. Funciona perfeitamente em qualquer viewport.
Melhores Práticas que Realmente Funcionam
1. Começa Sempre Pequeno
Define o teu tamanho mínimo para a versão mobile. Isto garante que o teu conteúdo é legível nos telemóveis mais pequenos (320px). Depois cresce a partir daí.
2. Usa Proporções Naturais
As razões 1.125, 1.25 e 1.5 não são arbitrárias. Vêm de princípios musicais e visuais. Evita razões estranhas que não fazem sentido. A proporção existe por uma razão.
3. Testa em Dispositivos Reais
Os emuladores do browser são úteis, mas nada substitui testar no teu telemóvel. Abre o site num iPhone e num Android. Vê como fica. Faz ajustes se necessário.
4. Considera o Espaçamento
A escala tipográfica não é só sobre tamanhos de fonte. É também sobre o espaço entre linhas (line-height) e entre parágrafos. Estes devem escalar proporcionalmente também.
5. Documenta a Tua Escala
Cria um documento ou página que mostra todos os tamanhos de tipo em ação. Os teus colegas e clientes vão compreender a coerência visual do teu design.
6. Actualiza Conforme Aprende
A primeira escala que crias pode não ser perfeita. Com o tempo, vais descobrir o que funciona melhor. Não tenhas medo de ajustar. A tipografia é iterativa.
Começar Agora
Não precisa de ser complicado. Escolhe uma razão (1.25 é sólida para a maioria), define um tamanho base (16px é o padrão), e depois usa clamp() para escalar. Em meia hora tens uma escala funcional e responsiva.
O melhor? Uma vez que implementes isto, o resto do teu design fica mais fácil. A hierarquia visual aparece naturalmente. Os utilizadores entendem o que é importante. O teu site inteiro respira melhor.
Explorar Mais sobre Tipografia
Aprofunda-te no mundo da tipografia web com os nossos outros guias. Desde como escolher fontes que funcionam bem juntas até espaçamento de linhas que transforma a legibilidade.
Ver Todos os Guias de TipografiaInformação Educacional
Este artigo apresenta princípios e técnicas educacionais sobre tipografia responsiva. As recomendações baseiam-se em boas práticas da indústria e não representam consultoria profissional personalizada. Os resultados podem variar consoante o contexto do projeto, audiência e requisitos específicos. Para implementações críticas, consulta com um designer ou desenvolvedor experiente na tua região.
Artigos Relacionados
