Modifier gracieusement la taille des caractères grâce à la typographie fluide

Il n’est pas aussi simple qu’il n’y paraît de faire en sorte que le texte s’affiche correctement sur tous les écrans. Pendant longtemps, les concepteurs de sites web ont utilisé des points de rupture media query pour redimensionner les polices, mais cette approche devient rapidement désordonnée avec l’apparition de nouveaux appareils et de nouvelles tailles d’écran.

Depuis WordPress 6.1 (sorti en novembre 2022), il existe désormais une meilleure solution : la typographie fluide. Elle ajuste automatiquement les tailles de police définies dans votre fichier theme.json afin qu’elles s’adaptent en douceur, quelle que soit la largeur ou la hauteur de l’écran.

Cette fonctionnalité ne se contente pas de modifier la taille des polices, elle ajuste également la hauteur des lignes, l’espacement des mots et même l’espace blanc, ce qui rend votre site plus cohérent, plus lisible et plus accessible sur tous les appareils.

Cet article explique comment fonctionne la typographie fluide, ses différences avec les points de rupture traditionnels, et comment l’implémenter dans WordPress à l’aide de theme.json et CSS.

Mais tout d’abord, regardons comment nous avions l’habitude de gérer la typographie, et pourquoi la typographie fluide est une si grande amélioration.

Typographie à point de rupture et typographie fluide

Une bonne façon de comprendre la typographie fluide est de la comparer à son prédécesseur, la typographie à point de rupture, qui utilise des requêtes média ciblant des largeurs d’appareil spécifiques pour le dimensionnement des polices.

Typographie par points de rupture

En règle générale, les points de rupture sont des plages spécifiques de largeurs d’affichage, généralement définies en pixels. Une approche courante consiste à définir trois points de rupture principaux pour les écrans de téléphone portable, d’ordinateur portable et d’ordinateur de bureau.

Voici les paramètres typiques des points de rupture pour les ordinateurs portables dans un fichier CSS :

@media (min-width: 48em) and (max-width: 74.9375em) {
  body {
    font-size: 1.125rem;
    line-height: 1.6;
  }
  h1 {
    font-size: 2rem;
  }
}

Bien que cette méthode fonctionne, elle présente un inconvénient majeur : avec l’apparition de nouveaux appareils et de nouvelles tailles d’écran, la gestion de tous ces points de rupture devient rapidement insoutenable.

Dans l’exemple GIF ci-dessus, lorsque l’écran se rétrécit, le texte se redimensionne par sauts irréguliers. Ce comportement « en escalier » entraîne souvent une mise à l’échelle maladroite ou imprévisible, ce qui n’est pas idéal pour une typographie fluide et cohérente.

Typographie fluide

Avec l’introduction de la propriété CSS clamp() en 2019, ainsi que les unités d’affichage (vw et vh), une mise à l’échelle transparente et automatique est devenue possible.

Celles-ci vous permettent de définir des tailles de police qui s’échelonnent dynamiquement en fonction des dimensions de la fenêtre de visualisation, ce qui élimine le besoin de points de rupture multiples.

Voici un exemple de taille de police moyenne utilisant clamp() :

.has-medium-font-size {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}

Nous examinerons plus en détail le fonctionnement de clamp(), mais pour l’instant, considérez-le comme une formule qui définit des tailles de police minimales, préférentielles et maximales, garantissant ainsi une mise à l’échelle fluide du texte sur l’ensemble des écrans.

Dans ce GIF, lorsque la fenêtre se rétrécit, le texte s’adapte de manière fluide. Il n’y a pas de sauts ou de changements de taille soudains.

C’est ce comportement fluide qui fait de la typographie fluide un tel bond en avant par rapport à la conception basée sur des points de rupture. Au lieu d’ajuster le texte par étapes, elle permet une mise à l’échelle transparente qui semble naturelle sur tous les appareils.

Mais le redimensionnement en douceur n’est qu’un début. La typographie fluide offre plusieurs autres avantages qui facilitent la création de designs flexibles, cohérents et accessibles.

Arguments en faveur de la typographie fluide

Au fur et à mesure que vous travaillerez avec la typographie fluide, les avantages suivants deviendront évidents.

Réactivité par défaut

Le texte s’adapte automatiquement à la fenêtre de visualisation, ce qui élimine le besoin de points de rupture. Que votre site soit consulté sur un téléphone, une tablette ou un écran ultra-large, la taille des polices s’ajuste naturellement sans CSS supplémentaire.

Maintenance plus facile

Sans avoir à recourir à de multiples requêtes de média, votre code reste simple et lisible. Vous pouvez définir la taille des polices à l’aide d’une simple échelle de « t-shirt », allant de petite à très grande, et l’appliquer de manière cohérente à l’ensemble de votre thème.

Conception cohérente

Veillez à ce que la taille de vos polices reste cohérente sur l’ensemble du site, tant au niveau global qu’à l’intérieur des blocs individuels, si nécessaire. Définissez votre échelle une fois pour toutes, et elle s’appliquera de manière transparente à tous les blocs, modèles et gabarits.

