Fluid Typography

Definition

Technique qui fait varier la taille du texte de manière fluide entre un minimum et un maximum en utilisant clamp() et des unités viewport, sans breakpoints.

Analogie

Comme un élastique qui s'étire proportionnellement sans jamais être trop court ni trop long.

Exemple de code

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 4rem);
}
p {
  font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
}
/* Échelle fluide sans aucune media query */

Cas d'usage

Avoir une typographie qui s'adapte parfaitement à tous les viewports sans sauts brusques entre breakpoints.

Termes lies