Textos responsivos com CSS clamp()

A função clamp() de CSS é a mais nova sensação para simplificar a definição de valores com as folhas de estilo. Como isso pode ajudar com textos responsivos (de maneira surpreende) é o que você vai saber agora.

O que á função clamp() de CSS?

Quando o assunto é web design responsivo, algumas perguntas muito comuns relacionadas a texto responsivo são comuns:

• Como deixar o texto responsivo?
• Como usar CSS para deixar o texto responsivo?
• Qual a melhor técnica para texto responsivo?
• Como especificar o tamanho para texto responsivo com CSS?
• E algumas outras similares…

Entra em cena uma nova função que vai ajudar a resolver muitos dos problemas relacionados a tamanho de texto responsivo com CSS.

CSS clamp() “prende” um valor entre um limite superior e um inferior, permitindo selecionar um valor intermediário dentro de uma faixa de valores entre um mínimo e um máximo definidos.

Estranhou esse termo “prende”? Se você souber o que é um “clamp” de verdade, as dúvidas começarão a se dissipar.

Agora ficou mais claro porque escolheram esse nome e porque é possível “prender” um valor entre um mínimo e um máximo? :)

A nova função de CSS nos permite trabalhar com comprimentos, frequência, ângulos, tempo, porcentagem, número e inteiros.

O que é uma excelente notícia, já que é a partir desse suporte que será possível conseguir textos responsivos de maneira muito fácil.

Para ser mais exato, com 1 linha de código!

Como usar CSS clamp() para texto responsivo

clamp() (que já tem uma boa página de documentação na MDN) pode ser usado para se trabalhar com tamanhos de fonte; permite definir um font-size que cresça com o tamanho da viewport, mas não fique abaixo de um tamanho de fonte mínimo ou acima de um tamanho de fonte máximo.

Em outras palavras, é possível conseguir tipografia responsiva (ou tipografia fluida, se preferir) com 1 linha de código, sem a necessidade de usar media queries.

A função clamp() aceita 3 parâmetros:

1. Valor mínimo
2. Valor preferencial (ou desejável)
3. Valor máximo

O valor mínimo é o menor dos informados; o limite mínimo no intervalo de valores permitidos. Se o valor preferencial for menor que esse valor, será utilizado o valor mínimo.

O valor preferencial será usado desde que o resultado esteja entre os valores mínimo e máximo.

O valor máximo é o maior valor de expressão, que será atribuído se o valor preferencial for maior que esse limite superior. As expressões podem ser funções matemáticas, valores literais ou outras expressões (como attr()).

Um detalhe interessante: para expressões matemáticas (adição, subtração, multiplicação e divisão), não é preciso usar a função calc() — e também é possível usar parênteses para estabelecer/alterar a ordem de computação.

Exemplo de texto responsivo com clamp()

Então, agora você já sabe que existe uma nova função CSS, clamp(), que aceita 3 parâmetros (valor mínimo, desejável e máximo) e que, dentre as diversas possibilidades que se abriram, uma delas é trabalhar com textos responsivos.

Mas, antes mesmo do advento de clamp(), já existiam muitas técnicas para textos responsivos (inclusive, já abordamos aqui no dpw sobre controle de tipografia em web design responsivo). Algumas delas, ainda válidas e bastante úteis, diga-se de passagem.

Mas a nova função chegou para facilitar bastante as coisas (ainda mais quando usada com outras novidades de CSS, como min() e max()).

font-size responsivo com unidades de viewport

Então, por exemplo, já era possível deixar um texto responsivo usando apenas:

p {
  font-size: 1vw;
}

vw é uma unidade de CSS moderno que equivale a 1/100 da largura da viewport. Então, com a definição dessa regra, o tamanho da fonte está atrelado ao tamanho da viewport.

Tem-se aí uma tipografia responsiva. Entretanto, há 2 problemas principais com essa técnica:

1. O texto pode ficar muito grande ou muito pequeno
2. Unidades de viewport puras em font-size podem trazer problemas de acessibilidade

calc() para ajudar com textos responsivos

É possível aprimorar a solução usando calc():

p {
  font-size: calc(1em + 1vw);
}

Dessa forma, a largura da viewport não define sozinha o tamanho da fonte, já que é feito um cálculo levando em consideração 1em.

O problema de a11y diminui, já que, com 1em na conta, o texto volta a crescer quando a pessoa aumenta a fonte do navegador (o web.dev recomenda justamente misturar uma unidade relativa ao vw). Entretanto, ainda fica a questão de, potencialmente, o tamanho de fonte ficar muito grande ou muito pequeno.

clamp() ao resgate!

Finalmente, com a nova função clamp(), a solução para texto responsivo se completa:

p {
  font-size: clamp(1em, 1em + 1vw, 2em);
}

Como visto acima, os 3 parâmetros significam, respectivamente, o valor mínimo do tamanho da fonte, o valor desejável e o valor máximo permitido.

Na prática, o que está acontecendo é: o tamanho da fonte especificado é 1em + 1vw, mas ele nunca será menor que 1em, nem maior que 2em.

Na figura abaixo, essa declaração virou uma bancada de medição: a posição do carro é a largura da viewport, a rampa é o valor 1em + 1vw e as duas porcas do batente são o mínimo e o máximo. Arraste sobre ela para mudar a viewport e use os botões para mexer nos limites.

O máximo no dobro do mínimo não é por acaso: o MDN recomenda que, em textos, o limite superior seja uma unidade relativa de pelo menos o dobro do inferior, para que o texto consiga chegar a 200% quando a página recebe zoom.

Assista ao vídeo no início do artigo para ver essa definição funcionando na prática (no vídeo, o máximo aparece como 1.5em).

Conclusão

Não é surpresa alguma para profissionais da área assistir a passos largos a evolução das tecnologias Web que trabalhamos no dia-a-dia.

A sensação do momento é a nova função clamp() de CSS, que permite, dentre muitas outras coisas, conseguir textos responsivos com apenas 1 linha de código!

É possível associar clamp() a soluções CSS já conhecidas e com novas tecnologias (como min() e max()) para alcançar resultados igualmente surpreendentes.

Mas isso já é assunto para outro artigo. ;)