6XC

Calculadora de Tipografia Fluida — CSS clamp()

Gera um CSS clamp() que escala o tamanho da fonte suavemente entre duas larguras de viewport — sem necessidade de breakpoints.

747 visualizações

CSS —

Pré-visualização ao vivo (redimensione a janela):

Almost before we knew it, we had left the ground.

A Receita do clamp()

A tipografia fluida interpola linearmente entre um tamanho mínimo em um viewport pequeno e um máximo em um grande: inclinação = (fonte máx−mín) ÷ (viewport máx−mín), depois font-size: clamp(minRem, interceptoRem + inclinação·100vw, maxRem). Para 16→24 px entre viewports de 375→1280 px, isso dá clamp(1rem, 0.793rem + 0.884vw, 1.5rem) — exatamente 16 px em 375, exatamente 24 px em 1280, fluido no meio, travado fora do intervalo.

A parte em rem do valor preferido importa para a acessibilidade: uma fórmula puramente em vw ignora completamente a configuração de tamanho de fonte do navegador do usuário, enquanto o intercepto em rem mantém o zoom e as preferências de texto grande funcionando. Esta calculadora sempre gera a forma mista.

Perguntas Frequentes

Qual faixa de viewport devo usar?

375 px (um celular comum) até a largura máxima do seu conteúdo — geralmente 1200-1440 px. Abaixo/acima da faixa, o clamp() trava no mín/máx, então nada quebra em relógios ou telas ultra-largas.

Posso usar isso para espaçamento também?

Sim — a mesma matemática funciona para padding, margens e gaps. Gere com seus valores mín/máx de espaçamento e coloque o clamp() em uma propriedade customizada.

Por que meu texto não fica exatamente no tamanho mínimo no meu celular?

Verifique a largura real do viewport CSS (pixels do dispositivo ÷ DPR). Um celular de "390 px" é mais largo que o início da faixa de 375 px, então o tamanho já fica ligeiramente acima do mínimo — de propósito.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar