Como criar uma escala tipográfica fluida com clamp() no CSS

Uma escala tipográfica fluida são duas escalas fixas, uma para o celular e outra para o desktop, unidas por uma reta. O clamp() é como o CSS desenha essa reta e a interrompe nas duas pontas. A conta tem quatro passos, e vale fazê-la uma vez à mão para que os números de uma folha de estilo gerada deixem de parecer mágica.

Primeiro, dois termos

Escala tipográfica é um conjunto ordenado de tamanhos de fonte obtido multiplicando um tamanho de corpo por uma razão, uma vez a cada degrau. Com razão 1.25, um corpo de 19px dá 23.75px no degrau seguinte, 29.69px no próximo, e assim por diante.

Tamanho fluido é um tamanho que cresce em linha reta com o viewport entre duas larguras e fica parado fora delas. Em CSS, ele é escrito clamp(minimum, preferred, maximum), em que o valor preferido mistura um comprimento fixo com uma unidade de viewport.

Monte a escala com a ferramenta

1. Abra o Type scale generator e escolha primeiro a fonte, em Typeface (fonte). Cada família da lista mostra a sua x-height, e todas as medidas mais abaixo dependem da família; escolhê-la por último significa ler os números duas vezes.
2. Defina Body size, narrow (corpo na tela estreita; de 12 a 24px, começa em 16) e Body size, wide (corpo na tela larga; de 14 a 28px, começa em 19).
3. Escolha Ratio, wide (razão na tela larga) entre sete botões, de 1.125 (Major second) a 1.618 (Golden ratio). A ponta estreita usa 1.2, o que o painel informa embaixo dos botões.
4. Defina Steps up (1 a 8) e Steps down (0 a 4), os degraus acima e abaixo do corpo. Os padrões são cinco e dois.
5. Defina Column width (largura da coluna) como porcentagem do viewport e leia Body line length (comprimento da linha do corpo), que conta os caracteres por linha em 360, 768, 1024, 1280 e 1440px.
6. Leia cada linha da escala: o tamanho na ponta estreita e na larga, e depois a cap-height e a x-height em pixels.
7. Escolha uma saída: CSS custom properties, Tailwind v4 @theme, SCSS map ou Design tokens (W3C DTCG). Pressione Copy scale na barra inferior. O botão Cap at …rem da barra copia um max-width que deixa o corpo com 66 caracteres por linha.

A conta do clamp(), feita por inteiro

Pegue os padrões da ferramenta para o degrau do corpo: 16px num viewport de 360px, 19px num viewport de 1440px, e o tamanho raiz padrão do navegador, de 16px.

Passo 1, a inclinação. Quantos pixels de tamanho de fonte por pixel de viewport: (19 − 16) ÷ (1440 − 360) = 3 ÷ 1080 = 0.0027778.

Passo 2, a inclinação como unidade de viewport. 1vw é 1% da largura do viewport, então multiplique por 100: 0.0027778 × 100 = 0.2778vw.

Passo 3, o intercepto. O tamanho de fonte que a reta daria num viewport de largura zero: 16 − 0.0027778 × 360 = 16 − 1 = 15px, e 15 ÷ 16 = 0.9375rem.

Passo 4, as pontas. 16 ÷ 16 = 1rem e 19 ÷ 16 = 1.1875rem.

Juntando tudo: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem).

Para conferir, coloque as larguras de viewport de volta na conta. O valor preferido é 15px mais 0.0027778 vezes o viewport:

Viewport	Valor preferido	O clamp() devolve
320px	15 + 0.89 = 15.89px	16px, o mínimo
360px	15 + 1 = 16px	16px
768px	15 + 2.13 = 17.13px	17.13px
1440px	15 + 4 = 19px	19px
1920px	15 + 5.33 = 20.33px	19px, o máximo

O degrau seguinte funciona do mesmo jeito, com números maiores. Estreito: 16 × 1.2 = 19.2px. Largo: 19 × 1.25 = 23.75px. A inclinação é 4.55 ÷ 1080 = 0.0042130, ou 0.4213vw. O intercepto é 19.2 − 0.0042130 × 360 = 19.2 − 1.5167 = 17.6833px, ou 1.1052rem. As pontas são 19.2 ÷ 16 = 1.2rem e 23.75 ÷ 16 = 1.4844rem.

Essas duas linhas, como a ferramenta as escreve na saída CSS com as configurações padrão (ela gera todos os degraus, do maior para o menor, com a regra de recorte depois deles):

:root {
  --step-md: clamp(1.2rem, 1.1052rem + 0.4213vw, 1.4844rem);
  --step-base: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem);
}

h1, h2, h3, h4, .trim {
  text-box: trim-both cap alphabetic;
}

