La fonction css clamp est la manière la plus propre de créer des tailles de police qui grandissent et rétrécissent en douceur avec l'écran. Avant, on écrivait une pile de requêtes @media pour différents écrans et on ajustait font-size à la main dans chacune. Cette approche faisait sauter le texte entre les points de rupture et produisait du CSS difficile à maintenir. Une seule expression clamp(), en revanche, met en place une échelle fluide qui garde un titre lisible sur un petit téléphone et mesuré sur un écran géant.
Que fait réellement clamp() ?
La syntaxe prend trois valeurs : clamp(MIN, PRÉFÉRÉE, MAX). Le navigateur calcule la valeur préférée du milieu, mais le résultat ne descend jamais sous MIN et ne dépasse jamais MAX. Mathématiquement, c'est identique à max(MIN, min(PRÉFÉRÉE, MAX)), mais bien plus lisible.
h1 {
/* au moins 1.75rem, au plus 3.5rem, fluide entre les deux */
font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}La magie se cache dans l'expression du milieu. La partie 1rem + 4vw combine une base fixe (1rem) avec un composant relatif à la fenêtre (4vw, soit 4 % de la largeur de l'écran). À mesure que l'écran s'élargit, 4vw grandit et le texte suit le mouvement.
Pourquoi ne pas utiliser seulement vw ?
Écrire font-size: 5vw seul est tentant, mais cela pose deux problèmes sérieux. D'abord, sur de très petits écrans le texte devient illisible et sur de très grands écrans il devient incontrôlable — il n'y a aucune borne inférieure ni supérieure. Ensuite, et plus important : une taille basée uniquement sur vw ne réagit pas du tout lorsque l'utilisateur agrandit le texte dans son navigateur. C'est une violation d'accessibilité.
C'est précisément là que le mélange de rem et de vw montre sa valeur. En gardant un composant rem dans l'expression, cette partie grandit quand l'utilisateur augmente la taille de police du navigateur, et le texte reste extensible.
Calculer la bonne pente
Plutôt que d'estimer le chiffre « 4vw » à l'œil, vous pouvez définir les deux tailles souhaitées à deux largeurs d'écran et calculer la pente linéaire entre elles. Disons que vous voulez un texte de 16px sur un écran de 320px et de 24px sur un écran de 1280px.
- Pente = (24 − 16) / (1280 − 320) = 8 / 960 ≈ 0.00833 → en pourcentage
0.833vw - Ordonnée à l'origine (base) = 16 − 0.00833 × 320 ≈ 13.33px →
0.833rem(en supposant une base de 16px)
p {
font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);
}Si vous ne voulez pas faire ce calcul à chaque fois, des outils comme Utopia ou le Fluid Type Scale Calculator génèrent des expressions clamp() prêtes à l'emploi à partir de vos paires écran/taille min et max. Une fois la logique comprise, ces outils font gagner un temps réel.
Construire une échelle typographique
Au lieu d'écrire un clamp() pour chaque élément, définir une échelle cohérente avec des propriétés personnalisées CSS est bien plus maintenable :
:root {
--step-0: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
--step-1: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
--step-2: clamp(1.56rem, 1.3rem + 1.3vw, 2.5rem);
--step-3: clamp(1.95rem, 1.5rem + 2.2vw, 3.75rem);
}
body { font-size: var(--step-0); }
h3 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h1 { font-size: var(--step-3); }Cette structure vous permet de gérer toutes les tailles de titres et de corps depuis un seul endroit. Modifiez une seule variable et tout le site se met à jour de façon cohérente.
Accessibilité : réussir le test de zoom
L'aspect le plus souvent négligé de la typographie fluide est le critère WCAG 1.4.4 Redimensionnement du texte : l'utilisateur doit pouvoir agrandir le texte jusqu'à 200 %. Si vous utilisez du vw pur, le texte ne grandit pas assez au zoom du navigateur car la largeur de la fenêtre ne change pas, et vous échouez à ce test.
Règle pratique : gardez toujours un composant rem dans la partie préférée (du milieu) de l'expression clamp() et ne poussez pas trop le ratio vw. Autour de 2.5vw et en dessous, c'est généralement sûr. Une fois terminé, zoomez à 200 % avec Ctrl/Cmd + et vérifiez que le texte grandit vraiment.
- longueur de ligne : limitez le corps de texte avec
max-width: 65ch; la taille fluide n'empêche pas les lignes de devenir trop longues. - hauteur de ligne : utilisez une valeur sans unité pour
line-height(ex.1.5) afin qu'elle reste proportionnelle quand le texte grandit.
Prise en charge des navigateurs et solution de repli
Bonne nouvelle : clamp() est pris en charge de manière stable dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) depuis des années, sans préfixe ni configuration. Si vous devez prendre en charge de très vieux navigateurs, un simple repli suffit :
h1 {
font-size: 2rem; /* les navigateurs qui ne comprennent pas clamp utilisent ceci */
font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}Si le navigateur ne comprend pas la seconde ligne, il l'ignore et retombe sur la valeur fixe de la première ; s'il la comprend, la seconde l'emporte. Cela ne nécessite même pas de bloc @supports supplémentaire.
Questions fréquentes
Faut-il calc() pour les opérations dans clamp() ?
Non. clamp() autorise déjà des opérations comme + et - en interne ; vous n'avez pas besoin d'envelopper 1rem + 4vw dans calc(). Utiliser calc() ne provoquera pas d'erreur non plus.
clamp() ne sert-il qu'à font-size ?
Absolument pas. La même logique fonctionne pour des padding, margin, gap, width fluides, et même border-radius. Rendre les espacements fluides aide le design à rester équilibré sur chaque écran.
Dois-je utiliser les unités de container query (cqw) au lieu de vw ?
Si un composant doit s'adapter à la largeur de son conteneur, cqw donne des résultats plus précis — mais cela impose de déclarer container-type sur le conteneur. Pour la typographie à l'échelle de la page, vw reste le choix le plus simple et le plus fiable.
Vous voulez une typographie équilibrée sur chaque écran ? Si vous avez besoin d'aide pour mettre en place une échelle typographique fluide et un frontend accessible, contactez-moi.