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

> Uma escala modular fluida que se redimensiona entre dois viewports com uma única declaração clamp() por título. Escolhe base + razão, copia CSS + config Tailwind.

- **Source:** https://amplifiedcreations.com/pt/lab/responsive-type-scale
- **Publisher:** amplified creations (https://amplifiedcreations.com/)
- **Published:** 2026-05-16
- **Updated:** 2026-05-17
- **Language:** pt
- **Stack:** HTML, CSS, clamp(), Modular scale, Typography, Design tokens
- **Live demo:** https://ptthe13.github.io/amplifiedlabs/responsive-type-scale/
- **Source code:** https://github.com/PTthe13/amplifiedlabs/tree/main/responsive-type-scale

---

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:

```css
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:

```css
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 →](https://github.com/PTthe13/amplifiedlabs/tree/main/responsive-type-scale). Abre num browser. Desliza os controlos. Copia o output. Cola no teu design system.

---

Publicado por amplified creations, estúdio de tecnologia independente em Leiria e Lisboa, Portugal. Contacto: info@amplifiedcreations.com · Mais: https://amplifiedcreations.com/llms.txt