Comment modifier l’interligne du texte dans WordPress

Un bon espacement des lignes n’est pas seulement une question d’esthétique – il affecte directement la lisibilité, l’expérience utilisateur et même la façon dont les visiteurs s’engagent dans votre contenu. Que vous teniez un blog personnel ou que vous gériez des sites commerciaux à fort trafic, l’optimisation de l’espacement du texte dans WordPress peut améliorer de manière significative la structure visuelle de votre site.

Dans ce guide, nous allons parcourir les façons les plus efficaces de modifier l’espacement des lignes dans WordPress, avec et sans codage, en utilisant à la fois les éditeurs classiques et de blocs (Gutenberg). Vous apprendrez également à appliquer des CSS personnalisés et à résoudre les problèmes de formatage les plus courants.

Pourquoi l’espacement des lignes est important

• Améliore la lisibilité – en particulier sur mobile
• Réduit le taux de rebond en facilitant la lecture des textes longs
• Améliore la cohérence de la conception entre les thèmes et les appareils
• S’aligne sur les meilleures pratiques de référencement (contenu clair et structuré = meilleur engagement)

Voyons comment le contrôler.

Méthode 1 : ajuster l’espacement des lignes dans l’éditeur Gutenberg

Dans l’éditeur de blocs par défaut (Gutenberg), vous pouvez gérer l’espacement des lignes à l’aide des paramètres du bloc ” Paragraphe ” ou via des classes CSS personnalisées.

➤ Étapes :

• Ouvrez l’article ou la page dans l’éditeur WordPress.
• Sélectionnez un bloc Paragraphe.
• Dans la barre latérale droite, trouvez l’option Typographie > Hauteur de ligne.
• Ajustez la valeur (par exemple, 1,6, 2, 2,2).

Remarque : si l’option n’est pas disponible, passez à la méthode CSS personnalisée (méthode 3) ci-dessous.

Méthode 2 : Éditeur classique (TinyMCE)

L’éditeur classique ne propose pas d’option directe de hauteur de ligne. Cependant, vous pouvez :

• Utiliser la touche Majuscule Entrée pour des sauts de ligne manuels (sans espacement)
• Utiliser des plugins comme TinyMCE Advanced (qui fait maintenant partie de “Advanced Editor Tools”) pour ajouter des contrôles d’espacement

Pour un style cohérent, nous recommandons toujours de définir la hauteur des lignes via CSS.

Méthode 3 : CSS personnalisé (meilleure pratique pour un contrôle total)

Cette méthode permet un contrôle précis, fonctionne avec tous les blocs et thèmes, et évite les changements de mise en page.

Exemple 1 : Hauteur de ligne globale pour tous les paragraphes

p {
  hauteur de ligne : 1,8 ;
}

Exemple 2 : Appliquer à une classe spécifique uniquement

.custom-text {
  hauteur de ligne : 2.2 ;
}

Où insérer le CSS :

• Apparence → Personnaliser → CSS supplémentaire, ou
• Dans le style.css de votre thème enfant, ou
• Par l’intermédiaire d’un plugin comme Simple Custom CSS

Méthode 4 : Constructeurs de pages (Elementor, WPBakery, etc.)

Pour Elementor :

• Modifiez la section ou le widget de texte.
• Sous Style → Typographie, ajustez le champ Hauteur de ligne.
• Vous pouvez la définir en em, px ou en unités relatives.

Pour WPBakery :

• Utilisez les options de conception ou ajoutez un CSS personnalisé directement dans les paramètres de la ligne ou de la colonne.

Méthode 5 : Espacement des lignes adapté aux mobiles

• Un bon interlignage sur ordinateur de bureau peut sembler étriqué sur mobile. La plupart des éditeurs (y compris Gutenberg et Elementor) permettent des réglages réactifs. Toujours :
• Prévisualiser les modifications sur tablette et mobile
• Définir une hauteur de ligne légèrement plus importante pour les petits écrans (par exemple, 2 au lieu de 1,6)
• Problèmes courants et corrections

La hauteur des lignes ne change pas après une mise à jour CSS ?

• Assurez-vous que votre thème ou votre plugin n’écrase pas les styles.
• Essayez d’utiliser !important dans votre règle CSS :

p {
  line-height : 2 !important ;
}

Changements visibles dans le Customizer mais pas en direct ?

• Videz le cache de votre site et le cache de votre navigateur.
• Si vous utilisez un plugin de mise en cache, purgez tous les caches.

Résumé