Css clamp aplicado a texto

Esta función css permite escalar texto asignando valores mínimos, preferidos y máximos.

h2{
	font-size: clam(valor-minimo, valor-preferido, valor-máximo);
}

Aquí el valor importante es el valor preferido. Este debe ser un valor escalable (%, vw) de manera que se vaya adaptando, creciendo o disminuyendo en relación al tamaño del viewport (ancho de la ventana del navegador).

h2{
	font-size: clamp(1.25rem, 2vw, 1.875rem);
}

En el caso arriba expuesto el valor 2vw irá variando y cuando sea menor que 1rem (16px), aplicará ese valor. Cuando sea mayor que 1.875rem (20px), se aplicará el valor máximo. Hay que tener en cuenta que en este caso el valor base es de 16px body{ font-size: 16px; }

Mejor con un ejemplo

Demo en codepen

Aquí vemos como funciona, el primer texto emplea clamp(), el segundo solo el tamaño preferido.

En este ejemplo en concreto si mostramos el inspector de Firefox, en la pestaña "Computed" podemos ver el valor preferido en pixeles y como este va variando si modificamos el viewport.

Esto me ha servido para determinar cuándo el texto está por debajo del valor mínimo o por encima del valor máximo, con esto y unas media queries he creado una ayuda visual.

Cuando el valor preferido (2vw, de color gris) está por debajo de 1.25rem (20px) el texto será naranja y por encima de 1.875rem (30px) el texto será púrpura. Así comprobamos más facilmente que cuando se aplican los valores mínimos y máximos.

Conclusiones

En cierta manera esto solventa el problema cuando se emplean tipografías flexibles en un proyecto. Cierto que las tipografías flexibles tienen algunas ventajas, si os fijáis el texto flexibe, sin clamp() conserva el salto de linea siempre en la misma palabra, algo muy solicitado por los diseñadores, pero poco efectivo si trabajamos en versiones con idiomas o ese texto va cambiando.

Ciertamente es muy útil aplicado junto a otros elementos, de esta manera resulta mas fácil que todo un bloque escale sin necesidad de hacer cosas raras, pero creo que esto se debería aplicar a todos los elementos de una página para no perder la proporcionalidad entre ellos.