Calculadora de Tipografia Fluida para CSS clamp()
Esta calculadora de tipografia fluida transforma duas larguras de viewport e dois tamanhos de fonte em um valor de CSS clamp() pronto para colar, fazendo o texto escalar suavemente em vez de saltar entre os breakpoints das media queries. Foi criada para desenvolvedores e designers que querem um texto responsivo que cresce junto com a tela.
Informe um viewport mínimo e máximo, escolha um tamanho mínimo e máximo, e a ferramenta faz a conta — inclinação, intercepto e o coeficiente em vw — e gera font-size e line-height prontos para produção em rem ou px. Uma pré-visualização ao vivo e predefinições prontas (H1–H6, Corpo, Pequeno) deixam você ajustar a escala antes de copiar.
Como usar a calculadora
Defina a faixa de viewport
Em Faixa de viewport, informe a Largura mín e a Largura máx do seu design. Uma faixa de 320px a 1440px cobre a maioria dos projetos; o texto escala de forma linear entre elas.
Defina o tamanho da fonte
Use os controles deslizantes ou digite o Tamanho mín (no menor viewport) e o Tamanho máx (no maior). Ou clique em uma predefinição — de H1 a H6, Corpo ou Pequeno — para carregar valores comprovados de tamanho e altura de linha.
Ajuste a altura da linha
Defina a altura da linha mín e máx. Títulos costumam pedir espaçamento mais justo (1,1–1,2) e o corpo de texto mais folgado (1,5–1,7). Se os dois valores forem iguais, é gerado um line-height estático único em vez de um clamp().
Escolha a unidade de saída
Em Configurações de saída, escolha rem (recomendado) ou px. Para rem, defina a Fonte base igual ao font-size raiz do seu projeto — normalmente 16px — para que as conversões fiquem precisas.
Pré-visualize e copie
Arraste o controle de viewport da Pré-visualização (320–1920px) para ver o texto de exemplo redimensionar e clique em Copiar para colocar o CSS na área de transferência.
Recursos
Geração de CSS clamp()
Gera font-size pronto para produção com clamp(), com a inclinação (vw) e o intercepto calculados corretamente em rem ou px.
Line-height fluido
Gera um clamp() correspondente para o line-height e recai em um valor estático limpo quando o mín e o máx são iguais.
Controle da faixa de viewport
Defina as larguras mín e máx de viewport entre as quais sua tipografia escala, combinando com os seus próprios breakpoints.
Pré-visualização interativa
Um controle deslizante de viewport de 320px a 1920px redimensiona o texto de exemplo em tempo real para você ver exatamente como ele escala.
8 predefinições de tipografia
Um clique carrega faixas sensatas de tamanho e altura de linha para os títulos H1–H6, corpo de texto e texto pequeno.
Saída em rem / px
Alterne entre saída em rem e px, com font-size base configurável para que os valores em rem fiquem precisos na sua configuração.
Detalhamento da fórmula
Mostra a matemática passo a passo — inclinação, coeficiente vw, intercepto e conversão para rem — para você conferir o resultado.
Cópia com um clique
Copie todo o CSS de font-size e line-height para a área de transferência com um único botão.
Perguntas frequentes
O que é tipografia fluida?
A tipografia fluida faz o texto escalar suavemente entre os tamanhos de tela em vez de saltar entre breakpoints fixos. Usando o clamp() do CSS, o font-size se ajusta de forma proporcional conforme a largura do viewport muda — sem precisar de media queries.
Como o CSS clamp() funciona para o tamanho da fonte?
O clamp(mín, preferido, máx) limita um valor entre um mínimo e um máximo. O valor preferido usa uma unidade vw para crescer com o viewport, mas nunca fica abaixo do mín nem acima do máx. Por exemplo, font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) escala o texto de 16px em um viewport de 320px para 24px em 1440px.
Como calcular os valores de clamp para tipografia?
O valor preferido (do meio) é uma função linear da largura do viewport. Você calcula a inclinação a partir das diferenças de tamanho e de viewport, converte para um coeficiente em vw e descobre o intercepto em rem/px. Esta calculadora faz tudo isso automaticamente e mostra os cálculos no painel Fórmula.
Devo usar rem ou px na saída?
Use rem na maioria dos casos — o rem respeita a configuração de font-size do navegador do usuário, o que melhora a acessibilidade. Escolha px só quando precisar de um tamanho independente do font-size raiz. Com a saída em rem, defina a Fonte base igual ao font-size raiz do projeto para que as conversões fiquem exatas.
Quais larguras de viewport mín e máx devo usar?
Uma faixa de 320px a 1440px funciona bem na maioria dos projetos: 320px cobre os celulares mais comuns e menores, e 1440px é uma largura padrão de desktop. Ajuste os limites conforme as suas próprias análises ou especificações de design.
Por que a altura da linha mostra um valor estático em vez de clamp()?
Quando a altura da linha mín e máx é a mesma, não há nada para escalar, então a calculadora gera um único valor estático em vez de um clamp() desnecessário. Defina alturas de linha mín e máx diferentes se quiser que ela escale de forma fluida.
O clamp() tem suporte nos navegadores?
Sim. O clamp() do CSS tem suporte em todos os navegadores modernos, incluindo Chrome 79+, Firefox 75+, Safari 13.1+ e Edge 79+. Para navegadores muito antigos, adicione um font-size de fallback simples antes da declaração de clamp().
Por que usar clamp() em vez de media queries para texto responsivo?
As media queries mudam o tamanho em saltos abruptos a cada breakpoint e exigem um valor separado para cada elemento e tamanho de tela. Um único clamp() escala de forma contínua entre dois viewports, então o texto sempre fica bom e há muito menos CSS para manter.
Ainda não há comentários. Seja o primeiro a comentar!