Fluid type scale: variáveis CSS com clamp()
Esta fluid type scale transforma cinco números em um bloco de propriedades personalizadas de CSS, uma para cada tamanho de fonte, escritas como clamp() com unidades rem e vw. Você informa a faixa de larguras de tela, o tamanho base em cada extremo e uma razão da escala, e cada passo, de --text-xs a --text-4xl, cresce de forma suave com a tela, sem media queries. Nada é enviado: o CSS é gerado no seu navegador.
Como criar a escala passo a passo
Preencha os cinco campos no topo. Viewport mínimo (padrão 320) e Viewport máximo (1200) são as larguras de tela, em pixels, em que o texto fica menor e maior. Tamanho base mínimo (16) e Tamanho base máximo (20) são o tamanho do texto corrido nessas duas larguras. A Razão da escala (1,25) define quanto cada passo cresce em relação ao de baixo. Cada campo tem uma caixa numérica e um controle deslizante.
- Informe a faixa de larguras de tela.
- Informe o tamanho base para telas estreitas e largas.
- Escolha a razão da escala.
- A caixa de CSS abaixo é atualizada enquanto você digita, então não há botão de envio. Quando o resultado estiver bom, selecione Copiar CSS e cole o bloco :root na sua folha de estilo.
Um campo que não pode ser usado mostra uma mensagem: o viewport máximo precisa ser maior que o mínimo, o tamanho base máximo maior que o mínimo, a razão 1 ou mais e todo número maior que 0. Use um passo em qualquer lugar em que você defina um tamanho, por exemplo h1 { font-size: var(--text-3xl); }
Pré-visualização em qualquer largura
Em Pré-visualização, arraste Largura da pré-visualização entre o viewport mínimo e o máximo. Cada passo aparece como a linha de exemplo “Texto que escala com suavidade” no tamanho que ele assume nessa largura, com o nome da variável e o tamanho em pixels, com o maior passo no topo.
Assim você avalia o salto entre o texto corrido e os títulos em um celular pequeno e em um desktop largo, antes de copiar qualquer coisa.
Como o tamanho de fonte com clamp() é calculado
Para cada passo, a ferramenta calcula o tamanho no extremo estreito (tamanho base mínimo vezes a razão elevada ao número do passo) e no extremo largo (tamanho base máximo vezes a mesma potência). Depois traça uma reta entre os dois pontos: a inclinação é a variação de tamanho dividida pela variação da largura do viewport, e o intercepto é o tamanho mínimo menos o viewport mínimo vezes a inclinação. A inclinação vira a parte em vw, o intercepto a parte em rem, e os dois tamanhos dos extremos viram o mínimo e o máximo do clamp(). Os valores são arredondados em 4 casas decimais.
Com os valores padrão, os passos valem em 320, 760 e 1200 px:
- --text-sm: 12,8 / 14,4 / 16 px
- --text-base: 16 / 18 / 20 px
- --text-lg: 20 / 22,5 / 25 px
- --text-xl: 25 / 28,13 / 31,25 px
Por que rem e vw em vez de px
Um tamanho escrito só em vw ignora o tamanho de fonte que o visitante escolheu no navegador e não cresce com o zoom. Como aqui cada número é dividido em uma parte em rem e outra em vw, o texto continua seguindo o tamanho base do usuário e aceita zoom, o que o mantém legível para quem precisa de letras maiores. A ferramenta nunca gera px.
Se o seu site define html { font-size: 62.5% } ou uma raiz diferente de 16 px, abra Avançado e altere Tamanho da fonte raiz para que 1rem corresponda.
Como escolher viewports, tamanhos base e razão da escala
A faixa padrão, de 320 a 1200, vai de um celular pequeno até um notebook. Escolha como máximo a maior largura em que você quer que o texto continue crescendo, porque acima dela o tamanho fica parado no máximo. Para o texto corrido, o par 16 px e 20 px é comum. A razão dá o caráter da escala:
- 1,2 (terça menor): passos suaves e próximos
- 1,25 (terça maior): equilibrada, o padrão
- 1,333 (quarta justa): contraste claro
- 1,5 (quinta justa): títulos marcantes
- 1,618 (proporção áurea): saltos muito grandes
Com razão 1, todos os passos têm o mesmo tamanho. A razão é um único número para os dois extremos, então a escala em 320 px e em 1200 px tem as mesmas proporções; só o tamanho base muda.
Em Avançado, Prefixo das variáveis (padrão --text) renomeia todas as propriedades. Nomes dos passos alterna entre sm, lg, xl (--text-sm, --text-base, --text-lg e assim por diante) e -1, 1, 2 (--text--1, --text-0, --text-1 e assim por diante). Passos menores (de 0 a 4, padrão 2) e Passos maiores (de 0 a 8, padrão 5) definem quantos tamanhos ficam abaixo e acima da base.
O que esta ferramenta não faz
Ela cria apenas a escala de tamanhos. Não há exportação para Tailwind ou outros formatos, ajustes por passo, razão separada para o extremo estreito e o largo, nem saída em px.
Perguntas frequentes
O que é uma fluid type scale?
Uma fluid type scale é um conjunto de tamanhos de fonte que crescem suavemente com a largura da tela em vez de saltar nos breakpoints. Cada passo, como pequeno, base, grande e extragrande, recebe um tamanho mínimo para telas estreitas e um máximo para telas largas, e o tamanho intermediário segue uma reta. O gerador escreve cada passo como uma propriedade personalizada de CSS que você pode reutilizar no site inteiro.
Como usar clamp no CSS para o tamanho da fonte?
clamp(mín, preferido, máx) recebe três valores. O navegador usa o valor preferido, mas nunca fica abaixo do mínimo nem acima do máximo. Para texto, o valor preferido é uma quantidade em rem mais uma em vw, por exemplo clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Coloque isso em uma propriedade personalizada e escreva font-size: var(--text-base) onde precisar.
Como fazer um tamanho de fonte que se adapta à tela no CSS?
Declare os tamanhos uma vez como variáveis com clamp() e o texto muda de forma contínua quando a janela muda, sem media queries. Ajuste “Viewport mínimo” e “Viewport máximo” para as larguras em que você quer o menor e o maior tamanho, preencha “Tamanho base mínimo” e “Tamanho base máximo” e copie o CSS. Abaixo do viewport mínimo o texto fica no menor tamanho, e acima do máximo fica no maior.
Por que o tamanho de fonte com clamp() não funciona?
As causas mais comuns são uma unidade faltando em um valor, ausência de espaços ao redor do sinal de mais dentro do clamp(), um mínimo maior que o máximo ou um valor preferido escrito só em vw, que ignora a configuração de tamanho de fonte do usuário. As linhas geradas evitam os quatro casos: todo valor tem unidade, o sinal de mais tem espaços e o mínimo é sempre menor que o máximo.
Funciona como o Utopia fluid type scale calculator?
Usa a mesma ideia: os tamanhos são interpolados de forma linear entre um viewport estreito e um largo, e cada passo é um múltiplo do tamanho base pela razão. As diferenças: aqui há uma única razão para os dois extremos, não há ajustes por passo e a saída são apenas propriedades personalizadas de CSS, sem exportação para Tailwind ou outros formatos. Escolha esta ferramenta quando quiser o bloco :root rapidamente.
Terça maior ou quarta justa: qual razão da escala escolher?
A terça maior (1,25) é um bom padrão para páginas com bastante texto, porque os passos ficam próximos o bastante para os títulos não esmagarem o texto. A quarta justa (1,333) dá mais contraste entre os passos e combina com páginas de divulgação e títulos grandes. A terça menor (1,2) é ainda mais suave. Digite a razão em “Razão da escala” e confira a “Pré-visualização” antes de copiar.
Posso usar clamp() em todos os navegadores?
clamp() funciona em todas as versões atuais do Chrome, Edge, Firefox e Safari, e funciona desde 2020. Navegadores muito antigos ignoram uma declaração que não entendem, então, se precisar dar suporte a um deles, coloque antes da linha com clamp() uma linha com font-size fixo como alternativa.
Isto é um fluid type scale generator ou uma calculadora de clamp?
As duas coisas. Como fluid type scale generator, cria a escala completa de tamanhos, e como calculadora de clamp entrega cada valor já calculado. Tem quem procure por “calculadora css clamp” ou “calculadora clamp css”, e quem digite “fluid typography generator”, “css fluid typography generator” ou “clamp css online”: todas essas buscas levam ao mesmo lugar, que é informar cinco números e copiar o resultado.
O que eu digito é enviado a algum servidor?
Não. O navegador transforma os números em CSS na própria página, e nada é enviado nem guardado. Não há conta nem cadastro.
