Comment utiliser : Générateur d’échelle typographique
- Définissez la taille de base (généralement 16 px, celle de votre texte courant) et un ratio. Plus le ratio est grand, plus le contraste entre les titres est marqué.
- Choisissez le nombre de paliers en dessous (petits caractères, légendes) et au-dessus (de h4 à h1, titres d’affichage).
- Activez l’option Fluide pour utiliser une base et un ratio plus petits sur les téléphones, qui passent à l’échelle de bureau. Faites glisser le curseur de largeur d’écran pour prévisualiser.
- Copiez les variables CSS, la configuration
fontSizede Tailwind ou une map SCSS.
Qu’est-ce qu’une échelle modulaire ?
Une échelle typographique multiplie la taille de base par le même ratio à chaque palier : avec 16 px et 1,25, les paliers sont 16, 20, 25, 31,25, 39 px… Des tailles qui partagent un même ratio paraissent liées entre elles. C’est pourquoi les typographes ont emprunté leurs ratios à la musique : la tierce majeure (1,25), la quarte juste (1,333) et la quinte juste (1,5), ainsi que le nombre d’or (1,618).
- Petits ratios (1,125–1,2) : adaptés aux interfaces denses, aux tableaux de bord et à la lecture prolongée.
- Grands ratios (1,333–1,618) : adaptés aux pages marketing avec des titres larges et percutants.
Typographie fluide avec clamp()
Un titre parfait sur ordinateur est souvent trop grand sur un téléphone. Les paliers fluides interpolent entre une échelle mobile et une échelle de bureau : font-size: clamp(1.5rem, 1.28rem + 0.98vw, 2.44rem) reste au minimum sur les petits écrans, croît linéairement avec la fenêtre et s’arrête au maximum. Les valeurs sont exprimées en rem, elles respectent donc le réglage de taille de police du navigateur du visiteur. Pour des valeurs isolées, consultez le Calculateur clamp() ; pour convertir les unités, utilisez PX en REM.
Aussi recherché comme : échelle typographique, générateur d’échelle modulaire, générateur typographie fluide, taille de police fluide, clamp font-size générateur, échelle taille police tailwind, calculateur échelle typographique.
Outils complémentaires : Générateur d’échelle typographique
- Générateur CSS Grid — Définissez les colonnes, lignes et espacements, puis tracez sur les cellules pour créer des zones comme header, sidebar et main.
- Générateur Flexbox CSS — Visualisez précisément l'effet de chaque propriété flexbox : définissez la direction, le retour à la ligne, justify-content, align-items et l'espacement, ajoutez ou supprimez des éléments, et cliquez sur un élément pour régler son flex-grow, son shrink, sa basis, son order et son align-self.
- Générateur de couleurs Tailwind — Il vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes (de 50 à 950) intégrée à OKLCH, avec des indications de contraste et des options d'exportation vers Tailwind v3, v4, CSS et SCSS.
- Vérificateur de contraste — Saisissez une couleur de texte et une couleur de fond pour obtenir le ratio de contraste WCAG exact, la validation de chaque niveau, un score APCA et des corrections en un clic qui conservent votre teinte.