CSS Typography fluide avec clamp()

Publié le : 28 févr. 2024

Introduction

Clamp() fait partie des fonctions mathématiques CSS , elle permet de définir une valeur comprise entre deux bornes avec une valeur préférée.

On peut l’utiliser pour rendre une taille de police responsive ou pour définir des bornes pour d’autres propriétés CSS.

Le besoin initial

Avec les medias queries

Par exemple, pour adapter les tailles de typographie pour les différentes terminaux, on avait recours aux media queries.

:root {
  font-size: 16px;
}

h1 {
  font-size: 3rem;
  @media (width <= 768px) {
    font-size: 2rem;
  }
  @media (width <= 480px) {
    font-size: 1rem;
  }
}

Cela permet de définir des tailles de police en fonction de la taille de l’écran (avec des break-points). Cela fonctionne mais cela reste à assez fastidieux car on n’a pas d’adaptation fluide de la taille de la typographie.

Syntaxe

La fonction clamp() prend trois paramètres : une valeur minimale, une valeur préférée et une valeur maximale.

La valeur préférée est la valeur qui sera utilisée si elle est comprise entre les deux bornes.

On peut définir des bornes une taille de police qui s’adaptera de manière fluide en fonction de la taille de l’écran.

.selector {
  property: clamp(MIN, VAL, MAX);
}

Elle est résolue comme suit :

.selector {
  property: max(MIN, min(VAL, MAX)));
}

Remarque

Il est possible d’utiliser d’autres fonctions mathématiques comme calc() ou d’autres expressions comme attr().

Types de valeur

<length>

<percentage>

<length-percentage>

<color>

<image>

<url>

<integer>

<number>

<angle>

<time>

<resolution>

<transform-list>

<transform-function>

Typographie responsive

Un cas d’usage très courant de la fonction clamp() est la définition de tailles de police responsive.

Auparavant, on utilisait les media queries pour définir des tailles de police en fonction de la taille de l’écran.

h1 {
  font-size: clamp(1rem, 5vw, 2rem);
}

Simulateur

Pour comprendre comment sont calculées les tailles de votre police d’écriture, il y a un excellent simulateur de calcul :

Démo : Typographie fluide

Démo : container fluide

Liens

Tous les articles de CSS