Justification

La justification, également appelée alignement complet ou double justification, est une technique d’alignement du texte dans laquelle chaque ligne d’un paragraphe est étirée ou comprimée pour s’adapter à une largeur de ligne uniforme tout en alignant les marges de gauche et de droite.

En typographie, la justification désigne la manière dont les lignes de texte sont alignées par rapport à une ou deux marges verticales. Elle détermine la forme du bloc textuel et influence directement la lisibilité, le rythme visuel et la perception esthétique.

Cet alignement sur les marges gauche et droite vise à créer un alignement droit des deux côtés d’un bloc de texte en ajustant l’espacement des mots et des caractères.

Cette technique est souvent utilisée pour améliorer l’apparence et la lisibilité des documents imprimés.

Même si la propriété CSS « text-align: justify » est disponible pour justifier le texte sur les pages web, son utilisation est considérée comme une mauvaise pratique pour les écrans, en particulier pour les pages web.

De nombreuses personnes souffrant de troubles cognitifs ont beaucoup de mal à lire les blocs de texte justifiés.

Les espaces entre les mots créent des lézardes qui courent sur la page, ce qui peut rendre le texte difficile à lire pour certaines personnes.

Il existe quatre modes principaux

1. Alignement à gauche (left-aligned / left-justified)

• Définition : Toutes les lignes commencent au même point sur la marge gauche.
• Effet visuel : La marge droite est irrégulière (on parle de « côte » ou « dentelure »).
• Usage : Le plus courant en lecture occidentale — naturel, fluide, facile à lire.
• Dans Figma : Icône « aligner à gauche » → Ctrl + Shift + [ (Windows) ou Cmd + Shift + [ (Mac).

Recommandé pour les paragraphes longs (web, apps, documents).

2. Alignement à droite (right-aligned / right-justified)

• Définition : Toutes les lignes se terminent au même point sur la marge droite.
• Effet visuel : La marge gauche est dentelée.
• Usage : Langues s’écrivant de droite à gauche (arabe, hébreu), ou effets graphiques ponctuels (ex. : crédits, mentions légales secondaires).
• Dans Figma : Icône « aligner à droite » → Ctrl + Shift + ] / Cmd + Shift + ].

À éviter pour les blocs de texte longs en français.

3. Justification complète (full justification)

• Définition : Les lignes sont alignées à la fois à gauche et à droite, créant des marges droites et gauches parfaitement lisses.
• Mécanisme : Figma (et les logiciels de mise en page) ajuste l’espacement entre les mots (word-spacing) et parfois entre les lettres (letter-spacing) pour atteindre cette régularité.
• Effet visuel : Bloc rectangulaire, élégant en impression.
• Risque : Peut créer des « rivières » (espaces blancs verticaux) ou des espacements irréguliers si la ligne est courte ou le texte mal optimisé.
• Dans Figma : Icône « justifier » → Ctrl + Shift + J / Cmd + Shift + J.

À utiliser avec précaution :

• Évitez sur le web ou les écrans petits (problèmes de lisibilité).
• Préférez pour les PDF imprimés, affiches, ou titres courts.
• Activez « Hyphenation » (césure) si possible (non disponible nativement dans Figma → à gérer en amont ou via du code).

4. Centrage (centered)

• Définition : Chaque ligne est centrée horizontalement entre les marges.
• Statut : Ce n’est pas une justification au sens strict (car aucune marge n’est « justifiée »).
• Usage : Titres, citations, cartes événementielles, interfaces émotionnelles.
• Dans Figma : Icône « centrer » → Ctrl + Shift + \ / Cmd + Shift + \.

À réserver aux courts extraits — illisible sur plusieurs paragraphes.

Bonnes pratiques dans Figma

Astuce Figma

• Utilisez Auto Layout avec un cadre texte en alignement à gauche pour des composants résilients.
• Pour simuler une justification plus naturelle, évitez les cadres trop étroits (< 40 caractères/ligne).
• Exportez vers du code avec text-align: justify seulement si vous maîtrisez les risques typographiques.

Synonyme

alignement complet, double justification, texte justifié