Calculadora CSS Clamp

Continuar na ferramenta

Mais páginas desta ferramenta

Tipografia fluida com CSS clamp(): escale fontes sem media queries

espaçamento fluido CSS clamp padding gap

Espaçamento fluido com CSS clamp(): padding e gap que escalam com a tela

Espaçamento fluido com `clamp()` aplica a mesma lógica da tipografia fluida para propriedades de layout: padding, margin, gap, row-gap, column-gap. O resultado é um layout que respira proporcionalmente em qualquer tamanho de tela, de 320px a 2560px, sem uma única media query.

Por que espaçamento fluido melhora a experiência

Quando padding de seção é fixo (ex: 64px), em mobile fica proporcionalmente enorme e em telas ultra-wide parece insignificante. Com clamp, o padding escala entre, por exemplo, 24px em 320px viewport e 96px em 1440px. O ritmo visual da página se mantém coerente em toda a gama de dispositivos.
Para tokens de design system, defina variáveis fluidas no `:root` usando a saída exata da calculadora, por exemplo `--space-section: clamp(1.5rem, 6.4286vw + 0.2143rem, 6rem)` para um padding de seção que vai de 24px a 96px entre 320px e 1440px de viewport. Componentes usam `padding: var(--space-section)` e o sistema inteiro escala automaticamente, sem nenhuma media query dentro dos componentes individuais.
Espaçamento fluido tem um limite prático: o valor mínimo não pode encolher a ponto de comprometer a usabilidade em toque. O WCAG 2.2 define no critério 2.5.8 (Target Size Minimum) que alvos de toque devem ter pelo menos 24×24px CSS, exceto em casos específicos. Ao definir o mínimo de um `clamp()` para padding de botões ou gap entre itens clicáveis, garanta que o valor mínimo mantenha essa área mínima somada ao conteúdo interno, não apenas que o número pareça pequeno o suficiente visualmente.

Tokens de espaçamento fluido prontos

Padding de seção (24px → 96px)

Entrada: min: 24px @ 320px viewport, max: 96px @ 1440px viewport
Saída esperada: --space-section: clamp(1.5rem, 6.4286vw + 0.2143rem, 6rem);

Token para padding vertical de seções. Escala proporcionalmente entre mobile e desktop.

Gap de grid de cards (12px → 28px)

Entrada: min: 12px @ 375px, max: 28px @ 1280px
Saída esperada: --gap-cards: clamp(0.75rem, 1.768vw + 0.3356rem, 1.75rem);

Gap responsivo para grids. Evita compressão visual em telas pequenas.

Margem lateral de container (16px → 64px)

Entrada: min: 16px @ 360px viewport, max: 64px @ 1600px viewport
Saída esperada: --margin-container: clamp(1rem, 3.871vw + 0.129rem, 4rem);

Ideal para o respiro lateral de layouts largos, onde uma margem fixa parece apertada em ultra-wide e exagerada em mobile.

FAQ da ferramenta completa

O que é CSS clamp()?

É 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.

Como funciona a tipografia fluida com clamp?

Qual é a diferença entre clamp e media queries para tipografia?

Por que o valor preferido usa vw e rem juntos?

Posso usar clamp para outras propriedades além de font-size?

O que acontece abaixo do viewport mínimo?

Preciso definir `font-size` base no `html` para usar rem?

Clamp tem boa compatibilidade com navegadores?

Perguntas frequentes

Clamp aceita unidades mistas (px e rem)?

Não diretamente no mesmo parâmetro. Mas o browser converte automaticamente antes de avaliar. `clamp(1rem, 2vw + 0.5rem, 3rem)` funciona perfeitamente, o browser usa px internamente para comparação.

Posso usar clamp com dvh/dvw para espaçamentos full-screen?

Sim. Viewports dinâmicas (dvh, dvw) funcionam dentro do clamp. São especialmente úteis para alturas de seção hero que devem variar entre dispositivos e estados de browser.

Clamp para espaçamento respeita o mínimo de área de toque?

Só se você definir o mínimo pensando nisso. `clamp()` não sabe nada sobre WCAG, ele só interpola entre os dois números que você fornece. Cabe a quem configura garantir que o valor mínimo do padding, somado ao conteúdo interno do botão, chegue aos 24×24px recomendados pelo critério 2.5.8.

Próximos passos

Continuar na ferramenta

Abrir ferramenta completa

espaçamento fluido CSS clamp padding gap

Espaçamento fluido com CSS clamp(): padding e gap que escalam com a tela

Por que espaçamento fluido melhora a experiência

Quando padding de seção é fixo (ex: 64px), em mobile fica proporcionalmente enorme e em telas ultra-wide parece insignificante. Com clamp, o padding escala entre, por exemplo, 24px em 320px viewport e 96px em 1440px. O ritmo visual da página se mantém coerente em toda a gama de dispositivos.

Para tokens de design system, defina variáveis fluidas no `:root` usando a saída exata da calculadora, por exemplo `--space-section: clamp(1.5rem, 6.4286vw + 0.2143rem, 6rem)` para um padding de seção que vai de 24px a 96px entre 320px e 1440px de viewport. Componentes usam `padding: var(--space-section)` e o sistema inteiro escala automaticamente, sem nenhuma media query dentro dos componentes individuais.

Espaçamento fluido tem um limite prático: o valor mínimo não pode encolher a ponto de comprometer a usabilidade em toque. O WCAG 2.2 define no critério 2.5.8 (Target Size Minimum) que alvos de toque devem ter pelo menos 24×24px CSS, exceto em casos específicos. Ao definir o mínimo de um `clamp()` para padding de botões ou gap entre itens clicáveis, garanta que o valor mínimo mantenha essa área mínima somada ao conteúdo interno, não apenas que o número pareça pequeno o suficiente visualmente.

Tokens de espaçamento fluido prontos

Padding de seção (24px → 96px)

Entrada: min: 24px @ 320px viewport, max: 96px @ 1440px viewport
Saída esperada: --space-section: clamp(1.5rem, 6.4286vw + 0.2143rem, 6rem);

Token para padding vertical de seções. Escala proporcionalmente entre mobile e desktop.

Gap de grid de cards (12px → 28px)

Entrada: min: 12px @ 375px, max: 28px @ 1280px
Saída esperada: --gap-cards: clamp(0.75rem, 1.768vw + 0.3356rem, 1.75rem);

Gap responsivo para grids. Evita compressão visual em telas pequenas.

Margem lateral de container (16px → 64px)

Entrada: min: 16px @ 360px viewport, max: 64px @ 1600px viewport
Saída esperada: --margin-container: clamp(1rem, 3.871vw + 0.129rem, 4rem);

Ideal para o respiro lateral de layouts largos, onde uma margem fixa parece apertada em ultra-wide e exagerada em mobile.

FAQ da ferramenta completa

O que é CSS clamp()?

É 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.

Como funciona a tipografia fluida com clamp?

Qual é a diferença entre clamp e media queries para tipografia?

Por que o valor preferido usa vw e rem juntos?

Posso usar clamp para outras propriedades além de font-size?

O que acontece abaixo do viewport mínimo?

Preciso definir `font-size` base no `html` para usar rem?

Clamp tem boa compatibilidade com navegadores?

Perguntas frequentes

Clamp aceita unidades mistas (px e rem)?

Posso usar clamp com dvh/dvw para espaçamentos full-screen?

Sim. Viewports dinâmicas (dvh, dvw) funcionam dentro do clamp. São especialmente úteis para alturas de seção hero que devem variar entre dispositivos e estados de browser.