Design / Responsivo
Gerador de CSS clamp() para tipografia e espaçamento fluidos
Informe o menor e o maior tamanho e as larguras da viewport em que cada um se aplica. Obtenha uma expressão clamp() em rem que escala suavemente entre eles, com uma tabela dos tamanhos em larguras de tela comuns.
Gerador de CSS clamp() para tipografia e espaçamento fluidos: A ferramenta traça uma linha reta entre os dois pontos: de 16 px em uma viewport de 320 px a 24 px em uma viewport de 1280 px, o tamanho cresce 0,8333 px a cada 100 px de largura. A linha é escrita como uma parte fixa em rem mais uma parte em vw, 0.8333rem + 0.8333vw, e clamp() mantém o valor entre 1rem e 1.5rem fora desse intervalo. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.
- Categoria
- Ferramentas para desenvolvedores
- Execuções
- No seu navegador
- Custo
- Grátis · sem cadastro
- Disponibilidade
- Pronto para usar
Roda inteiramente no seu navegador
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Largura de viewport | Tamanho |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
O valor do meio de clamp() é uma linha reta que passa pelos dois pontos fornecidos: ele adiciona uma quantidade fixa em rem a uma parcela da largura de viewport, fazendo o tamanho variar suavemente entre as duas larguras e parar nos limites fora delas. Usar rem na parte fixa mantém o tamanho responsivo à configuração de font-size do leitor. Isso funciona para qualquer medida: tamanhos de fonte, padding, espaçamentos ou margens.
Exemplo resolvido
Para um título que tenha 32 px em um celular de 375 px e 48 px em um desktop de 1440 px, a inclinação é 16 ÷ 1065 = 1,5023 px por 100 px, e a expressão é clamp(2rem, 1.6479rem + 1.5023vw, 3rem). Em um tablet de 800 px, o título terá 38,38 px.
Acessibilidade
A WCAG exige que o texto possa ser ampliado para 200%. Como parte de um tamanho fluido depende da viewport, inclinações muito acentuadas podem impedir que o zoom aumente bastante o texto; mantenha o maior tamanho em no máximo cerca de 2,5 vezes o menor e use o gerador de escala tipográfica para escolher etapas consistentes.
Como usar
- Informe o menor e o maior tamanho em px.
- Informe as larguras da viewport em que eles devem ser aplicados.
- Copie o valor de clamp() e confira os tamanhos na tabela.
Privacidade e limitações
Calculado no seu navegador.
Ferramentas relacionadas
Perguntas frequentes
Por que não usar apenas vw?
Um tamanho definido apenas em vw ignora a configuração de tamanho da fonte do leitor e pode ficar minúsculo em celulares ou enorme em telas largas. A parte em rem e os limites de clamp() corrigem os dois problemas.
clamp() funciona em todos os lugares?
Sim: todos os navegadores atuais oferecem suporte a clamp() desde 2020.
O tamanho pode ficar menor em telas mais largas?
Sim: informe um tamanho maior para a menor largura e a expressão subtrairá a parte em vw.
Ferramenta grátis · no seu navegador execuções · não precisa de conta