La tipografía fluida es la idea que font-size (y tal vez otros atributos de tipo, como line-height) cambian según el tamaño de la pantalla (o quizás las consultas de contenedor si las tuviéramos).
El truco principal proviene de las unidades de ventana gráfica. Puede establecer literalmente el tipo en unidades de ventana gráfica (p. Ej. font-size: 4vw), pero las fluctuaciones de tamaño son tan extremas que normalmente no es deseable. Eso se atenúa haciendo algo como font-size: calc(16px + 1vw). Pero aunque nos estamos volviendo sofisticados con los cálculos de todos modos, la implementación más común terminó siendo una ecuación para calcular el inglés simple:
Quiero que el tipo vaya entre 16 px en una pantalla de 320 px y 22 px en una pantalla de 1000 px.
Que terminó así:
html {
font-size: 16px;
}
@media screen and (min-width: 320px) {
html {
font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}
}
@media screen and (min-width: 1000px) {
html {
font-size: 22px;
}
} Eso es esencialmente establecer un mínimo y máximo tamaño de fuente para que el tipo no se encoja ni crezca a algo demasiado extremo. “Bloqueos CSS” fue un término acuñado por Tim Brown.
Mínimo y máximo ¡¿tu dices?! Bueno, da la casualidad de que las funciones para estos se han abierto camino en la especificación CSS en forma de min() y max().
Entonces podemos simplificar nuestra elegante configuración anterior con una sola línea y mantener los bloqueos:
html {
font-size: min(max(1rem, 4vw), 22px);
}De hecho, es posible que queramos detenernos allí porque, aunque tanto Safari (11.1+) como Chrome (79+) admiten esto en este momento, eso es tan amplio como el soporte que tendrá hoy. Hablando de eso, probablemente querrás deslizar un font-size declaración antes de esto para establecer un valor de respaldo aceptable sin funciones sofisticadas.
Pero mientras estemos superando los límites, hay otra función para simplificar aún más las cosas: clamp()! La abrazadera toma tres valores, un mínimo, un máximo y una unidad flexible (o cálculo o lo que sea) en el medio que usará en caso de que el valor esté entre el mínimo y el máximo. Entonces, nuestro one-liner se vuelve aún más pequeño:
body {
font-size: clamp(100%, 1rem + 2vw, 24px);
} Ese será Chrome 79+ (que no se ha enviado a estable, pero lo hará muy pronto).
El tío Dave está muy contento de que FitText tenga ahora unos pocos bytes en lugar de todo jQuery más 40 líneas más. Aquí está Dave lanzando propiedades personalizadas de CSS:
Acabo de ver esta bonita explicación:
Hoja de desarrollo matutina: CSS `clamp` se puede utilizar para tipografía fluida. 🎉
🔗 `abrazadera` en MDN: https://t.co/4xZpDfYoqB
Video alt: ejemplo que muestra cómo usar `clamp` para tipografía fluida / receptiva para un elemento h1 pic.twitter.com/9iiCxxXJO7
– Stefan Judis (@stefanjudis) 20 de abril de 2020