Fluid typography avec theme.json : du clamp() CSS sans écrire de code

Écrire une typographie responsive correcte a longtemps demandé soit des médias queries multiples, soit des formules clamp() calculées à la main, avec leur lot d’erreurs d’arrondi. Depuis WordPress 6.1, sorti en novembre dernier, theme.json sait générer ce clamp() tout seul, à partir d’une poignée de valeurs déclarées dans la clé typography.fluid.

Sur les projets où j’ai activé cette fonctionnalité, le gain de temps est net : plus besoin de recalculer une formule à chaque changement de maquette, et le rendu reste cohérent sur toute la plage d’écrans. Voyons comment la configurer correctement, avec ses subtilités et ses limites actuelles.

Activer la typographie fluide dans theme.json

La fonctionnalité se pilote à deux niveaux. D’abord, un interrupteur global dans settings.typography.fluid, qui peut valoir simplement true ou accepter un objet précisant les largeurs de référence :

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": {
        "minFontSize": "16px",
        "maxViewportWidth": "1600px"
      }
    },
    "typography.fluid": true
  }
}

Dans la pratique, on active surtout true globalement, puis on affine viewport par taille de police si nécessaire.

Déclarer des tailles de police fluides

Chaque entrée de settings.typography.fontSizes peut désormais accepter, en plus d’une valeur fixe, un objet fluid avec un minimum et un maximum :

{
  "settings": {
    "typography": {
      "fontSizes": [
        {
          "slug": "medium",
          "name": "Moyen",
          "size": "1.125rem",
          "fluid": {
            "min": "1rem",
            "max": "1.25rem"
          }
        },
        {
          "slug": "x-large",
          "name": "Très grand",
          "size": "clamp(2rem, 5vw, 3.5rem)",
          "fluid": false
        }
      ]
    }
  }
}

WordPress transforme la première entrée en une formule clamp() calculée automatiquement entre le viewport minimal (par défaut 320px) et le viewport maximal (par défaut 1600px). La seconde entrée, avec "fluid": false, désactive volontairement la fluidité pour garder une taille figée, ou pour fournir sa propre formule clamp() manuscrite.

Comprendre la formule générée

Concrètement, pour la taille « medium » ci-dessus, WordPress génère une déclaration CSS proche de ceci :

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

La valeur centrale, exprimée en unités viewport, interpole linéairement entre le minimum et le maximum selon la largeur de la fenêtre. Il n’y a rien à calculer à la main : WordPress s’occupe de la conversion à partir des largeurs de viewport définies globalement ou localement.

Les limites à connaître

• La fluidité ne s’applique qu’aux tailles de police déclarées via fontSizes, pas aux marges ou paddings (une fonctionnalité équivalente pour l’espacement viendra plus tard)
• Le calcul suppose un navigateur compatible clamp(), ce qui exclut les très anciennes versions d’Internet Explorer, déjà hors périmètre pour la majorité des projets WordPress
• Les unités vw générées se basent sur la largeur du viewport, pas sur celle du conteneur : dans une mise en page à colonnes étroites, le rendu peut sembler disproportionné

Un exemple concret de configuration complète

Sur un thème bloc récent, voici une configuration que j’utilise couramment comme point de départ, avec des viewports resserrés pour éviter les écarts trop marqués :

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": {
        "minFontSize": "14px"
      },
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "fluid": { "min": "0.8rem", "max": "0.95rem" } },
        { "slug": "medium", "size": "1.125rem", "fluid": { "min": "1rem", "max": "1.25rem" } },
        { "slug": "large", "size": "1.75rem", "fluid": { "min": "1.5rem", "max": "2.25rem" } },
        { "slug": "x-large", "size": "2.5rem", "fluid": { "min": "2rem", "max": "3.5rem" } }
      ]
    }
  }
}

L’idée est de resserrer l’écart pour les petites tailles, où une variation trop marquée nuirait à la lisibilité, et de le laisser plus large pour les titres, où l’effet visuel de la fluidité est le plus perceptible.

Testez toujours le rendu à 320px et à 1600px de large avant de valider une palette de tailles fluides : c’est aux extrêmes que les mauvais réglages de viewport se voient le plus.

Pour aller plus loin

La typographie fluide de theme.json illustre bien la direction prise par WordPress depuis l’arrivée du Site Editor : remplacer des lignes de CSS répétitives par une déclaration structurée, interprétée directement par le cœur. Elle ne dispense pas de comprendre ce qui se passe sous le capot, mais elle évite l’essentiel des erreurs de calcul manuel et garantit une cohérence entre tous les blocs qui consomment ces tailles de police, du paragraphe au titre principal.