Gerador CSS clamp()
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);Ferramentas externas relacionadas
Alguns links são links de afiliados.
Ferramentas relacionadas
Crie um valor CSS clamp() fluido que escala suavemente entre um tamanho mínimo e máximo ao longo de uma faixa de viewport — ideal para tipografia e espaçamento responsivos. Insira os tamanhos, copie o resultado e verifique a visualização em tempo real. Tudo funciona no seu navegador.
Como usar
- Defina o tamanho mínimo e máximo em pixels.
- Defina a faixa de viewport em que deve escalar.
- Copie o valor clamp() gerado e verifique a visualização em diferentes larguras.
Como funciona
A ferramenta traça uma linha reta entre dois pontos: seu tamanho mínimo no menor viewport e seu tamanho máximo no maior. Essa linha se torna o valor preferido, escrito com um deslocamento em rem mais uma inclinação em vw. O clamp() então o bloqueia para que nunca fique abaixo do mínimo nem acima do máximo, dando escalonamento suave entre os dois breakpoints.
Recursos
Escalonamento verdadeiramente fluido
Os tamanhos interpolam suavemente entre breakpoints em vez de saltar com media queries.
Saída rem + vw
A saída usa rem e vw para respeitar as configurações de fonte do usuário e manter a acessibilidade.
Visualização em tempo real
Veja o tamanho em pixels calculado para várias larguras de viewport comuns.
Fonte raiz personalizada
Defina o tamanho da fonte raiz para que os valores rem correspondam ao seu projeto.
Pronto para copiar
Copie uma declaração completa de font-size diretamente para o seu CSS.
Quando usar
Tipografia fluida
Escale títulos e texto de corpo suavemente do mobile ao desktop.
Espaçamento e lacunas
Aplique a mesma ideia fluida ao padding, margens e lacunas de grade.
Escala tipográfica
Construa uma escala tipográfica responsiva onde cada passo escala com o viewport.
Consistência
Substitua pilhas de media queries por um único clamp() previsível.
Observações
- O viewport máximo deve ser maior que o mínimo.
- Os valores usam rem com base no tamanho da fonte raiz (16px por padrão).
- Inclinações muito acentuadas podem prejudicar a legibilidade em tamanhos intermediários.
- Tudo é executado no seu dispositivo; nada é enviado.
Perguntas frequentes
- O que o clamp() faz?
- clamp(min, preferido, max) mantém um valor entre um mínimo e um máximo enquanto permite que o valor preferido escale entre eles — perfeito para dimensionamento responsivo.
- Por que é melhor do que usar apenas vw?
- O vw simples continua encolhendo ou crescendo sem limite. O clamp() o limita para que o texto permaneça legível em telas muito pequenas e muito grandes.
- Por que rem em vez de px?
- rem respeita a configuração de tamanho de fonte do navegador do usuário, o que é melhor para acessibilidade do que pixels fixos.
- A tipografia fluida é acessível?
- Pode ser, quando se mantém um mínimo razoável e se evitam inclinações extremas. Usar rem também permite que os usuários dimensionem o texto. Sempre teste zoom e configurações de texto grande.
- Meus dados são enviados a um servidor?
- Não. O valor clamp() é gerado totalmente no seu navegador.