As pontas ficam em rem para que um leitor que definiu um tamanho de fonte padrão maior no navegador continue recebendo esse tamanho. Só o termo do meio usa vw. A regra text-box remove o espaço que a fonte embute acima das maiúsculas e abaixo da linha de base, para que o título fique assentado na própria caixa. Ela chegou ao Baseline em todos os motores de navegador em agosto de 2026.

Por que as duas pontas usam razões diferentes

Com cinco degraus acima, a ponta estreita fica em 16 × 1.2⁵ = 16 × 2.48832 = 39.81px e a larga em 19 × 1.25⁵ = 19 × 3.0518 = 57.98px. Se o celular também usasse 1.25, o maior título dele teria 16 × 3.0518 = 48.83px, 9px mais alto numa tela de 360px de largura. Uma razão mais suave na ponta estreita mantém o topo da escala utilizável no celular sem deixar a escala do desktop tímida.

O tamanho que você define não é o tamanho que você vê

O font-size define a caixa em (em box), que é invisível. O que o leitor vê são as letras dentro dela, e as proporções delas pertencem à fonte. Cap height (altura das maiúsculas) é a altura de uma maiúscula reta, como o H, expressa como fração do tamanho da fonte.

Os dados de fonte da ferramenta dão à Inter uma cap height de 0.728 e uma x-height de 0.546, e à EB Garamond, 0.650 e 0.400. Aplique a mesma escala às duas:

Fonte	Maiúsculas em 57.98px	x-height em 19px	Caracteres por linha do corpo em 1440px
Inter	57.98 × 0.728 = 42.21px	19 × 0.546 = 10.37px	98
EB Garamond	57.98 × 0.650 = 37.69px	19 × 0.400 = 7.60px	122

Igualar as maiúsculas de 42.21px da Inter na EB Garamond exige 42.21 ÷ 0.650 = 64.94px. Os mesmos valores de clamp() produzem duas escalas de aparência diferente, e é por isso que a ferramenta mostra a cap-height e a x-height ao lado de cada degrau. Para ver o quanto a x-height varia entre famílias, leia a x-height em 872 famílias de fontes.

A falha que o clamp() esconde: o comprimento da linha

Um tamanho de fonte fluido e uma coluna definida como porcentagem do viewport crescem em ritmos diferentes, então a linha fica mais longa à medida que a tela fica mais larga, e nada na página parece quebrado.

Com os padrões da ferramenta (Inter, corpo de 19px na ponta larga, coluna em 62% do viewport), Body line length mostra 29, 58, 74, 89 e 98 caracteres nas cinco larguras, cada um medido no tamanho de corpo que o clamp() dá naquela largura. O último número é 1440 × 0.62 = 892.8px de coluna, divididos pela largura média de caractere da Inter, 0.478 × 19 = 9.082px, o que dá 98; o primeiro é 360 × 0.62 = 223.2px com o corpo de 16px da ponta estreita, 223.2 ÷ (0.478 × 16) = 29. O critério WCAG 1.4.8, de nível AAA, põe o teto em 80. Duas das cinco larguras passam dele. (Até outubro de 2026, a varredura media todas as larguras no tamanho da ponta larga e mostrava 25 na ponta estreita; escrever este guia revelou o erro.)

A fonte mais estreita piora a situação. O caractere médio da EB Garamond tem 0.385 em, então a mesma coluna comporta 892.8 ÷ (0.385 × 19) = 122 caracteres.

A solução é limitar a coluna, não encolher o texto. A sugestão da ferramenta com os padrões é 0.478 × 19 × 66 = 599.4px, ou seja, 599.4 ÷ 16 = 37.46rem, e o botão Cap at 37.46rem copia isso como uma linha de max-width.

Outras formas de fazer

Não existe método nativo do sistema operacional para montar uma escala tipográfica. A conta acima é a alternativa, e ela cabe numa planilha: uma linha por degrau e uma coluna para o tamanho estreito, o tamanho largo, a inclinação, o intercepto e o clamp() final. O que a planilha não vai dar é a cap-height e o comprimento da linha, porque eles dependem das métricas da própria fonte.

Como verificar o que sai da página

A escala é calculada na aba. A única requisição que ela faz é pela fonte que você escolhe: para qualquer família que não seja uma das poucas fontes de sistema comuns, como Arial e Georgia, ela carrega a folha de estilo da fonte no Google Fonts, o que significa que o nome da família é enviado. Os seus tamanhos e a sua razão, não. Eles ficam na barra de endereço depois de um #, a parte da URL que o navegador não envia, e você pode confirmar isso no painel Network das ferramentas de desenvolvedor enquanto move os controles deslizantes.

Próximo passo

Abra o Type scale generator com a sua fonte e o seu tamanho de corpo. Para descobrir o menor tamanho de corpo que as suas cores e a sua fonte aguentam, use antes o Type legibility checker.