Vloeiende typografie - CSS-trucs | Codefragmenten 2025

Om meteen bij de code te komen, hier is een werkende implementatie:

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; ) )

Het is de moeite waard om naar onze recentere post Simplified Fluid Typography te kijken voor praktische, geklemde, op viewport gebaseerde typegrootte.

Dat zou opschalen font-sizevan minimaal 16px (bij een viewport van 320px) tot maximaal 22px (bij een 1000px-viewport). Hier is een demo van, maar dan als een Sass @mixin (die we later zullen behandelen).

Zie het Pen Base-voorbeeld van Fluid Type w Sass door Chris Coyier (@chriscoyier) op CodePen.

Sass werd alleen gebruikt om die output een beetje gemakkelijker te genereren, en het feit dat er een beetje wiskunde bij komt kijken. Laten we kijken.

Met behulp van viewport-eenheden en calc()kunnen we de lettergrootte (en andere eigenschappen) hun grootte laten aanpassen op basis van de grootte van het scherm. Dus in plaats van altijd dezelfde maat te hebben, of van de ene maat naar de andere te springen bij mediaquery's, kan de maat vloeiend zijn.

Hier is de wiskunde, credit Mike Riethmuller:

body ( font-size: calc((minimum size) + ((maximum size) - (minimum size)) * ((100vw - (minimum viewport width)) / ((maximum viewport width) - (minimum viewport width)))); )

De reden dat wiskunde een beetje ingewikkeld is, is dat we proberen te voorkomen dat het type ooit kleiner wordt dan ons minimum of groter dan ons maximum, wat heel gemakkelijk is met viewport-eenheden.

Als we bijvoorbeeld onze lettergrootte willen hebben in een bereik waar 14pxde minimumgrootte is bij de kleinste viewportbreedte van 300pxen waar 26pxde maximumgrootte is bij de grootste viewportbreedte van 1600px, dan ziet onze vergelijking er als volgt uit:

body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )

De tekst verandert vloeiend in de breedte van de viewport

Zie de Pen JEVevK door CSS-Tricks (@ css-tricks) op CodePen.

Om die minimum- en maximumgroottes vast te leggen, helpt het om deze wiskunde in mediaquery's te gebruiken. Hier is wat Sass om te helpen ...

In Sass

Je zou een (behoorlijk robuuste) mix kunnen maken, zoals deze:

@function strip-unit($value) ( @return $value / ($value * 0 + 1); ) @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) ( $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 ( & ( font-size: $min-font-size; @media screen and (min-width: $min-vw) ( font-size: calc(#($min-font-size) + #(strip-unit($max-font-size - $min-font-size)) * ((100vw - #($min-vw)) / #(strip-unit($max-vw - $min-vw)))); ) @media screen and (min-width: $max-vw) ( font-size: $max-font-size; ) ) ) )

Die je op deze manier gebruikt:

$min_width: 320px; $max_width: 1200px; $min_font: 16px; $max_font: 24px; html ( @include fluid-type($min_width, $max_width, $min_font, $max_font); )

Hier is nog een voorbeeld van Mike, waarin hij een vloeiend ritme precies goed krijgt:

Het idee uitbreiden naar headers met modulaire schaal

Modulaire schaal, wat betekent dat hoe meer ruimte er beschikbaar is, hoe dramatischer het verschil in grootte is. Misschien is bij de grootste viewport met elke header in de hiërarchie 1,4x groter dan de volgende, maar bij de kleinste, slechts 1,05x.

Zie uitzicht:

"Fluid Type" i̶n̶s̶p̶i̶r̶e̶d̶ gestolen van @MikeRiethmuller nu live op @CodePen blogs. Inclusief "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 oktober 2016

Met onze Sass-mixin ziet dat eruit als:

$mod_1: 1.2; // mobile $mod_2: 1.5; // desktop h1 ( font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h2 ( font-size: $mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h3 ( font-size: $mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font); )