Escala tipográfica modular e clamp() CSS fluido
Gere os tamanhos de fonte de uma escala modular e os valores do clamp() CSS para o texto crescer com a largura da tela.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
Fórmulas da escala e do clamp()
tamanho do degrau n = base × razão elevada a n
clamp(mínimo rem, intercepto rem + inclinação vw, máximo rem)
A inclinação é a diferença entre o tamanho máximo e o mínimo, multiplicada por 100 e dividida pela diferença entre as larguras. O intercepto é o tamanho mínimo menos o que a inclinação já contribui na largura mínima. A função clamp() vem do CSS Values and Units Module Level 4.
Exemplo com razão 1,250
| Dado | Valor |
|---|---|
| Base nas larguras 320 e 1280 px | 16,00 e 20,00 px |
| Degrau 3 (px) | 31,25 |
| Mínimo e máximo do degrau 3 | 1,9531 e 2,4414 rem |
| Inclinação e intercepto | 0,8138 vw e 1,7904 rem |
Limites: escala tipográfica modular e clamp() CSS fluido
- 1 rem equivale a 16 px, o padrão dos navegadores; se o seu CSS mudou a fonte raiz, ajuste os valores.
- Abaixo da largura mínima o texto fica no mínimo, e acima da máxima fica no máximo; entre as duas ele cresce em linha reta.
- A página não monta o texto do clamp(): copie os quatro valores para a sua folha de estilo.
- Os degraus mostrados valem para a largura mínima; a largura máxima só entra no clamp(). A fonte da largura máxima não pode ser menor que a da mínima.
Perguntas frequentes
O que é escala tipográfica?
É uma sequência de tamanhos de fonte em que cada degrau é o anterior multiplicado por uma razão fixa, como 1,25 (terça maior).
Como calcular o clamp css?
Informe o tamanho da fonte nas duas larguras de tela. A página devolve mínimo e máximo em rem, a inclinação em vw e o intercepto em rem.