# Textos responsivos com CSS clamp() > Crie textos responsivos com CSS clamp(). Tipografia fluida que escala suavemente entre tamanhos mínimos e máximos sem media queries. Aprenda! URL: https://dpw.dev/css/textos-responsivos-com-css-clamp/ Publicado em: 2020-05-13 Categoria: css Tags: web-design-responsivo Autor: Tárcio Zemel 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. [Vídeo no YouTube](https://www.youtube.com/watch?v=PTc7DPizD0M) ## O que á função `clamp()` de CSS? Quando o assunto é **[web design responsivo](/tag/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.
![Textos responsivos com CSS clamp(): a imagem de um "clamp" real.](/images/blog/textos-responsivos-com-css-clamp/real-clamp.webp)
"Oi, eu sou um clamp. Prazer."
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](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)) 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](/css/unidades-de-viewport-controle-tipografia-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: ```scss p { font-size: 1vw; } ``` `vw` é uma [unidade de CSS moderno](/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/) 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()`: ```scss 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 é resolvido, 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: ```scss p { font-size: clamp(1em, 1em + 1vw, 1.5em); } ``` 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 `1.5em`. Assista ao vídeo no início do artigo para ver essa definição funcionando na prática. ## 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. ;) --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml