Escala de tipografia responsiva com CSS clamp(), sem media queries

Duas formas que a maior parte das equipas trata tipografia responsiva são más. A primeira é fixar o body em 16px e esquecer — a tipografia fica minúscula num monitor 4K e apertada num telemóvel. A segunda é empilhar cinco media queries por título — o ficheiro CSS duplica, e os gaps entre breakpoints parecem uma escadaria.

A forma certa em 2025 é CSS clamp(). Uma declaração por título. Resize fluido entre dois viewports. Sem media queries. O truque é calcular slope e intercept corretamente para que a tipografia bata exatamente no teu mínimo no viewport mais pequeno e exatamente no teu máximo no maior.

O que te dá

• Sete níveis de tipografia — body, h6, h5, h4, h3, h2, h1 — gerados a partir de um tamanho base e uma razão de escala
• Dois formatos de output — CSS custom properties + classes utilitárias, e config fontSize de Tailwind
• Oito razões pré-feitas da segunda menor (1.067, silenciosa) à dourada (1.618, teatral)
• Pré-visualização live em qualquer viewport — redimensiona o browser e vê a escala a deslizar

A fórmula clamp()

Para um título que deve ser 20px a 360px de viewport e 32px a 1400px, queres:

font-size: clamp(20px, slope·vw + intercept, 32px);

Onde slope = (32 − 20) / (1400 − 360) = 0,01154, expresso como 1.154vw. E intercept = 20 − 0,01154 × 360 = 15,85px. Logo:

font-size: clamp(20px, 1.154vw + 15.85px, 32px);

Fazer essa aritmética sete vezes por projeto é chato. Esta ferramenta fá-lo por ti, em todos os níveis de título, para qualquer tamanho base e razão.

Escolher uma razão

As razões não são intercambiáveis. Uma 1,125 (segunda maior) parece editorial — jornais de leitura longa, posts de journal, qualquer coisa onde queres desaparecer. Uma 1,333 (quarta perfeita) parece confiante — sites de marketing, páginas de produto, decks. Uma 1,618 (dourada) parece teatral — páginas hero, museus, moda. Escolhe a razão que combina com o espaço onde vais pôr a tipografia, não a que soa mais prestigiada.

Se não sabes qual escolher, começa em 1,25 (terceira maior). Funciona para quase tudo e não sinaliza nada em particular.

Porque tem classes utilitárias

CSS custom properties sozinhas deixam a conversa de line-height por terminar. Cozinhámos line-heights combinados nas classes utilitárias — 1,05 para h1, a subir até 1,55 para body. Títulos devem respirar menos do que parágrafos. Os defaults da ferramenta estão afinados para sans-serif na razão default; vais querer ajustar para serif ou para escalas invulgarmente apertadas.

Usa-a

Ficheiro HTML único. Abrir no GitHub →. Abre num browser. Desliza os controlos. Copia o output. Cola no teu design system.