Polices Fluides dans WordPress FSE : Vers une Typographie Plus Dynamique et Intuitive

La typographie occupe une place centrale dans le design web. Avec l’avènement du Full Site Editing (FSE) dans WordPress, une nouvelle ère de flexibilité typographique émerge grâce aux « polices fluides ». Contrairement aux polices variables, les polices fluides ne dépendent pas d’un ensemble prédéfini de variantes de poids ou de style. Elles s’adaptent de manière dynamique à l’environnement de visualisation. Historiquement, cette approche a été explorée pour répondre à la diversité croissante des appareils et tailles d’écran.

Déclaration et Configuration des Polices Fluides avec le fichier theme.json

Le fichier theme.json dans WordPress FSE permet une personnalisation poussée des thèmes, y compris la déclaration des polices fluides. Pour implémenter ces polices, on procède généralement comme suit :

{
  "typography": {
    "fluid": true,
    "fontSizes": [
      {
        "name": "C'est petit",
        "size": ".8rem",
        "slug": "small",
        "fluid": {
          "max": "1.2rem",
          "min": ".6rem"
        }
      }
      // Ajoutez d'autres tailles selon les besoins
    ]
  }
}

Cette structure de code démontre une façon simple d’intégrer des polices fluides. Ici, la taille de la police s’ajuste automatiquement en fonction de la largeur de la fenêtre du navigateur.

1. Dans l’objet "typography", il faut déclarer "fluid": true.
2. Avec "size", le réglage de base est défini.
3. Dans l’objet "fluid", ce sont les valeurs "max" et "min" qui déterminent respectivement le maximum et le minimum utilisé.

Démonstration en Ligne avec Ma Dernière Vidéo YouTube

Voir la vidéo de ma playlist YouTube dédiée à l’éditeur de site qui résume tout l’article.

L’Intérêt des Polices Fluides

L’utilisation des polices fluides dans WordPress FSE présente des avantages significatifs. Elle simplifie l’intégration des tailles de police variables, éliminant souvent le besoin de multiples media queries. Cela se traduit par une expérience utilisateur plus cohérente et fluide sur différents appareils. De plus, ces ajustements typographiques sont aisément accessibles depuis le back-office de WordPress, facilitant la gestion pour les utilisateurs de tous niveaux.

En conclusion, les polices fluides dans WordPress FSE offrent une approche plus intuitive et flexible de la typographie web, s’alignant avec les tendances actuelles du design responsive. Cette innovation est un pas de plus vers des sites WordPress personnalisés et adaptatifs, rendant la gestion des thèmes sur mesure plus accessible et efficace.

Quelques liens

• Ma chaîne Youtube @gregoirenoyelle dans laquelle je compte publier beaucoup de tutoriels sur le FSE.
• La première formation intégrale sur le FSE (Editeur de site).
• Nos meetups mensuel WP Paris.
• Notre association parisienne WP Paris (la refonte du site en FSE est en cours) qui représente WordPress à Paris.