Typographie fluide
La typographie fluide fait varier la taille du texte en douceur avec la taille de l'écran, entre un minimum et un maximum définis, au lieu de sauter à des points de rupture fixes. Le CSS moderne le fait en une ligne avec clamp(), si bien qu'un titre grandit progressivement du mobile au bureau tout en restant dans des limites lisibles. Cela donne au texte un rythme naturel sur chaque écran.
Comment fonctionne clamp()
La fonction clamp() prend trois valeurs : un minimum, une valeur préférée et un maximum. Le navigateur utilise la valeur préférée mais ne descend jamais sous le minimum ni ne dépasse le maximum.
font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);- Minimum :
1.5remgarde les petits écrans lisibles. - Préférée :
1rem + 2vws'adapte au viewport. - Maximum :
2.5reml'empêche de devenir trop grand sur les larges écrans.
Pourquoi la formule rem plus vw
Mêler une base rem à un terme vw est ce qui garde la typographie fluide accessible. La partie rem répond encore au réglage de taille de police de l'utilisateur et au zoom du navigateur, tandis que la partie vw ajoute la mise à l'échelle selon l'écran. Utiliser du vw pur casserait le zoom, la combinaison compte donc.
Fluide ou par paliers
| Critère | Typo par paliers | Typo fluide |
|---|---|---|
| Mise à l'échelle | Saute à chaque point de rupture | Douce et continue |
| Code | Plusieurs media queries | Une ligne clamp() |
| Tailles intermédiaires | Parfois mal proportionnées | Toujours proportionnelles |
Construire une échelle typographique fluide
Appliquez la même approche à une échelle (corps, h3, h2, h1) avec des minimums et maximums adaptés à chaque niveau, pour que toute la hiérarchie grandisse ensemble en gardant ses proportions. Piloter ces valeurs par des propriétés personnalisées rend l'échelle facile à ajuster au même endroit.
Notes d'accessibilité
Définissez toujours un minimum assez grand pour rester lisible sur petits écrans, et gardez un terme rem dans la formule pour que le zoom et les préférences utilisateur fonctionnent encore. Testez à 200 % de zoom pour vérifier que rien n'est coupé ni bloqué.
La typographie fluide chez BeBranded
Chez BeBranded, nous utilisons la typographie fluide pour que titres et texte courant s'adaptent proprement du mobile au grand écran, avec des minimums accessibles. Cela fait partie du front-end systématique et évolutif de notre travail de design.
FAQ
Qu'est-ce que la typographie fluide ?
Comment clamp() fonctionne pour la taille de police ?
Pourquoi rem plus vw dans clamp() ?
La typographie fluide est-elle meilleure que les paliers ?
La typographie fluide nuit-elle à l'accessibilité ?
Webflow gère-t-il la typographie fluide ?
Outils associés
