6XC

Calculateur de typographie fluide — CSS clamp()

Génère un CSS clamp() qui fait évoluer la taille de police en douceur entre deux largeurs de viewport — sans breakpoints.

752 vues

CSS —

Aperçu en direct (redimensionnez la fenêtre) :

Almost before we knew it, we had left the ground.

La recette clamp()

La typographie fluide interpole linéairement entre une taille minimale sur petit viewport et une taille maximale sur grand viewport : pente = (police max−min) ÷ (viewport max−min), puis font-size: clamp(minRem, interceptRem + pente·100vw, maxRem). Pour 16→24 px entre des viewports de 375→1280 px, cela donne clamp(1rem, 0.793rem + 0.884vw, 1.5rem) — exactement 16 px à 375, exactement 24 px à 1280, fluide entre les deux, plafonné en dehors.

La partie rem de la valeur préférée compte pour l'accessibilité : une formule purement en vw ignore totalement le réglage de taille de police du navigateur de l'utilisateur, tandis que l'ordonnée à l'origine en rem préserve le zoom et les préférences de grand texte. Ce calculateur produit toujours la forme mixte.

Questions fréquentes

Quelle plage de viewport dois-je utiliser ?

375 px (un téléphone courant) jusqu'à la largeur maximale de votre contenu — souvent 1200-1440 px. En dehors de la plage, clamp() se fige au min/max, donc rien ne casse sur montres ou écrans ultra-larges.

Puis-je aussi l'utiliser pour les espacements ?

Oui — la même formule fonctionne pour le padding, les marges et les gaps. Générez-la avec vos valeurs min/max d'espacement et placez le clamp() dans une propriété personnalisée.

Pourquoi mon texte n'est-il pas exactement à la taille minimale sur mon téléphone ?

Vérifiez la largeur de viewport CSS réelle (pixels de l'appareil ÷ DPR). Un téléphone « 390 px » est plus large que le début de plage à 375 px, donc la taille est volontairement déjà légèrement au-dessus du minimum.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer