# Escala fluida de tipografia e espaçamento

> Gere fontes e espaços com clamp() que crescem com a viewport entre um mínimo e um máximo, sem media queries.

URL: https://dpw.dev/ferramentas/escala-fluida-clamp/

Defina os tamanhos na menor e na maior tela: a ferramenta gera a escala de fontes e espaços com `clamp()`, pronta para colar como custom properties.

Esta página tem um gerador interativo no navegador. Exemplo: fonte base de 16px em 320px de viewport e 20px em 1240px, com razão 1,2 na tela menor e 1,25 na maior. O CSS correspondente:

```css
/* De 320px a 1240px de viewport */
:root {
  --step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
  --step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
  --step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
  --step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
  --step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
  --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
  --step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);

  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
  --space-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
  --space-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
  --space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);
}
```

## O problema

Com media queries, o tamanho do texto muda aos saltos: 16px até um breakpoint, 18px depois dele. Entre um salto e outro, o texto fica grande demais na tela estreita ou pequeno demais na larga, e cada nível da hierarquia (corpo, subtítulo, título) e cada espaçamento pede o seu par de valores.

Só `vw` resolve o salto, mas cria dois problemas: sem limite, o texto encolhe ou cresce sem fim, e unidade de viewport pura ignora o zoom e a fonte configurada no navegador.

## Como funciona

Cada valor é uma reta entre dois pontos: o tamanho mínimo na viewport menor e o máximo na maior. A inclinação da reta vira `vw`, o ponto em que ela corta o zero vira `rem`, e o `clamp()` segura as pontas:

`inclinação = (máx − mín) ÷ (tela máx − tela mín)`

O valor preferido do `clamp()` é `mín − inclinação × tela mín` (em rem) mais `inclinação × 100` (em vw).

A escala multiplica a fonte base pela razão a cada passo: com base de 16px e razão 1,2, o passo 1 tem 19,2px e o passo 2, 23,04px. Uma razão maior na tela larga faz os títulos crescerem mais rápido que o corpo do texto.

O `rem` no valor preferido mantém o texto ligado à fonte que o leitor configurou. Para o zoom chegar a 200% (WCAG 1.4.4), o máximo de cada tamanho não deve passar de 2,5 vezes o mínimo, [como mostrou Maxwell Barvian](https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/); a ferramenta avisa quando passar.

Os espaços usam as mesmas duas pontas: cada um é um múltiplo do passo 0, de 0,25× a 6×, então crescem na mesma proporção do texto.

## Quando usar

- Tokens de tipografia e espaçamento de um design system, em custom properties.
- Blogs e páginas de conteúdo, em que o corpo do texto precisa ficar confortável do celular ao monitor largo.
- Títulos de landing page que devem crescer bem mais que o texto em telas grandes.
- Paddings e gaps de seção que acompanham o tamanho do texto, sem um breakpoint para cada um.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/min-max-clamp)).

## Leia no blog

- [Textos responsivos com CSS clamp()](https://dpw.dev/css/textos-responsivos-com-css-clamp/)
- [Unidades de viewport e tipografia em web design responsivo](https://dpw.dev/css/unidades-de-viewport-controle-tipografia-web-design-responsivo/)

## Conceitos Fundamentais de CSS

Por que o `rem` respeita a fonte do leitor e o `vw` não? O livro explica unidades, valores computados e o resto do modelo em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml