Comment modifier l’interligne dans WordPress : toutes les méthodes expliquées

L’interligne dans WordPress — contrôlé par la propriété CSS line-height — définit la distance verticale entre les lignes de texte au sein d’un élément de bloc. Son ajustement affecte directement la lisibilité, la hiérarchie visuelle et la qualité typographique de votre site. Les quatre méthodes principales pour le modifier sont : les contrôles natifs de l’éditeur de blocs Gutenberg, le Customizer de thème WordPress, le CSS personnalisé via le panneau CSS supplémentaire, et les plugins de typographie. Chaque méthode convient à un niveau différent d’accès technique et de portée des modifications.

Ce guide couvre chaque méthode dans toute sa profondeur technique, y compris les cas limites, les pièges de spécificité des sélecteurs, et les compromis des plugins que la plupart des tutoriels ignorent complètement.

Pourquoi l’interligne est important au-delà de l’esthétique

La spécification CSS définit line-height comme la hauteur minimale des boîtes de ligne au sein de l’élément. Pour le texte courant, la directive d’accessibilité WCAG 2.1 (Critère de succès 1.4.12) recommande un line-height minimum de 1,5 fois la taille de la police. L’ignorer affecte non seulement le design visuel, mais aussi la conformité et les signaux de qualité des moteurs de recherche liés aux Core Web Vitals et aux métriques d’engagement des utilisateurs.

Un line-height mal défini — en particulier des valeurs inférieures à 1.2 sur le texte courant — donne une impression de texte trop serré, augmente le taux de rebond, et peut provoquer des problèmes de Cumulative Layout Shift (CLS) lorsqu’il est combiné avec des polices web qui se chargent de manière asynchrone.

Méthode 1 : Contrôles natifs de l’éditeur de blocs Gutenberg

L’éditeur Gutenberg expose les contrôles line-height nativement pour les blocs Paragraphe, Titre, Liste et Citation, mais cette fonctionnalité doit être explicitement activée au niveau du thème via theme.json ou la fonction add_theme_support().

Étape 1 : Vérifier que la prise en charge de l’interligne est active

Si vous ne voyez pas de champ Interligne dans le panneau des paramètres du bloc, votre thème actif n’a pas déclaré sa prise en charge. Vous pouvez l’activer en ajoutant ce qui suit au fichier functions.php de votre thème :

add_theme_support( 'custom-line-height' );

Pour les thèmes de blocs utilisant theme.json, assurez-vous que ce qui suit est présent sous settings :

{
  "settings": {
    "typography": {
      "lineHeight": true
    }
  }
}

Étape 2 : Sélectionner le bloc cible

Dans l’éditeur d’article ou de page, cliquez sur le bloc Paragraphe ou Titre que vous souhaitez modifier. La barre d’outils du bloc apparaît en haut, et la barre latérale droite bascule automatiquement vers l’onglet Bloc.

Étape 3 : Localiser le panneau Typographie

Dans le panneau Bloc de droite, faites défiler jusqu’à la section Typographie. Si elle est réduite, cliquez sur le libellé pour la développer. Vous verrez un champ de saisie Interligne.

Entrez une valeur sans unité. WordPress la transmet directement comme valeur CSS line-height dans le style inline du bloc. Plages recommandées :

• Paragraphes de corps : 1.5 à 1.8
• Titres (H1–H2) : 1.1 à 1.3
• Sous-titres (H3–H4) : 1.2 à 1.4

Cas limite critique : Les valeurs sans unité (ex. 1.6) sont fortement préférées aux valeurs en pixels ou en em (ex. 24px ou 1.6em) car elles s’adaptent proportionnellement lorsqu’un élément enfant hérite de la propriété et modifie sa propre taille de police. Utiliser px ici est une erreur courante qui brise l’espacement des éléments imbriqués.

Étape 4 : Enregistrer et valider

Cliquez sur Mettre à jour ou Publier. Utilisez les DevTools de votre navigateur (F12 > Éléments > Calculé) pour confirmer que le style inline line-height: 1.6 est appliqué au bon élément et n’est pas remplacé par une feuille de style de thème avec une spécificité plus élevée.

Méthode 2 : Le Customizer de thème WordPress pour la typographie à l’échelle du site

Le Customizer (Appearance > Customize) fournit une interface d’aperçu en direct pour les modifications à l’échelle du site. Les contrôles typographiques dans le Customizer ne sont pas une fonctionnalité principale de WordPress — ils sont entièrement fournis par votre thème actif ou un plugin complémentaire.

Thèmes avec panneaux de typographie natifs

Les thèmes construits sur des frameworks comme GeneratePress, Astra, Kadence ou OceanWP exposent des sections Typographie dédiées avec des curseurs line-height pour le texte courant, les titres et les zones de widgets individuellement.

Étape 1 : Naviguer vers les paramètres de typographie

Allez dans Apparence > Personnaliser. Recherchez une section intitulée Typographie, Polices ou Styles globaux selon votre thème. Si aucune telle section n’existe, votre thème ne prend pas en charge le contrôle typographique basé sur le Customizer — passez à la Méthode 3 ou à la Méthode 4.

Étape 2 : Ajuster l’interligne par élément

La plupart des customizers de thèmes vous permettent de cibler :

• Texte courant (correspond au sélecteur body ou p)
• Les titres H1 à H6
• Menus de navigation
• Titres de widgets

Définissez vos valeurs et utilisez le volet d’aperçu en direct pour valider simultanément sur les points de rupture bureau et mobile.

Étape 3 : Publier les modifications

Cliquez sur Publier en haut à gauche du Customizer. Les modifications sont écrites dans les options stockées du thème et appliquées globalement via la feuille de style du thème ou le bloc <style> inline dans <head>.

Piège : Les paramètres typographiques du Customizer sont stockés dans les options du thème, et non dans style.css. Si vous changez de thème, tous ces ajustements sont perdus. Documentez toujours vos valeurs avant de changer de thème.

Méthode 3 : CSS personnalisé — La méthode la plus précise et portable

Le CSS personnalisé vous donne un contrôle total sur le ciblage des sélecteurs, la spécificité et les points de rupture responsives. C’est l’approche correcte lorsque vous avez besoin d’un contrôle granulaire que ni l’éditeur de blocs ni le Customizer ne fournissent.

Étape 1 : Accéder au panneau CSS supplémentaire

Naviguez vers Apparence > Personnaliser > CSS supplémentaire. Ce CSS est stocké dans la base de données et affiché inline dans <head>, lui donnant un avantage de spécificité sur la plupart des feuilles de style de thèmes.

Alternativement, si vous gérez votre propre environnement serveur — par exemple, sur un plan Hébergement VPS — vous pouvez mettre en file d’attente une feuille de style personnalisée via functions.php pour un meilleur contrôle du cache et des performances :

