Como usar: Calculadora de braçadeiras
- Digite os tamanhos mínimo e máximo (em px ou rem) e as larguras da janela de visualização onde o redimensionamento deve começar e terminar.
- Copie o
clamp()valor — escolha a saída em rem (recomendado para acessibilidade) ou px. - Arraste o controle deslizante da janela de visualização para ver o tamanho exato em qualquer largura de tela e confira o cálculo passo a passo abaixo.
- Gere uma escala completa de tipo de fluido ou uma escala de espaço e copie-a como propriedades personalizadas CSS.
O que é o clamp() do CSS?
clamp(MIN, PREFERRED, MAX) retorna o valor preferencial, mas nunca menor que MIN nem maior que MAX. Com um valor preferencial que aumenta junto com a janela de visualização — como 0.8239rem + 0.7512vw — você consegue tamanhos de fonte e espaçamentos fluidos que se ajustam suavemente entre o tamanho de um celular e o de um desktop, sem precisar de um monte de media queries. Funciona em todos os navegadores modernos.
A fórmula, passo a passo
O dimensionamento fluido é uma linha reta entre dois pontos: (viewport mínimo, tamanho mínimo) e (viewport máximo, tamanho máximo). Para 16px em 375px e 24px em 1440px:
- Inclinação = (24 − 16) ÷ (1440 − 375) = 0,007512 — o tamanho aumenta 0,0075px por pixel da janela de visualização.
- parte em vw = inclinação × 100 =
0.7512vw, porque 1 vw é 1% da largura da janela de visualização. - Intercepta = 16 − 0,007512 × 375 = 13,183px =
0.8239remcom uma raiz de 16 px. - Resultado:
clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem). Numa janela de visualização de 768px, isso dá 13,183 + 0,007512 × 768 ≈ 18,95px.
Por que misturar rem e vw?
Um tamanho definido apenas por vw ignora o zoom do navegador e o tamanho padrão da fonte do usuário, o que pode fazer com que o site não atenda à norma WCAG 1.4.4 (Redimensionamento de texto). Manter um rem intervalo significa que o valor ainda responde quando alguém amplia a tela ou define uma fonte padrão maior. Como regra geral, se o máximo não for mais do que 2,5× o mínimo, o texto ainda pode chegar a um zoom de 200% — a calculadora sinaliza intervalos que ultrapassam isso.
Escalas fluidas de fonte e espaçamento
Em vez de calcular cada título separadamente, define uma escala modular: cada etapa multiplica a base por uma razão. Uma razão menor no celular (por exemplo, 1,2, terça menor) e uma maior no desktop (por exemplo, 1,25, terça maior) mantêm os títulos impactantes em telas grandes sem sobrecarregar os celulares — a abordagem popularizada pelo Utopia. A escala espacial multiplica a mesma base (0,25×, 0,5×, 1×, 1,5×, 2×…) para que os espaços internos e externos aumentem na mesma proporção que o texto.
Como usar o clamp() no Webflow
- Diretamente no painel Estilo: o Webflow aceita funções matemáticas CSS nos campos de tamanho. Clique em Tamanho da fonte, Preenchimento ou Espaço, cole o
clamp(…)valor e aperte Enter. - Como variáveis: crie uma variável de Tamanho para cada etapa (por exemplo, “Etapa 0”, “Espaço M”) no painel Variáveis, cole o valor do clamp() e, em seguida, aplique a variável às fontes e espaços em todas as classes — altere uma vez e atualize em todos os lugares.
- Por meio de código personalizado: cole o
:root { … }dentro de uma<style>tag em Configurações do site → Código personalizado → Código do cabeçalho e, em seguida, digitevar(--step-0)em qualquer campo de tamanho. - Espaços flexíveis, como
clamp(2rem, …, 4rem)evitam que as seções pareçam muito grandes em tablets — use o chip de início rápido “Espaço”.
Vai converter as especificações de design primeiro? O Conversor de PX para REM transforma valores em pixels em rem.
Também pesquisado como: calculadora de resposta a fluidos, tamanho da fonte do fluid root, css clamp, tipografia fluida, escala de tipo de fluido, tamanho de fonte adaptável, vw rem não sei, utopia.
Ferramentas que combinam com: Calculadora de braçadeiras
- Type Scale Generator — Pick a base font size and a ratio — Minor Third, Major Third, Perfect Fourth, Golden Ratio — and get a harmonious set of font sizes for headings and body text.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- Conversor de unidades — Converta entre unidades métricas, imperiais e técnicas em dez categorias — com um conversor bidirecional e uma tabela que mostra todas as unidades de uma vez só.
Perguntas frequentes
Quais são as dimensões mínimas e máximas recomendadas para a área de exibição em uma tipografia fluida?
A saída do `clamp()` deveria usar `rem` ou `px`?
O `clamp()` consegue diminuir um valor em telas maiores?
clamp(), como o CSS exige.O clamp() funciona no Webflow?
var().Por que o tamanho da minha fonte adaptável não muda quando eu redimensiono o navegador?
vw isso inclui a largura da barra de rolagem vertical no desktop.