Fixação de tipografia fluida

Gerar uma escala de fonte linear CSS entre duas larguras de viewport.

Seus valores

Expressão de fixação CSS

—

O valor CSS gerado é um valor inicial. Prefira unidades de texto relativas quando apropriado e teste o zoom, a escala de texto e o estouro.

Fórmula

Use m = 100(f₁−f₀)/(v₁−v₀) e b = f₀−mv₀/100. O tamanho fluido é clamp(f₀, b + m×vw, f₁); f indica os tamanhos de fonte e v indica as larguras da viewport.

Gerar uma escala de fonte linear CSS entre duas larguras de viewport.

Exemplo prático

Tamanho mínimo da fonte (px): 16
Tamanho máximo da fonte (px): 24
Largura mínima da viewport (px): 400
Largura máxima da viewport (px): 1200

Expressão de fixação CSS: clamp(16px, calc(12px + 1vw), 24px)
Coeficiente da viewport: 1 vw
Intercepto de pixel: 12 px

Escopo e limitações

O valor CSS gerado é um valor inicial. Prefira unidades de texto relativas quando apropriado e teste o zoom, a escala de texto e o estouro.

As entradas são verificadas quanto a valores ausentes e intervalos permitidos. Um resultado fora do intervalo numérico finito não é exibido. O arredondamento afeta a exibição, enquanto o cálculo usa a precisão numérica do modelo.

Verifique suas unidades e suposições antes de confiar em um resultado. Alterar um rótulo não converte uma moeda ou unidade física.

Versão da fórmula: 174bffea8b3a · Exemplo verificado: 2026-10-30

Metodologia