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

> theme.json génère désormais du clamp() CSS automatiquement pour une typographie fluide. Tutoriel complet pour configurer minViewportWidth et maxViewportWidth.

- Auteur : Clément Hadrot
- Publié le : 2023-09-21
- Mis à jour le : 2023-09-21
- Catégorie : Thèmes
- URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/fluid-typography-theme-json-clamp/

## L’essentiel

- WordPress 6.1 a introduit la clé typography.fluid dans theme.json
- clamp() est généré automatiquement, sans média query à écrire
- Chaque taille de la clé fontSizes peut être fluide indépendamment

É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.

> L'essentiel à retenir : WordPress 6.1 a introduit la clé typography.fluid dans theme.json ; clamp() est généré automatiquement, sans média query à écrire ; Chaque taille de la clé fontSizes peut être fluide indépendamment

## 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.