Calculateur CSS clamp() & Typographie Fluide

Calculateur CSS clamp() & Typographie Fluide

Générez des expressions CSS clamp() prêtes à coller pour la typographie fluide et les tailles responsive. Définissez un viewport min et max, puis n'importe quel nombre de valeurs (tailles de police, espacements, hauteurs de ligne) avec leurs min et max. Le calculateur produit un clamp() qui interpole linéairement entre les deux largeurs et plafonne à chaque limite. Un aperçu en direct rend du texte d'exemple au viewport simulé pour vérifier la courbe. Des préréglages d'échelle (Major Third, Perfect Fourth, Golden Ratio…) génèrent une hiérarchie h1–h6 complète en un clic.

Qu'est-ce que la fonction CSS clamp() et pourquoi l'utiliser pour la typographie ?

clamp(MIN, PREFERRED, MAX) renvoie PREFERRED, sauf s'il est inférieur à MIN (alors MIN) ou supérieur à MAX (alors MAX). Pour la typographie, l'astuce consiste à rendre PREFERRED fluide via des unités vw — la taille croît linéairement avec le viewport entre les deux bornes.

Exemple : font-size: clamp(1rem, 0.857rem + 0.714vw, 1.5rem) donne 16px à 320px de large, 24px à 1440px, et reste plafonnée hors de cette plage.

Avantages par rapport aux media queries :
- Une déclaration au lieu de trois ou quatre.
- La taille évolue vraiment — pas de sauts aux breakpoints.
- Respecte le zoom utilisateur (avec rem pour MIN/MAX, ce que cet outil fait par défaut).
- Support navigateur depuis 2020 : Chrome 79, Safari 13.1, Firefox 75 — universel sur les navigateurs modernes.

Comment fonctionnent les calculs ?

Étant donné une taille min au viewport min (m1, v1) et une taille max au viewport max (m2, v2), on cherche une fonction linéaire f(x) = a·x + b passant par les deux points.

- Pente : a = (m2 − m1) / (v2 − v1)
- Ordonnée : b = m1 − a · v1

L'expression PREFERRED dans clamp() doit être du CSS valide ; on utilise donc des unités vw. Comme 1vw = viewport_width / 100, la formule devient :

PREFERRED = b + (a · 100) vw

En rem, b et MIN/MAX sont divisés par la taille de police racine (16px par défaut). Le coefficient de pente reste en vw : vw est relatif au viewport et ne dépend pas de la taille racine.

C'est la formule derrière Utopia et Modern Fluid Typography. Le calculateur arrondit à 3 décimales pour garder le CSS lisible.

Faut-il utiliser rem ou px pour MIN et MAX ?

Utilisez rem en production. Raisons :

- Respect du zoom utilisateur. Si quelqu'un fixe la taille par défaut à 20px (au lieu de 16) pour l'accessibilité, les valeurs rem suivent ; les px non. Verrouiller le texte à 16px ignore l'utilisateur et viole les recommandations WCAG.
- Cohérence d'échelle. Définir les tailles en rem maintient les proportions dans tout le document si vous ajustez la racine plus tard.
- Le composant vw gère le côté fluide quel que soit l'unité des constantes — c'est sur les bornes MIN/MAX que rem compte.

Utilisez px quand vous mesurez quelque chose où le pixel-perfect est l'objectif (icône précise, grille fixe). Pour le texte, rem gagne presque toujours.

Mon clamp() est-il accessible ? (zoom WCAG 1.4.4)

Le critère WCAG 2.x 1.4.4 (Redimensionnement du texte) exige que le texte puisse être agrandi jusqu'à 200% sans perte de contenu ni de fonction. Un clamp() peut échouer silencieusement — et être signalé par Lighthouse, axe ou un audit manuel — quand le terme vw domine et que la partie relative (rem) est trop petite ou négative. Comme vw dépend du viewport de mise en page (et non de la taille de police ni du zoom de l'utilisateur), si presque toute la valeur préférée vient de vw, le texte grossit à peine au zoom.

La règle appliquée par les auditeurs : conservez toujours une composante rem significative dans l'expression préférée. Un schéma sûr courant veut que la constante rem fournisse au moins la moitié de la valeur, afin que la doubler au zoom pousse encore le résultat vers 200%.

Cet outil effectue ce contrôle pour vous. Chaque ligne affiche un badge 'Zoom WCAG' : vert 'Zoom sûr' quand la valeur atteint encore ~200% à un zoom navigateur 2x, rouge 'Échec du zoom' sinon, et un avertissement quand vous exportez en px (le texte en px ignore totalement la préférence de police de l'utilisateur et n'est jamais sûr au zoom pour le corps de texte). Pour corriger une ligne en échec : passez l'Unité de Sortie en rem, relevez la borne la plus basse, ou élargissez l'écart entre MIN et MAX pour que la constante porte davantage la taille.

Quelle plage de viewport choisir ?

La plage fluide va du plus petit appareil supporté à la largeur typique de votre design. Combinaisons courantes :

- 320 → 1440 : très commun ; couvre iPhone SE jusqu'à un laptop / design 1440p.
- 360 → 1280 : 'mobile moderne' à desktop standard ; à préférer si vous n'optimisez pas pour les très petits écrans.
- 375 → 1920 : largeur iPhone de référence jusqu'au full-HD large.

