H1 display (32px → 72px)
- Entrada
- min: 32px @ 320px viewport, max: 72px @ 1280px viewport
- Saída esperada
- font-size: clamp(2rem, 2.5vw + 1.25rem, 4.5rem);
Título principal responsivo. Cresce suavemente de mobile a desktop.
tipografia fluida CSS clamp
Tipografia fluida com CSS clamp(): escale fontes sem media queries
Tipografia fluida com `clamp()` é a técnica de escalar fontes de forma contínua entre dois tamanhos de viewport sem usar media queries. A função aceita três parâmetros: mínimo, valor preferido (expressão de viewport) e máximo. O valor preferido é calculado como a reta que passa pelos dois pontos extremos no espaço vw × px.
A fórmula slope-intercept explicada
- O cálculo começa convertendo min e max para rem (dividindo por 16 se a base for 16px). O slope é `(maxRem - minRem) / (maxVp - minVp) * 100` em vw. O intercept é `minRem - slope_vw * minVp / 100` em rem. A fórmula final: `clamp(minRem, slopeVw + interceptRem, maxRem)`. O slope é positivo se max > min (tamanho aumenta com viewport).
- A razão de usar `vw + rem` em vez de apenas `vw` puro é que `vw` puro não trava nos extremos. `vw` puro nunca para de crescer — em telas muito grandes, fontes ficam enormes. O `clamp()` resolve isso: você define exatamente onde começa e para de crescer.
Presets de tipografia fluida prontos
Corpo de texto (16px → 18px)
- Entrada
- min: 16px @ 375px, max: 18px @ 1440px
- Saída esperada
- font-size: clamp(1rem, 0.19vw + 0.93rem, 1.125rem);
Ajuste sutil mas perceptível no conforto de leitura em telas grandes.
FAQ da ferramenta completa
É uma função CSS que limita um valor entre mínimo e máximo. No meio, aceita qualquer expressão CSS — normalmente `viewport-width + constante-rem` para tipografia fluida.
Perguntas frequentes
Clamp funciona para espaçamentos também?
Sim, e é muito útil. Padding, margin, gap e width aceitam clamp. Espaçamento fluido elimina a necessidade de variáveis diferentes por breakpoint — um único token escala entre mobile e desktop.
Preciso de `html { font-size: 62.5%; }` para usar rem?
Não. Essa técnica (10px base) é um workaround antigo. Use o campo "base rem" na calculadora para informar qual é a base real do seu projeto. Com base 16px, 1rem = 16px.