Tool Hub

Calculadora CSS clamp()

Fonte mín/máx · viewport → fórmula responsiva clamp()

Preview viewport: 800px

The quick brown fox jumps over the lazy dog.

24.00px @ 800px

CSS
font-size: clamp(1.000rem, 1.6667vw + 0.6667rem, 2.000rem);

Como usar

  1. Digite o tamanho de fonte mínimo em pixels e o tamanho de fonte máximo em pixels.
  2. Digite a largura de viewport mínima e a largura de viewport máxima onde esses tamanhos de fonte se aplicam.
  3. Arraste o controle deslizante de visualização para simular como a fonte dimensiona em diferentes larguras de viewport e leia o valor de pixel ativo.
  4. Copie a expressão clamp() gerada e cole em seu CSS.

Exemplos

  • Fonte mínima 16px, fonte máxima 32px, viewport mínima 320px, viewport máxima 1280px produz clamp(16px, 1.667vw + 10.667px, 32px).
  • Em uma visualização de viewport de 800px a exibição ativa mostra aproximadamente 23px, confirmando dimensionamento suave entre os dois extremos.

Verifique as saídas antes de usar em produção. Sem garantia — veja Termos.