¿Cómo se hace el tamaño máximo de fuente en CSS?

CSS no tiene max-font-size, por lo que si necesitamos algo que haga algo parecido, tenemos que ser complicados.

¿Por qué lo necesitarías? Bueno, font-sizeen sí mismo se puede configurar de forma dinámica. Por ejemplo, font-size: 10vw;. Eso es usar “unidades de ventana gráfica” para dimensionar el tipo, que se hará más grande y más pequeño con el tamaño de la ventana del navegador. Si tuviéramos max-font-size, podríamos limitar su tamaño (de manera similar en la otra dirección con min-font-size).

Una solución es utilizar una consulta de medios en un determinado punto de interrupción del tamaño de pantalla que establece el tamaño de fuente en una unidad no relativa.

body {  font-size: 3vw;}@media screen and (min-width: 1600px) {  body {     font-size: 30px;  }}

Hay un concepto denominado bloqueos CSS que se vuelve más sofisticado aquí, escalando lentamente un valor entre un mínimo y un máximo. Hemos cubierto eso. Puede ser como…

body {  font-size: 16px;}@media screen and (min-width: 320px) {  body {    font-size: calc(16px + 6 * ((100vw - 320px) / 680));  }}@media screen and (min-width: 1000px) {  body {    font-size: 22px;  }}

También hemos cubierto cómo se ha vuelto (o se volverá) mucho más simple.

Hay una max()función en CSS, por lo que nuestro ejemplo anterior se convierte en una sola línea:

font-size: max(30vw, 30px);

O duplíquelo con un mínimo y un máximo:

font-size: min(max(16px, 4vw), 22px);

Que es idéntico a:

font-size: clamp(16px, 4vw, 22px);

La compatibilidad del navegador para estas funciones es bastante escasa mientras escribo esto, pero Chrome la tiene actualmente. Llegará allí, pero mira la primera opción de este artículo si la necesitas ahora mismo.

Ahora que tenemos estas funciones, me parece poco probable que alguna vez obtengamos min-font-sizey max-font-sizeen CSS, ya que las funciones son casi más claras tal como están.