CSS Typography fluide avec clamp()

Introduction 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 Le besoin initial

Avec les medias queries 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 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 Types de valeur

<length>

<percentage>

<integer>

<number>

<angle>

<time>

Typographie responsive 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 Simulateur

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