function mytheme_custom_styles() {
    wp_enqueue_style(
        'custom-typography',
        get_stylesheet_directory_uri() . '/css/custom-typography.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

Étape 2 : Écrire des règles CSS ciblées

Interligne global des paragraphes :

p {
    line-height: 1.6;
}

Tous les niveaux de titres :

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

Blocs de paragraphes spécifiques à Gutenberg uniquement (évite d’affecter le texte de la barre latérale ou du pied de page) :

.wp-block-paragraph {
    line-height: 1.7;
}

Limité à un modèle de page spécifique ou un type d’article en utilisant la classe body que WordPress génère automatiquement :

.single-post .entry-content p {
    line-height: 1.65;
}

.page-template-landing-page p {
    line-height: 1.5;
}

Ajustement responsive pour mobile (les écrans plus petits bénéficient d’un espacement légèrement plus serré) :

@media (max-width: 768px) {
    p {
        line-height: 1.5;
    }
}

Étape 3 : Résoudre les conflits de spécificité

Si votre CSS ne prend pas effet, une règle de thème ou de plugin avec une spécificité plus élevée la remplace. Diagnostiquez cela dans les DevTools en inspectant l’élément et en vérifiant quelle règle est barrée dans le panneau Styles.

Pour augmenter la spécificité sans recourir à !important, ciblez votre sélecteur plus précisément :

body .site-content .entry-content p {
    line-height: 1.6;
}

Utilisez !important uniquement en dernier recours, car cela crée une dette de maintenance qui s’accumule à chaque ajout CSS futur :

p {
    line-height: 1.6 !important; /* Use only if specificity cannot be resolved otherwise */
}

Méthode 4 : Plugins de typographie

Les plugins sont le bon choix lorsque vous avez besoin d’une interface sans code, lorsque vous gérez un site pour un client qui doit le maintenir de manière indépendante, ou lorsque vous avez besoin de fonctionnalités typographiques OpenType avancées au-delà de line-height.

Comparaison des plugins

Installation et configuration d’Advanced Editor Tools

Advanced Editor Tools (anciennement TinyMCE Advanced) est l’option la plus largement déployée pour ajouter des contrôles d’interligne directement dans la barre d’outils de l’éditeur de blocs.

1. Allez dans Extensions > Ajouter, recherchez Advanced Editor Tools, et cliquez sur Installer maintenant, puis sur Activer.
2. Naviguez vers Réglages > Advanced Editor Tools.
3. Dans l’onglet Éditeur de blocs, activez le bouton de barre d’outils Interligne en le faisant glisser dans la rangée de barre d’outils active.
4. Retournez sur n’importe quel article ou page. Sélectionnez un bloc Paragraphe. Le contrôle d’interligne apparaît maintenant dans la barre d’outils du bloc.

Utilisation de WP Typography pour les règles globales

WP Typography applique des règles typographiques au niveau du rendu PHP, ce qui signifie qu’il modifie la sortie HTML avant qu’elle n’atteigne le navigateur. Cela est utile pour imposer un line-height cohérent sur tout le texte sans toucher aux blocs individuels.

Après l’activation, allez dans Réglages > WP Typography et localisez la section Classes CSS pour appliquer des règles d’interligne limitées à des conteneurs spécifiques.

Piège : Le traitement de texte de WP Typography peut entrer en conflit avec les plugins de mise en cache si la mise en cache de page complète est activée. Testez toujours après l’avoir activé sur un environnement de staging, en particulier si votre stack d’hébergement inclut une mise en cache au niveau serveur — une configuration courante sur les Serveurs dédiés exécutant Nginx avec le cache FastCGI.

Édition complète du site (FSE) et theme.json : L’approche moderne

Pour les sites utilisant un thème de blocs (Twenty Twenty-Three, Twenty Twenty-Four, Kadence FSE, etc.), la méthode canonique pour définir les valeurs line-height par défaut est theme.json. Ce fichier définit des tokens de design qui se propagent dans toute l’interface de l’éditeur de blocs.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "lineHeight": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "lineHeight": "1.25"
        }
      },
      "h1": {
        "typography": {
          "lineHeight": "1.1"
        }
      }
    }
  }
}

Les valeurs définies dans styles au sein de theme.json sont générées comme propriétés personnalisées CSS et appliquées via le sélecteur :root, leur donnant une large portée tout en restant remplaçables au niveau du bloc. C’est l’architecture la plus maintenable pour les sites WordPress en production en 2024 et au-delà.

Si vous construisez ou gérez un thème de blocs personnalisé sur un serveur que vous contrôlez — comme un VPS avec cPanel — modifier theme.json directement via le gestionnaire de fichiers ou SSH est plus rapide et plus fiable que d’utiliser le Customizer pour les tokens de typographie.

Choisir la bonne méthode : Matrice de décision

Liste de contrôle technique avant la mise en ligne

