Calculadora CSS Clamp

Continuar na ferramenta

Mais páginas desta ferramenta

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

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.
O mínimo e o máximo do `clamp()` precisam ficar acessíveis ao zoom do navegador, e é aí que o `rem` importa mais do que parece. `rem` é relativo ao `font-size` do elemento raiz, então quando alguém aumenta o tamanho de fonte padrão do navegador (o ajuste de acessibilidade em `rem`, não o zoom de página), os extremos do clamp crescem junto. Se o mínimo e o máximo fossem escritos em `px`, eles ficariam travados no mesmo tamanho absoluto independente da preferência de fonte do usuário, contrariando o critério 1.4.4 (Resize Text) do WCAG 2.1, que exige texto redimensionável até 200% sem perda de conteúdo.

Presets de tipografia fluida prontos

H1 display (32px → 72px)

Entrada: min: 32px @ 320px viewport, max: 72px @ 1280px viewport
Saída esperada: font-size: clamp(2rem, 4.1667vw + 1.1667rem, 4.5rem);

Título principal responsivo. Cresce suavemente de mobile a desktop.

Corpo de texto (16px → 18px)

Entrada: min: 16px @ 375px, max: 18px @ 1440px
Saída esperada: font-size: clamp(1rem, 0.1878vw + 0.956rem, 1.125rem);

Ajuste sutil mas perceptível no conforto de leitura em telas grandes.

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

Devo usar clamp() em vw puro (sem rem) para simplificar?

Não é recomendado. `vw` puro no valor preferido é aceitável porque o `clamp()` já trava os extremos, mas se o mínimo e o máximo também forem `px` ou `vw` em vez de `rem`, o texto para de responder à preferência de tamanho de fonte do navegador. Mantenha `rem` nos dois extremos e reserve `vw` só para o termo do meio.

Próximos passos

Continuar na ferramenta

Abrir ferramenta completa

tipografia fluida CSS clamp

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

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.

O mínimo e o máximo do `clamp()` precisam ficar acessíveis ao zoom do navegador, e é aí que o `rem` importa mais do que parece. `rem` é relativo ao `font-size` do elemento raiz, então quando alguém aumenta o tamanho de fonte padrão do navegador (o ajuste de acessibilidade em `rem`, não o zoom de página), os extremos do clamp crescem junto. Se o mínimo e o máximo fossem escritos em `px`, eles ficariam travados no mesmo tamanho absoluto independente da preferência de fonte do usuário, contrariando o critério 1.4.4 (Resize Text) do WCAG 2.1, que exige texto redimensionável até 200% sem perda de conteúdo.

Presets de tipografia fluida prontos

H1 display (32px → 72px)

Entrada: min: 32px @ 320px viewport, max: 72px @ 1280px viewport
Saída esperada: font-size: clamp(2rem, 4.1667vw + 1.1667rem, 4.5rem);

Título principal responsivo. Cresce suavemente de mobile a desktop.

Corpo de texto (16px → 18px)

Entrada: min: 16px @ 375px, max: 18px @ 1440px
Saída esperada: font-size: clamp(1rem, 0.1878vw + 0.956rem, 1.125rem);

Ajuste sutil mas perceptível no conforto de leitura em telas grandes.

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