L’alignement justifié est souvent demandé pour donner un rendu « propre » aux textes en ligne. Mais appliqué sans nuance, il dégrade l’expérience utilisateur, surtout sur mobile et tablette. Voici ce que nous avons observé, testé et corrigé.

Constat

Une cliente a demandé à justifier l’intégralité des textes de son site WordPress. Sur ordinateur, le résultat semble élégant. Mais en consultant le même contenu sur tablette et smartphone, les espaces irréguliers sautent aux yeux. Les blocs de texte deviennent difficiles à lire et perdent en fluidité.

Exemple volontairement exagéré (à visualiser sur trois écrans différents) :

Un texte justifié crée parfois des   espaces   larges   entre les mots,   formant des « rivières blanches »   qui perturbent   la lecture.

Sur mobile, l’effet est encore plus marqué car la largeur réduite oblige le navigateur à compenser par des espaces encore plus grands.

Hypothèses

• Le client associe « justification » à une mise en page professionnelle, proche des livres ou journaux.
• L’impact négatif sur la lisibilité n’était pas connu.
• Un compromis est possible : garder le texte justifié uniquement sur desktop, tout en préservant un alignement à gauche sur mobile.

Actions et tests

Nous avons exploré trois options :

Tout justifier

Application d’un style CSS global :

p, li { text-align: justify; }

Résultat : homogène visuellement sur ordinateur, mais problématique sur les écrans plus petits.

Compromis desktop uniquement

Alignement à gauche par défaut, justification activée seulement au-dessus de 1024 px de large :

@media (min-width: 1024px) {
  p, li { text-align: justify; }
}

Résultat : confort de lecture préservé sur mobile et tablette.

Justification au cas par cas

Ajout d’une classe spécifique dans WordPress (ex. .is-justified) et application sur certains blocs longs. Permet un contrôle fin sans forcer tout le contenu.

Résultats

• Sur desktop, le texte justifié fonctionne tant que la largeur de ligne reste raisonnable (60–70 caractères).
• Sur tablette et mobile, la justification dégrade nettement la lisibilité.
• Le compromis par media query est perçu comme le meilleur équilibre entre esthétique et accessibilité.

Interprétation et leçon

Le texte justifié est un piège classique : il flatte l’œil sur un écran large, mais nuit à l’expérience utilisateur ailleurs. Le rôle du concepteur est d’alerter, de proposer un compromis et de préserver la lisibilité. Un site lisible est un site qui convertit.

Erreurs fréquentes

• Justifier aussi les titres, menus et boutons.
• Laisser les lignes dépasser 80–90 caractères.
• Oublier les césures automatiques (hyphens).