Tipografia Fluida i Web Escalable amb CSS Clamp i Rem

Amb aquest article t'ensenyaré a:

1. Utilitzar la funció clamp() perquè la mida del text d'una web augmenti o disminueixi en funció de la grandària de la pantalla. 

2. Escalar una web –és a dir, augmentar o disminuir proporcionalment la grandària de tots els seus elements– perquè continuï lluint bé en pantalles grans. 

Aconseguir això abans era un maldecap. Amb clamp() ho aconseguirem amb una sola línia de codi. 

La web que estàs veient ara mateix té implementat clamp() per a ajustar la grandària tant de la tipografia com de molts altres elements en grandàries de pantalla superiors a 1550 px. Prova de canviar la grandària de la finestra i el veuràs en acció! 

Pst: Clamp com a verb en anglès significa “restringir a”. Ja veuràs ara que el nom té sentit.

Anem per feina.

Què és la funció CSS clamp()?

La funció clamp és una poderosa eina de CSS que permet establir un rang de valors possible per a unes certes propietats d'estil.  

Aquesta funció pren tres arguments: 

1. un valor mínim, 

2. un valor preferent i 

3. un valor màxim. 

La sintaxi és la següent:

property: clamp(mínimo, preferente, máximo);

Generalment, s'utilitza com a valor preferent una unitat relativa, com pot ser un percentatge o vw (que és una unitat relativa a l'ample de la pantalla).

Per exemple, en termes de tipografia, això pot usar-se per a establir una grandària de font que sigui fluida o adaptable a la grandària de la finestra del navegador.

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

En aquest exemple, la grandària de font dels paràgrafs mai serà inferior a 1 rem ni superior a 2 rem. Com a valor preferent li hem passat un càlcul:

1vw + 1rem

És a dir, li estem dient que volem un valor preferent igual a l'1% de l'ample de pantalla + 1 rem. Si aquest càlcul resulta en una grandària de font inferior a 1 rem o superior a 2 rem, s'imposaran els límits establerts.

Si prenem com a valor del rem 16px (que és el valor per defecte en els navegadors) i una grandària de pantalla imaginària de 1900 px ens quedaria així la fórmula:

clamp(16, 0.01 * 1900 + 8, 32) = 16, 27, 32

És a dir, que per a una grandària de pantalla de 1900px s'imposaria el valor preferent de 27px (que expressat en rem, seria 27/16 = 1,6875 rem), ja que és inferior al valor mínim i inferior al valor màxim.

Per què tant rem?

Potser t'ha estranyat l'ús de “+ 1 rem” en el càlcul del valor preferent.

Això ho fem principalment per a aconseguir que el valor resultant estigui en rem. Si no ho féssim, el valor estaria en píxels, ja que vw és relatiu a la grandària de pantalla i la grandària de pantalla el navegador l'expressa en píxels.

I rem per què?

Doncs perquè és una unitat de mesura accessible. No entraré ara en això perquè es mereix un article a part. Només et diré que si fins i tot expresses les grandàries en píxels deixis tot el que estàs fent i dediquis una hora a actualitzar-te. El món t'ho agrairà i el tu viuràs més feliç.

I ara ve la màgia: combinant clamp() amb rem

L'ús de clamp() amb unitats rem és una combinació màgica, especialment quan volem aconseguir un disseny que escala perfectament amb diferents grandàries de pantalla. 

Les unitats rem són mesures relatives a la grandària de la font arrel del document, que es defineix en l'element html. Normalment, la grandària de la font arrel s'estableix en 16 px per defecte, però es pot canviar segons les nostres necessitats.

Imagina que tens una icona en el teu web. A aquesta icona li has dit que vols que mesuri 2 rem.

Si 1 rem = 16 px, la icona mesurarà 2 * 16 = 32 px. Fins aquí tot ben normal.

Si ara anem i definim un valor a la grandària de font en l'arrel diferent del valor per defecte…
html {
font-size: 17px;
}
La teva icona ara mesurarà 2 * 17 = 34 px.

Ara imagina que pràcticament totes les grandàries de coses del teu web les has definit en rem. En modificar la grandària de font arrel, tot el que havies definit en rem  haurà canviat la seva grandària de manera proporcional.

Però, i si poguéssim fer que la mida de la font arrel s'adapti a la grandària de la finestra del navegador perquè tot s'escali de manera relativa a la grandària de la finestra? Doncs podem. Podem! Simplement, apliquem la fórmula que hem vist abans a la font-size definit en l'element html i ja el tenim.

html { font-size: clamp(1rem, 1vw + 0.5rem, 2rem);}

Aquest enfocament té una implicació sorprenent: totes les propietats d'estil que utilitzin rem s'adaptaran automàticament a la grandària de la finestra. Això ens permet escalar una web perquè s'adapti a grans grandàries de pantalla amb una sola línia de codi.

D'acord, però d'on trec els valors per a la funció clamp

Ja, no és massa intuïtiu, veritat?

Et dono uns consells:

• Valor mínim: tenint en compte que el valor per defecte és 16px, vols que elements i textos del teu web puguin reduir la seva grandària? Això és una mica perillós. Imagina que tens un text a 13px. Si permets que aquest text encongeixi, fàcilment passarà a ser massa petit per a poder llegir-se amb comoditat. El mateix et passarà amb les icones i altres elements ja per si mateix petits. Així doncs, jo et recomano que deixis 1 rem (16px) com a valor mínim.

• Valor màxim: quant vols que els elements del teu web puguin engrandir-se. De nou, va bé pensar en els textos com a exemple. Si un text tenia 16px de grandària, vols que pugui créixer fins a tornar-se de 50px? Ho dubto. Jo crec que un valor raonable estaria entre els 19px i els 22px.

• Valor preferit: aquí és més complicat. Pots llegir aquest article si t'agraden les matemàtiques. Si el que vols és anar al gra, usa aquesta calculadora. Amb la calculadora et serà facilíssim jugar una mica per a trobar la teva grandària perfecta. 
  
  

Conclusió

clamp() en combinació amb rem són dues eines que juntes ofereixen una forma poderosa i elegant d'aconseguir tipografies fluides i dissenys responsius. En entendre i aprofitar aquestes funcionalitats, podem crear llocs web que no sols són visualment atractius, sinó que també proporcionen una experiència d'usuari excepcional i accessible independentment de la grandària de la pantalla del dispositiu. 

Recorda que, a mesura que avança la tecnologia, també ho fan les expectatives dels usuaris. A l'era actual de diversitat de dispositius, tenir un disseny que s'adapti a totes les grandàries de pantalla i que sigui accessible ja no és una opció, sinó una necessitat. Així que anima't a jugar amb clamp() i rem i crea una cosa bonica!