Échelle typographique

échelle modulaire · type fluide · custom properties

Définissez les tailles minimale et maximale pour chaque niveau typographique et obtenez la formule clamp() correcte avec aperçu sur différentes largeurs de viewport.

Paramètres d'échelle
Taille de base 16px
Pas au-dessus de la base
Pas en dessous de la base
Root font-size
Format de sortie
Préfixe de variable
Rapport (ratio)
Ratio personnalisé
Aperçu police

                                    

                                    

                                        

                                    

                                

                            

                        

                    


                    

                        
La typographie fluide avec CSS clamp() est l'approche moderne de la gestion des tailles de texte dans les mises en page responsives : au lieu de définir font-size à chaque point de rupture, on spécifie une plage min-max et le navigateur interpole linéairement la valeur en fonction de la largeur du viewport.
Ce générateur vous permet de :
  • Définir les tailles minimale et maximale pour H1 à H6 et le corps du texte
  • Calculer automatiquement la formule clamp() correcte
  • Prévisualiser l'échelle sur différentes largeurs de viewport
  • Exporter les variables CSS personnalisées prêtes pour votre thème
Particulièrement utile dans le workflow Figma → WordPress : le designer travaille sur un cadre desktop fixe, mais le thème doit s'adapter sur mobile.
Utiliser l'échelle modulaire
  • Choisissez un ratio (ex. quarte juste 1,333 ou nombre d'or 1,618) pour le rythme entre les niveaux.
  • Définissez la taille de base et le nombre de pas au-dessus et en dessous.
  • L'export peut être en rem, px, rem avec commentaire px, ou clamp() prêt à l'emploi.
  • Collez le bloc :root dans votre feuille de style ou téléchargez le fichier .css.
Combiner échelle modulaire et type fluide maintient une hiérarchie cohérente sur tous les viewports.