Composition typographique fluide

Temps de lecture : 3 minutes

La typographie fluide, en développement web, est une approche qui permet de rendre le texte adaptable aux différentes tailles d’écran et résolutions. Contrairement à la typographie fixe, où la taille des polices est définie en unités fixes (comme les pixels), la typographie fluide utilise des unités relatives et des techniques flexibles pour assurer une lisibilité et une esthétique optimales sur divers appareils, depuis les smartphones jusqu’aux grands écrans.

Clamp()

Souvent utilisé pour la typographie fluide, la taille de la police s’adapte en fonction de la taille de l’écran, tout en restant dans une plage définie.

/

clamp(16px, 6vw, 96px) /* une valeur fluide minimal de 16px, une valeur fluide de 6% de la largeur de la fenêtre du navigateur et un maximum de 96px) */

Min() Max()

En CSS, min() et max() sont des fonctions utilisées pour déterminer les valeurs de propriétés en se basant sur des conditions définies. Elles sont particulièrement utiles pour créer des designs responsifs et flexibles.

min() prend un ensemble de valeurs comme arguments et retourne la plus petite de ces valeurs. Cela permet de définir une valeur de propriété qui ne dépasse jamais un certain seuil.

min(30px,3vw); /* une valeur fluide à 3% de la largeur de la fenêtre du navigateur mais ne dépassant jamais 30px */

À l’opposé, max() prend également un ensemble de valeurs et retourne la plus grande. Elle est utilisée pour s’assurer qu’une valeur de propriété ne tombe jamais en dessous d’un certain seuil.

max(24px,3vw); /* une valeur fluide à 3% de la largeur de la fenêtre du navigateur mais jamais inférieure à 24px */

Utilisations Communes en Design Web

Responsive Design

min() et max() sont très utiles dans la conception responsive pour s’adapter à différentes tailles d’écran, en particulier pour les propriétés comme la largeur, la hauteur, et la taille de la police.

Typographie Fluide

Pour les polices, ces fonctions permettent de créer une typographie qui s’adapte harmonieusement à la taille de l’écran sans devenir trop petite ou trop grande.

Exemple clamp(), min(), max

Ce code HTML et CSS crée une page web avec un design responsive en utilisant les fonctions CSS clamp(), min(), et max() pour gérer les tailles et les positions des éléments.

See the Pen Untitled by Jerome Mercier (@jmercier) on CodePen.0

Le code commenté

Les fonctions clamp(), min(), et max() sont utilisées pour ajuster dynamiquement la taille de la police et le positionnement des éléments en fonction de la taille de la fenêtre (viewport). Voici comment elles agissent sur les différents éléments :…

h1

• font-size: clamp(3rem, 10vw, 10rem);
  • La taille de la police de h1 est définie avec clamp(), ce qui signifie qu’elle sera au minimum de 3rem, au maximum de 10rem, et s’ajustera dynamiquement à 10vw (10% de la largeur du viewport) si cette valeur se situe entre 3rem et 10rem. Cela assure que la taille de la police reste proportionnelle à la taille de l’écran.

h2

• font-size: clamp(1rem, 3.33vw, 3rem);
  • De manière similaire à h1, la taille de la police de h2 est également réglée avec clamp(). Ici, elle varie entre un minimum de 1rem et un maximum de 3rem, avec un ajustement dynamique à 3.33vw.
• margin-left: clamp(4.66rem, 14vw, 14rem);
  • La marge gauche de h2 est définie avec clamp(). Elle ne sera pas inférieure à 4.66rem, pas plus grande que 14rem, et s’ajuste à 14vw si cette valeur est dans la plage spécifiée.

p (paragraphe)

• font-size: clamp(0.5rem, 1.666vw, 1.5rem);
  • La taille de la police du paragraphe est réglée avec clamp(), variant entre 0.5rem et 1.5rem, et s’ajustant à 1.666vw.
• margin-left: min(65px, 35vw);
  • La marge gauche du paragraphe utilise min(). Cela signifie que la valeur sera la plus petite entre 65px et 35vw, permettant ainsi au paragraphe de rester plus près du bord gauche sur les petits écrans.
• padding-top: max(70px, 10vw);
  • Le padding supérieur du paragraphe est défini avec max(). La valeur sera la plus grande entre 70px et 10vw, assurant que le paragraphe a suffisamment d’espace en haut dans différentes tailles d’écran.

div

• font-size: clamp(200px, 40vw, 800px);
  • La taille de la police pour div est extrêmement adaptable, avec clamp(), variant entre 200px et 800px, et s’adaptant à 40vw.
• margin-top: clamp(-70px, -30vw, -700px);
  • La marge supérieure de div est également réglée avec clamp(), ce qui signifie qu’elle sera au minimum de -70px, au maximum de -700px, et s’ajustera dynamiquement à -30vw.

Ces fonctions permettent une grande flexibilité et adaptabilité dans la mise en page, en particulier pour les tailles de police et le positionnement, rendant le design plus responsive et agréable sur différents appareils et tailles d’écran.

Ressources