Amélioration de l’accessibilité et de la lisibilité

Comme la typographie fluide s’adapte en douceur, le texte s’affiche toujours à une taille lisible pour chaque appareil. Votre contenu est donc plus accessible, en particulier pour les utilisateurs ayant des préférences visuelles ou des niveaux de zoom personnalisés dans leur navigateur.

Conception à l’épreuve du temps

La taille du texte n’étant plus liée à des points de rupture artificiels, la mise à l’échelle de votre typographie est garantie pour fonctionner avec n’importe quelle taille d’écran et n’importe quel point de vue.

Contrôle de la vitesse de mise à l’échelle

La possibilité de contrôler la vitesse à laquelle le texte grandit ou rétrécit est définie par une valeur préférentielle qui évolue en fonction de la largeur de la fenêtre de visualisation.

Prise en charge des navigateurs

La fonction clamp() est bien prise en charge par tous les navigateurs modernes, y compris les versions actuelles de Chrome, Edge, Firefox et Safari.

Toutefois, si vous avez besoin d’une couverture à 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érieures à 2020.

Voici comment procéder :

/* Fallback (for IE11 and other old browsers) */
li {
  font-size: 1.25rem; 
}

/* Preferred (modern browsers) */
li {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}

Fonctionnement de la typographie fluide

Au cœur de la typographie fluide se trouvent trois réglages : la taille minimale, la taille maximale et la taille préférée, qui est une échelle mobile entre les valeurs minimale et maximale, déterminée par la largeur de la fenêtre de visualisation.

La fonction clamp() utilise ces trois valeurs dans une seule déclaration :

font-size: clamp(min, preferred, max);

Cela permet de s’assurer que le texte n’est jamais trop petit sur les petits écrans ou trop grand sur les écrans larges. Par exemple, le texte ne devient jamais trop petit sur les petits écrans ou trop grand sur les écrans larges :

font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);

Dans cet exemple, la taille de la police commence à 1rem, augmente doucement au fur et à mesure que l’écran s’agrandit et s’arrête à 1,25rem.

Comment WordPress s’y prend-il ?

WordPress fait le gros du travail pour vous. Au lieu de calculer manuellement ces valeurs, vous pouvez définir la taille de vos polices directement dans theme.json.

Voici un exemple simplifié de la manière dont WordPress représente une taille de police en JSON :

{
  "fluid": {
    "min": "1rem",
    "max": "1.25rem"
  },
  "name": "Medium",
  "size": "1.125rem",
  "slug": "medium"
}

A partir de là, WordPress génère automatiquement le CSS :

font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);

Cela rend la mise en œuvre d’une typographie fluide rapide, cohérente et sans erreur. Il vous suffit de définir vos valeurs une fois dans theme.json, et WordPress se charge des calculs.

Termes courants

Avant de poursuivre, revenons sur quelques unités clés utilisées dans la typographie fluide. Chacune d’entre elles est relative à une autre unité.

Quelques mots sur theme.json

theme.json le fichier theme.json est piloté par les données, il génère donc du CSS automatiquement plutôt que de nécessiter une écriture manuelle.

Comme vous pouvez vous y attendre, le noyau de WordPress inclut un fichier theme.json qui définit les propriétés de base utilisées par le propre fichier theme.json d’un thème de bloc. C’est le cas de la façon dont WordPress implémente la typographie fluide.

Comme pour pratiquement toutes les propriétés de style, celles-ci peuvent être modifiées globalement ou par bloc à l’aide d’un thème enfant, ce que nous recommandons pour toutes les personnalisations.

Si vous n’êtes pas familier avec theme.json, nous vous conseillons vivement de lire notre article « Travailler avec des propriétés et des paires clé-valeur dans theme.json »

Comment WordPress utilise la typographie fluide dans TT5 (Twenty Twenty Five)

Lorsque le fichier theme.json d’un thème bloc inclut le réglage"fluid": true, WordPress génère automatiquement des règles de typographie fluide en utilisant la fonction CSS clamp(). Cette fonction est gérée par un algorithme intégré qui calcule une mise à l’échelle fluide pour chaque taille de police.

{
  "settings": {
    "typography": {
      "fluid": true
    }
  }
}

Si "fluid" est omis, WordPress utilise par défaut false, ce qui signifie que les tailles de texte restent fixes et n’évoluent pas de manière fluide.

Lorsque la typographie fluide est activée, TT5 définit cinq tailles de police prédéfinies. Chacune comprend des valeurs minimales et maximales que WordPress utilise pour générer le CSS final à l’aide de la fonction clamp().

Exemples pratiques

Maintenant que nous savons comment TT5 gère le type de fluide par défaut, examinons quelques scénarios réels dans lesquels vous pourriez vouloir le personnaliser ou l’étendre.

Pour ces exemples, nous utiliserons un thème enfant TT5, et comme toujours, assurez-vous que vos scripts sont correctement mis en file d’attente.

Augmenter toutes les tailles de police de 25