Idée clé : prenez des valeurs en accord avec l'endroit où vit votre contenu. Hors plage, clamp() bloque sur MIN ou MAX — donc si votre viewport max est 1440 et qu'un utilisateur a un écran ultra-large 3440px, le texte reste à MAX. C'est généralement ce qu'on souhaite — le texte ne doit pas grandir indéfiniment sur un écran géant.

Qu'est-ce qu'une 'échelle typographique' et pourquoi en utiliser une ?

Une échelle typographique est un petit ensemble de tailles dérivées d'une taille de base et d'un ratio. Choisissez un ratio (ex. 1.250 — Major Third) et appliquez-le itérativement :

body = 16px
h6 = body × 1 = 16px
h5 = body × 1.25 = 20px
h4 = body × 1.25² = 25px
h3 = body × 1.25³ = 31.25px
h2 = body × 1.25⁴ = 39px
h1 = body × 1.25⁵ = 48.83px

Utiliser une échelle plutôt que des tailles arbitraires donne du rythme et de la cohérence visuelle. Le bouton 'Charger Échelle Typo' remplit les lignes avec une hiérarchie de six niveaux selon votre ratio aux viewports min et max. Vous ajustez ensuite chaque ligne. Ratios populaires :

- Minor Third (1.200) — subtil, dense.
- Major Third (1.250) — équilibré, défaut UI.
- Perfect Fourth (1.333) — éditorial classique.
- Augmented Fourth (1.414) — titres percutants.
- Perfect Fifth (1.500) — hiérarchie forte.
- Golden Ratio (1.618) — dramatique, couvertures éditoriales.

Quelle est la précision de l'aperçu en direct ?

L'aperçu rend chaque ligne à la taille que clamp() produirait à la largeur simulée (le curseur). Cette valeur est calculée en JavaScript avec exactement la même interpolation linéaire que le navigateur :

value = intercept + slope × viewport_px
bornée entre minPx et maxPx

Faites glisser le curseur entre 280 et votre viewport max pour voir le texte grandir ; au-delà de chaque borne, la taille se fige. L'aperçu est précis au pixel pour la largeur simulée, mais ne change pas avec votre fenêtre réelle — c'est le rôle du navigateur. Redimensionnez votre fenêtre ou ouvrez le mode appareil de DevTools pour vérifier sur un viewport réel une fois le CSS dans votre feuille de style.

Différence entre typographie fluide et media queries ?

Approche media query (ancienne) :

h1 { font-size: 32px; }
@media (min-width: 768px) { h1 { font-size: 40px; } }
@media (min-width: 1280px) { h1 { font-size: 56px; } }

La taille saute en trois paliers discrets aux breakpoints. Entre les breakpoints, elle reste statique.

Approche fluide (clamp) :

h1 { font-size: clamp(2rem, 1.4rem + 1.875vw, 3.5rem); }

La taille évolue continûment de 32px à 56px lorsque le viewport passe de ~320px à ~1440px, puis se fige aux deux extrémités. Une déclaration remplace trois media queries.

Le fluide est préféré aujourd'hui car : (1) pas de breakpoint intermédiaire gênant, (2) moins de CSS, (3) sensation plus naturelle. Conservez les media queries pour des layouts radicalement différents — la typographie fluide gère la taille, pas la structure.

Où utiliser les clamp() générés ?

Partout où CSS accepte une valeur de longueur :

- font-size — l'usage canonique.
- padding, margin, gap — pour un espacement fluide qui suit le viewport.
- width, max-width — pour des sections hero qui grandissent avec l'écran.
- line-height — bien qu'on le laisse souvent sans unité et qu'on le laisse suivre font-size.
- border-radius, gap dans grid, tout ce qui accepte une longueur.

Le Bloc CSS Complet utilise des custom properties CSS (--fs-h1, --fs-body, …) pour les référencer partout : font-size: var(--fs-h1). Cela conserve une source unique de vérité pour votre échelle fluide.

Aucune étape de build ou préprocesseur nécessaire ; les navigateurs modernes gèrent clamp() en natif.

Fonctionnalités Clés

• Calcule clamp(MIN, PREFERRED, MAX) pour n'importe quel couple viewport/valeur
• Multi-lignes — définissez h1 à small au même endroit
• Aperçu en direct avec viewport simulé déplaçable
• Préréglages d'échelle : Minor Third, Major Third, Perfect Fourth, Augmented Fourth, Perfect Fifth, Golden Ratio
• Sortie en rem (défaut) ou px pour MIN et MAX
• Taille de police racine configurable (16px par défaut) pour conversion rem exacte
• Sortie en bloc CSS complet avec custom properties (--fs-h1, --fs-body…)
• clamp() par ligne avec copie en un clic
• Calcul pixel-perfect sur n'importe quel viewport simulé
• Défauts pertinents : viewport 320 → 1440, hiérarchie h1–small
• Ajout et suppression de lignes à la volée
• JavaScript pur, sans bibliothèque externe
• Fonctionne hors-ligne après le premier chargement
• UI responsive, compatible mode sombre
• 100 % côté client — rien n'est envoyé à un serveur