{"id":81773,"date":"2025-12-01T10:27:19","date_gmt":"2025-12-01T09:27:19","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=81773&preview=true&preview_id=81773"},"modified":"2025-12-03T14:08:46","modified_gmt":"2025-12-03T13:08:46","slug":"typographie-fluide","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/typographie-fluide\/","title":{"rendered":"Modifier gracieusement la taille des caract\u00e8res gr\u00e2ce \u00e0 la typographie fluide"},"content":{"rendered":"

Il n’est pas aussi simple qu’il n’y para\u00eet de faire en sorte que le texte s’affiche correctement sur tous les \u00e9crans. Pendant longtemps, les concepteurs de sites web ont utilis\u00e9 des points de rupture media query pour redimensionner les polices, mais cette approche devient rapidement d\u00e9sordonn\u00e9e avec l’apparition de nouveaux appareils et de nouvelles tailles d’\u00e9cran.<\/p>\n

Depuis WordPress 6.1<\/a> (sorti en novembre 2022), il existe d\u00e9sormais une meilleure solution : la typographie fluide. Elle ajuste automatiquement les tailles de police d\u00e9finies dans votre fichier theme.json<\/code> afin qu’elles s’adaptent en douceur, quelle que soit la largeur ou la hauteur de l’\u00e9cran.<\/p>\n

Cette fonctionnalit\u00e9 ne se contente pas de modifier la taille des polices, elle ajuste \u00e9galement la hauteur des lignes, l’espacement des mots et m\u00eame l’espace blanc, ce qui rend votre site plus coh\u00e9rent, plus lisible et plus accessible sur tous les appareils.<\/p>\n

Cet article explique comment fonctionne la typographie fluide, ses diff\u00e9rences avec les points de rupture traditionnels, et comment l’impl\u00e9menter dans WordPress \u00e0 l’aide de theme.json<\/code> et CSS.<\/p>\n

Mais tout d’abord, regardons comment nous avions l’habitude de g\u00e9rer la typographie, et pourquoi la typographie fluide est une si grande am\u00e9lioration.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Typographie \u00e0 point de rupture et typographie fluide<\/h2>\n

Une bonne fa\u00e7on de comprendre la typographie fluide est de la comparer \u00e0 son pr\u00e9d\u00e9cesseur, la typographie \u00e0 point de rupture, qui utilise des requ\u00eates m\u00e9dia ciblant des largeurs d’appareil sp\u00e9cifiques pour le dimensionnement des polices.<\/p>\n

Typographie par points de rupture<\/h3>\n

En r\u00e8gle g\u00e9n\u00e9rale, les points de rupture sont des plages sp\u00e9cifiques de largeurs d’affichage, g\u00e9n\u00e9ralement d\u00e9finies en pixels. Une approche courante consiste \u00e0 d\u00e9finir trois points de rupture principaux pour les \u00e9crans de t\u00e9l\u00e9phone portable, d’ordinateur portable et d’ordinateur de bureau.<\/p>\n

Voici les param\u00e8tres typiques des points de rupture pour les ordinateurs portables dans un fichier CSS<\/a> :<\/p>\n

@media (min-width: 48em) and (max-width: 74.9375em) {\n  body {\n    font-size: 1.125rem;\n    line-height: 1.6;\n  }\n  h1 {\n    font-size: 2rem;\n  }\n}<\/code><\/pre>\n
Bien que cette m\u00e9thode fonctionne, elle pr\u00e9sente un inconv\u00e9nient majeur : avec l’apparition de nouveaux appareils et de nouvelles tailles d’\u00e9cran, la gestion de tous ces points de rupture devient rapidement insoutenable.<\/p>\n
\"Illustration
Illustration de la mani\u00e8re dont la typographie s’adapte en douceur aux points de rupture.<\/figcaption><\/figure>\n
Dans l’exemple GIF ci-dessus, lorsque l’\u00e9cran se r\u00e9tr\u00e9cit, le texte se redimensionne par sauts irr\u00e9guliers. Ce comportement \u00ab en escalier \u00bb entra\u00eene souvent une mise \u00e0 l’\u00e9chelle maladroite ou impr\u00e9visible, ce qui n’est pas id\u00e9al pour une typographie fluide et coh\u00e9rente.<\/p>\n
Typographie fluide<\/h3>\n
Avec l’introduction de la propri\u00e9t\u00e9 CSS clamp()<\/a><\/code> en 2019, ainsi que les unit\u00e9s d’affichage (vw<\/code> et vh<\/code>), une mise \u00e0 l’\u00e9chelle transparente et automatique est devenue possible.<\/p>\n
Celles-ci vous permettent de d\u00e9finir des tailles de police qui s’\u00e9chelonnent dynamiquement en fonction des dimensions de la fen\u00eatre de visualisation, ce qui \u00e9limine le besoin de points de rupture multiples.<\/p>\n
Voici un exemple de taille de police moyenne utilisant clamp()<\/code> :<\/p>\n
.has-medium-font-size {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);\n}<\/code><\/pre>\n
Nous examinerons plus en d\u00e9tail le fonctionnement de clamp()<\/code>, mais pour l’instant, consid\u00e9rez-le comme une formule qui d\u00e9finit des tailles de police minimales, pr\u00e9f\u00e9rentielles et maximales, garantissant ainsi une mise \u00e0 l’\u00e9chelle fluide du texte sur l’ensemble des \u00e9crans.<\/p>\n
\"D\u00e9monstration
D\u00e9monstration d’une typographie fluide.<\/figcaption><\/figure>\n
Dans ce GIF, lorsque la fen\u00eatre se r\u00e9tr\u00e9cit, le texte s’adapte de mani\u00e8re fluide. Il n’y a pas de sauts ou de changements de taille soudains.<\/p>\n
C’est ce comportement fluide qui fait de la typographie fluide un tel bond en avant par rapport \u00e0 la conception bas\u00e9e sur des points de rupture. Au lieu d’ajuster le texte par \u00e9tapes, elle permet une mise \u00e0 l’\u00e9chelle transparente qui semble naturelle sur tous les appareils.<\/p>\n
Mais le redimensionnement en douceur n’est qu’un d\u00e9but. La typographie fluide offre plusieurs autres avantages qui facilitent la cr\u00e9ation de designs flexibles, coh\u00e9rents et accessibles.<\/p>\n
Arguments en faveur de la typographie fluide<\/h2>\n
Au fur et \u00e0 mesure que vous travaillerez avec la typographie fluide, les avantages suivants deviendront \u00e9vidents.<\/p>\n
R\u00e9activit\u00e9 par d\u00e9faut<\/h3>\n
Le texte s’adapte automatiquement \u00e0 la fen\u00eatre de visualisation, ce qui \u00e9limine le besoin de points de rupture. Que votre site soit consult\u00e9 sur un t\u00e9l\u00e9phone, une tablette ou un \u00e9cran ultra-large, la taille des polices s’ajuste naturellement sans CSS suppl\u00e9mentaire.<\/p>\n
Maintenance plus facile<\/h3>\n
Sans avoir \u00e0 recourir \u00e0 de multiples requ\u00eates de m\u00e9dia, votre code reste simple et lisible. Vous pouvez d\u00e9finir la taille des polices \u00e0 l’aide d’une simple \u00e9chelle de \u00ab\u00a0t-shirt\u00a0\u00bb, allant de petite \u00e0 tr\u00e8s grande, et l’appliquer de mani\u00e8re coh\u00e9rente \u00e0 l’ensemble de votre th\u00e8me.<\/p>\n
Conception coh\u00e9rente<\/h3>\n
Veillez \u00e0 ce que la taille de vos polices reste coh\u00e9rente sur l’ensemble du site, tant au niveau global qu’\u00e0 l’int\u00e9rieur des blocs individuels, si n\u00e9cessaire. D\u00e9finissez votre \u00e9chelle une fois pour toutes, et elle s’appliquera de mani\u00e8re transparente \u00e0 tous les blocs, mod\u00e8les et gabarits.<\/p>\n
Am\u00e9lioration de l’accessibilit\u00e9 et de la lisibilit\u00e9<\/h3>\n
Comme la typographie fluide s’adapte en douceur, le texte s’affiche toujours \u00e0 une taille lisible pour chaque appareil. Votre contenu est donc plus accessible, en particulier pour les utilisateurs ayant des pr\u00e9f\u00e9rences visuelles ou des niveaux de zoom personnalis\u00e9s dans leur navigateur.<\/p>\n
Conception \u00e0 l’\u00e9preuve du temps<\/h3>\n
La taille du texte n’\u00e9tant plus li\u00e9e \u00e0 des points de rupture artificiels, la mise \u00e0 l’\u00e9chelle de votre typographie est garantie pour fonctionner avec n’importe quelle taille d’\u00e9cran et n’importe quel point de vue.<\/p>\n
Contr\u00f4le de la vitesse de mise \u00e0 l’\u00e9chelle<\/h3>\n
La possibilit\u00e9 de contr\u00f4ler la vitesse \u00e0 laquelle le texte grandit ou r\u00e9tr\u00e9cit est d\u00e9finie par une valeur pr\u00e9f\u00e9rentielle qui \u00e9volue en fonction de la largeur de la fen\u00eatre de visualisation.<\/p>\n
Prise en charge des navigateurs<\/h2>\n
La fonction clamp()<\/code> est bien prise en charge par tous les navigateurs<\/a> modernes, y compris les versions actuelles de Chrome, Edge, Firefox et Safari.<\/p>\n
Toutefois, si vous avez besoin d’une couverture \u00e0 100 %, vous devrez inclure une solution de repli pour les anciens navigateurs tels qu’Internet Explorer 11 et les versions de Safari et de Chrome ant\u00e9rieures \u00e0 2020.<\/p>\n
Voici comment proc\u00e9der :<\/p>\n
\/* Fallback (for IE11 and other old browsers) *\/\nli {\n  font-size: 1.25rem; \n}\n\n\/* Preferred (modern browsers) *\/\nli {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);\n}<\/code><\/pre>\n