Como Escolher o Par Perfeito de Fontes para Seu Site
Aprenda a combinar uma fonte de cabeçalho com outra de corpo que trabalhem bem juntas e criem contraste visual.
Escala Tipográfica Responsiva com CSS
Crie uma escala que se adapta perfeitamente a qualquer tamanho de tela. Inclui exemplos de código que você pode copiar e usar.
O Desafio Real da Tipografia Responsiva
Quando você começa a projetar sites, percebe que usar o mesmo tamanho de fonte em todos os dispositivos não funciona. No celular de 320 pixels, aquele h1 de 48px vira um monstrengão que ocupa toda a tela. No monitor de 1920px, o mesmo tamanho fica ridiculamente pequeno.
A solução não é ajustar manualmente com media queries para cada breakpoint — isso é um pesadelo de manutenção. Existe uma forma melhor, mais elegante, que usa CSS para criar uma escala que cresce e encolhe fluidamente com o viewport. E é bem mais simples do que você pensa.
Entendendo a Função clamp()
A mágica acontece com a função CSS
clamp()
. Ela funciona assim: você define um valor mínimo, um valor preferencial (que muda com a viewport), e um valor máximo. O navegador escolhe automaticamente qual desses usar.
Para tipografia, a sintaxe é simples:
font-size: clamp(min, preferred, max)
. Você nunca mais precisa de uma tonelada de media queries. Escreva uma vez, e funciona perfeitamente em 320px ou 2560px.
Por que isso é melhor: Sem clamp(), você precisa de múltiplos breakpoints. Com clamp(), uma linha de CSS cuida de tudo. A tipografia não salta de tamanho em breakpoints — ela cresce suavemente.
Como Implementar Sua Escala
Vamos começar com uma escala prática que funciona bem em praticamente qualquer projeto. Você vai definir tamanhos para h1, h2, h3, h4, h5, h6 e parágrafos. O segredo é manter proporções — cada nível deve ser ligeiramente maior que o anterior.
Aqui está o código base que você pode copiar diretamente no seu CSS. Adaptamos os valores para funcionar bem em português, onde textos costumam ser um pouco mais longos:
h1 {
font-size: clamp(1.75rem, 5vw + 1rem, 3.5rem);
line-height: 1.2;
}
h2 {
font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem);
line-height: 1.3;
}
h3 {
font-size: clamp(1.25rem, 3vw + 0.5rem, 2rem);
line-height: 1.4;
}
p {
font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);
line-height: 1.6;
}
Entendendo Cada Parte
Vamos quebrar aquele
clamp(1.75rem, 5vw + 1rem, 3.5rem)
para o h1. O primeiro valor (1.75rem) é o mínimo — em telas muito pequenas, o h1 nunca será menor que isso. O terceiro valor (3.5rem) é o máximo — em telas gigantes, ele não cresce além disso.
O meio (
5vw + 1rem
) é onde acontece a mágica. Ele diz “use 5% da largura da viewport mais 1 rem”. Então em um celular de 320px, isso é 16px + 1rem. Em um desktop de 1920px, é 96px + 1rem. Isso cria aquela curva suave de crescimento que você quer.
Móvel (320px)
16px + 1rem = ~32px
Tablet (768px)
38px + 1rem = ~54px
Desktop (1920px)
96px + 1rem = ~112px (limitado a 3.5rem)
Práticas Essenciais para Melhor Resultado
Mantenha Proporções Consistentes
Não é só o tamanho que importa — a proporção entre h1 e h2 deve ser semelhante em todos os dispositivos. Se h1 é 50% maior que h2 no celular, deve ser também no desktop. Isso mantém a hierarquia visual consistente.
Altura de Linha Importa Muito
Você notou que cada elemento tem um
line-height
diferente? Cabeçalhos maiores precisam de linha menor (1.2), enquanto parágrafos precisam de mais espaço (1.6). Isso melhora legibilidade significativamente.
Teste em Dispositivos Reais
O que parece bom no seu monitor de 27 polegadas pode estar estranho em um iPhone. Abra seu site em diferentes dispositivos e veja como se comporta. O clamp() faz seu trabalho, mas sua escala deve estar calibrada corretamente.
Use rem, Não px
Todos os nossos valores usam rem ou vw — nunca px puro. Isso permite que os usuários que aumentaram o tamanho de fonte padrão do navegador continuem vendo tudo legível. É acessibilidade de verdade, não só para cumprir normas.
Refinamentos Avançados
Se você quer ir além do básico, existem técnicas interessantes. Uma delas é usar CSS custom properties para criar uma escala dinâmica que você pode ajustar globalmente.
:root {
--text-xs: clamp(0.75rem, 1vw, 0.875rem);
--text-sm: clamp(0.875rem, 1.2vw, 1rem);
--text-base: clamp(1rem, 1.5vw, 1.125rem);
--text-lg: clamp(1.125rem, 2vw, 1.25rem);
--heading-3: clamp(1.25rem, 3vw, 2rem);
--heading-2: clamp(1.5rem, 4vw, 2.75rem);
--heading-1: clamp(1.75rem, 5vw, 3.5rem);
}
h1 { font-size: var(--heading-1); }
h2 { font-size: var(--heading-2); }
p { font-size: var(--text-base); }
Dessa forma, se você precisa ajustar a escala inteira em uma página específica, você só muda as variáveis no :root local dessa página. Muito mais limpo que reescrever cada elemento.
Resumo: O Que Levar
Escala tipográfica responsiva não é complicado. Com
clamp()
, você evita dezenas de media queries. Você escreve uma vez, e funciona em qualquer tamanho de tela.
Os pontos principais: use clamp(), mantenha proporções entre elementos, ajuste a altura de linha para cada tamanho, e sempre teste em dispositivos reais. Começar com os valores que mostramos aqui é uma base sólida. Depois você ajusta para o seu projeto específico.
Próximo passo: Copie o código que mostramos, ajuste os valores para seu design, e teste em celular, tablet e desktop. Você verá rapidinho se está certo ou se precisa de ajustes. A tipografia responsiva com CSS é uma daquelas coisas que parece mágica até você entender como funciona.
Informação Importante
Este artigo é um guia educacional sobre técnicas CSS de tipografia responsiva. Os valores e exemplos aqui são recomendações baseadas em boas práticas de design web. Cada projeto é único — você deve testar esses valores em seu contexto específico e ajustá-los conforme necessário. Navegadores modernos suportam clamp(), mas se você precisa suportar navegadores mais antigos, será necessário usar media queries como fallback.