Si votre public préfère les textes plus grands (par exemple, sur les sites axés sur l’accessibilité ou les sites destinés aux personnes âgées), vous pouvez augmenter globalement la taille de toutes les polices.

Option 1 – Utiliser theme.json

Bien qu’il n’existe pas de bouton unique permettant de mettre à l’échelle toutes les polices, vous pouvez augmenter manuellement chaque taille de police de 25 %. Voici un exemple de configuration :

"typography": {
  "fontSizes": [
    {
      "fluid": false,
      "name": "Small",
      "size": "1.09375rem",
      "slug": "small"
    },
    {
      "fluid": { "max": "1.40625rem", "min": "1.25rem" },
      "name": "Medium",
      "size": "1.25rem",
      "slug": "medium"
    },
    {
      "fluid": { "max": "1.71875rem", "min": "1.40625rem" },
      "name": "Large",
      "size": "1.725rem",
      "slug": "large"
    },
    {
      "fluid": { "max": "2.5rem", "min": "2.1875rem" },
      "name": "Extra Large",
      "size": "2.1875rem",
      "slug": "x-large"
    },
    {
      "fluid": { "max": "3.75rem", "min": "2.6875rem" },
      "name": "Extra Extra Large",
      "size": "2.6875rem",
      "slug": "xx-large"
    }
  ]
}

Cette configuration suit le modèle de TT5 : la petite taille reste fixe, tandis que les autres tailles s’adaptent en douceur.

En coulisses, WordPress calcule toujours la valeur préférée (fluide) entre chaque min et max.

Option 2 – Utiliser style.css

Alternativement, vous pouvez tout mettre à l’échelle globalement avec une seule ligne dans votre feuille de style :

:root {
  font-size: 125%;
}

Cette ligne augmente la taille de la police racine de 25 %, ce qui a pour effet de mettre à l’échelle tous les éléments qui utilisent les unités rem.

Police de caractères fluide personnalisée pour un seul bloc

Vous pouvez également appliquer une taille fluide de manière sélective.

Par exemple, pour que tous les éléments de la liste (core/list) utilisent la taille moyenne au lieu de la taille grande par défaut, ajoutez ce qui suit à votre theme.json :

"styles": {
  "blocks": {
    "core/list": {
      "typography": {
        "fontSize": "var:preset|font-size|medium"
      }
    }
  }
}

Le résultat est une hiérarchie plus nette, où les éléments de liste affichent un texte légèrement plus petit que les paragraphes.

Définition de la typographie fluide dans style.css

Si vous travaillez avec un thème classique, vous définirez vos propres valeurs clamp() directement dans style.css.

Par exemple, voici comment vous pouvez augmenter les éléments d’une liste de 125 % de la taille de la police large :

li {
  font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}

Cela permet d’afficher une taille de police plus grande pour les éléments de la liste définis dans le fichier CSS. Comme vous pouvez vous y attendre, si vous travaillez avec un thème classique, vous devrez utiliser la propriété clamp() dans votre fichier styles.css.

Espacement fluide

La police de caractères n’est qu’un des facteurs à prendre en compte lors de l’utilisation de la typographie fluide.

Les dimensions du remplissage, de la marge et de l’espace entre les blocs (l’espace à l’intérieur d’un bloc de groupe) peuvent également être modifiées en douceur en utilisant les mêmes concepts que ceux utilisés pour la typographie fluide.

TT5 utilise ces réglages pour établir la taille des espaces.

"spacing": {
  "defaultSpacingSizes": false,
  "spacingSizes": [
    { "name": "Tiny", "size": "10px", "slug": "20" },
    { "name": "X-Small", "size": "20px", "slug": "30" },
    { "name": "Small", "size": "30px", "slug": "40" },
    { "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
    { "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
    { "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
    { "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
  ]
}

Les trois premières tailles (tiny, x-small, small) sont fixes, tandis que les plus grandes s’adaptent de manière fluide à l’aide de clamp().

Cela garantit que non seulement votre texte, mais aussi l’espacement de votre mise en page s’adaptent élégamment aux différentes tailles d’écran.

Résumé

Les points de rupture et la typographie fluide ont des objectifs différents. Lorsqu’elles sont utilisées ensemble, elles créent des mises en page compatibles avec l’avenir qui s’adaptent en douceur aux écrans, offrant ainsi des expériences cohérentes et lisibles pour tout le monde.

Si vous préférez ne pas faire le calcul à la main, plusieurs outils gratuits peuvent vous aider à affiner et à visualiser vos valeurs :

• Éditeur de typographie fluide moderne
• Calculateur de typographie fluide

Ces outils permettent de générer facilement des valeurs clamp() qui correspondent à votre échelle de conception, ce qui est particulièrement utile pour le développement de thèmes classiques.

Prêt à le voir en production ? Hébergez votre site WordPress sur Kinsta pour un TTFB rapide, un CDN intégré, et un cache edge, pour que votre typographie fluide s’affiche (et se charge) parfaitement partout. Commencez gratuitement pour votre premier mois.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.