• Confirmez que les valeurs line-height sont sans unité ou utilisent em — évitez px pour les propriétés héritées.
• Validez WCAG 2.1 SC 1.4.12 : le line-height du texte courant doit être au moins 1.5.
• Inspectez les styles calculés dans les DevTools pour confirmer qu’aucune règle de spécificité plus élevée ne remplace vos valeurs.
• Testez sur au moins deux points de rupture mobiles — un line-height qui fonctionne à 1440px peut sembler excessif à 375px.
• Si vous utilisez un plugin de mise en cache (WP Rocket, W3 Total Cache), videz le cache après tout changement CSS.
• Pour les sites hébergés sur un Hébergement Web mutualisé, utilisez le panneau CSS supplémentaire plutôt que de modifier directement les fichiers du thème pour éviter que les modifications soient écrasées lors des mises à jour du thème.
• Documentez toutes les valeurs line-height personnalisées dans un guide de style ou un bloc de commentaires dans votre fichier CSS.
• Si vous déployez un thème enfant personnalisé ou theme.json sur un serveur géré, assurez-vous que les permissions de fichier sur theme.json sont définies sur 644 pour éviter les erreurs d’écriture de l’éditeur de fichiers WordPress.

FAQ

La modification de l’interligne dans l’éditeur Gutenberg affecte-t-elle les appareils mobiles ?

Oui. Les valeurs définies via le champ Interligne de l’éditeur de blocs sont appliquées comme styles inline sans media query, elles s’appliquent donc à toutes les largeurs de viewport. Pour un contrôle responsive — des valeurs différentes sur mobile et bureau — vous devez utiliser du CSS personnalisé avec des requêtes @media ou un plugin de blocs comme Kadence Blocks qui expose des contrôles typographiques par point de rupture.

Pourquoi mon line-height CSS personnalisé ne s’applique-t-il pas même si je l’ai ajouté au CSS supplémentaire ?

La cause la plus courante est une règle de feuille de style de thème ou de plugin avec une spécificité CSS plus élevée ciblant le même élément. Ouvrez les DevTools, inspectez l’élément paragraphe, et recherchez les règles barrées dans le panneau Styles. Augmentez la spécificité de votre sélecteur (ex. .entry-content p au lieu de p) ou, en dernier recours, ajoutez !important.

Quelle est la différence entre line-height: 1.6 et line-height: 1.6em ?

Une valeur sans unité comme 1.6 est héritée comme un ratio — les éléments enfants multiplient leur propre taille de police par 1.6. Une valeur de 1.6em est calculée par rapport à la taille de police du parent puis héritée comme une valeur en pixels fixe, ce qui peut provoquer un espacement mal aligné dans les éléments imbriqués avec des tailles de police différentes. Utilisez toujours des valeurs sans unité pour line-height dans le texte courant.

Puis-je définir des interlignes différents pour la vue éditeur et le front-end ?

Oui. WordPress applique les styles de l’éditeur séparément des styles du front-end. Pour cibler le canevas de l’éditeur de blocs, mettez en file d’attente une feuille de style en utilisant le hook enqueue_block_editor_assets et limitez vos règles à .editor-styles-wrapper p. Cela garantit que l’expérience d’édition correspond visuellement au rendu publié.

L’ajustement de l’interligne cassera-t-il la mise en page de mon site ou provoquera-t-il un Cumulative Layout Shift ?

Modifier line-height sur des éléments de texte statiques ne cause pas de CLS en soi. Le CLS est déclenché lorsque des éléments changent de position après le rendu initial — généralement causé par le chargement et l’échange de polices web. Si vous utilisez Google Fonts ou une police web personnalisée, associez vos ajustements line-height avec font-display: swap et des indices de préchargement pour minimiser l’instabilité de mise en page lors du chargement des polices. Héberger vos polices localement — simple sur un environnement Hébergement VPS — élimine la latence des polices tierces qui déclenche le plus souvent le CLS en parallèle des modifications typographiques.