Typographie fluide - Astuces CSS | Extraits de code 2025

Pour accéder directement au code, voici une implémentation fonctionnelle:

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

Cela vaut la peine de consulter notre article le plus récent sur la typographie des fluides simplifiée pour un dimensionnement pratique, serré et basé sur une fenêtre.

Cela passerait font-sized'un minimum de 16 pixels (dans une fenêtre de 320 pixels) à un maximum de 22 pixels (dans une fenêtre de 1000 pixels). Voici une démo de cela, mais en tant que Sass @mixin (que nous aborderons plus tard).

Voir l'exemple de base de stylo de type fluide w Sass par Chris Coyier (@chriscoyier) sur CodePen.

Sass a été utilisé juste pour rendre cette sortie un peu plus facile à générer, et pour le fait qu'il y ait un peu de mathématiques impliquées. Nous allons jeter un coup d'oeil.

En utilisant les unités de fenêtre et calc(), nous pouvons faire en sorte que la taille de la police (et d'autres propriétés) ajuste leur taille en fonction de la taille de l'écran. Ainsi, plutôt que d'avoir toujours la même taille ou de passer d'une taille à l'autre lors de requêtes multimédias, la taille peut être fluide.

Voici le calcul, crédit Mike Riethmuller:

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

La raison pour laquelle les mathématiques sont un peu compliquées est que nous essayons d'éviter que le type ne devienne jamais plus petit que notre minimum ou plus grand que notre maximum, ce qui est très facile à faire avec les unités de fenêtre.

Par exemple, si nous voulons que la taille de notre police se situe dans une plage où 14pxest la taille minimale à la plus petite largeur de la fenêtre 300pxet où 26pxest la taille maximale à la plus grande largeur de la fenêtre de 1600px, alors notre équation ressemble à ceci:

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

Le texte change de manière fluide à la largeur de la fenêtre

Voir le Pen JEVevK par CSS-Tricks (@ css-tricks) sur CodePen.

Pour verrouiller ces tailles minimales et maximales, il est utile d'utiliser ces calculs dans les requêtes multimédias. Voici quelques Sass pour vous aider…

Dans Sass

Vous pourriez faire un mixin (assez robuste), comme ceci:

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

Que vous utilisez comme ceci:

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

Voici un autre exemple de Mike, obtenir un rythme fluide juste:

Étendre l'idée aux en-têtes avec une échelle modulaire

Échelle modulaire, ce qui signifie que plus l'espace disponible est grand, plus la taille est différente. Peut-être dans la plus grande fenêtre avec, chaque en-tête de la hiérarchie est 1,4 fois plus grand que le suivant, mais au plus petit, seulement 1,05x.

Voir la vue:

«Fluid Type» i̶n̶s̶p̶i̶r̶e̶d̶ volé sur @MikeRiethmuller est désormais en ligne sur les blogs @CodePen. Y compris "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 octobre 2016

Avec notre mixin Sass, ça ressemble à:

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