Quel alignement donner aux textes de mon site ?
Cette question semble réellement faire débat et occasionner un flot de pixels. Étant régulièrement sollicité à ce sujet, je profite de mon expérience combinée ‘print’ & ‘web’ pour émettre un avis, et vous (si vous le voulez bien) à la source de ce qu’est la composition de texte. À vous de vous forger votre intime conviction…Et de nous en faire part : vos remarques en bas de page sont les bienvenues.

L’héritage de Gutenberg

Encyclopédie Diderot & D'Alembert Au temps où le typographe glanait un à un ses caractères de plomb dans une casse (i.e. un grand casier à plat qui comportait l’ensemble des signes et des lettres, d’où les appellations « haut de casse » et « bas de casse » que l’on retrouve parfois | voir ci-contre l’illustration issue de l’Encyclopédie Diderot & D’Alembert), ce professionnel de la composition écrite devait alterner des lamelles de plomb d’une largeur variable pour parvenir à respecter une justification harmonieuse de la page, c’est-à-dire l’alignement vertical à gauche et à droite. On imagine sans peine le talent du typographe qui savait marier la chasse des fontes (ou l’approche) quel que que soit leur graisse ou leur corps (ou leur taille). Cette façon de procéder a survécu jusqu’à l’avènement de la photocomposition, date à laquelle le procédé a évolué au profit d’un système de disque comportant le jeux de caractère au travers duquel passe la lumière qui impressionne une plaque sensible. La façon de faire a perdu un peu en poésie, mais a gagné en rapidité. La qualité typographique globale s’est également améliorée avec ce dernier système (du moins, elle ne dépendait plus du talent d’assemblage du typographe), mais quelle que soit la technologie adoptée, la qualité de composition était une préoccupation majeure (c’est ce que je voulais démontrer par ce long préambule).

L’avènement de l’informatique et de la PAO

L’informatique a réellement bouleversé ce bel ordonnancement en multipliant de façon quasi-exponentielle les possibilités de composition d’un texte. Des logiciels tel que QuarkXPress ou InDesign ont permis d’obtenir des compositions typographiques homogènes de grande qualité. Plusieurs réglages sont présents dans les menu de ces logiciels ; ils permettent de créer ce que l’on nomme un beau gris typographique Alignement typographique et gris typographique

L’ensemble de ces réglages précis, à l’instar des préoccupations de générations de typographes précédents, ont eu pour but de faciliter la lecture, de donner un maximum de lisibilité du texte

Pourquoi finalement ne pas justifier un texte sur le web ?

Si vous avez eu le courage de suivre mon propos jusque là, vous aurez compris que la qualité était au centre de toutes les préoccupations des metteurs en page. Le web constitue une sorte de recul puisque la présentation est laissée au bon vouloir de la machine qui l’exprime. La difficulté de mettre en place des règles efficaces pour la césure (ou hyphenation in English) accentue un peu plus ce problème. Le bloc justifié sur le web (tout du moins sans grandes précautions préalable) paraît donc un non sens au regard du soin porté à l’impression depuis les premiers incunables jusqu’aux journaux modernes.

Papier vs écran

1L’expérience utilisateur d’un lecteur sur le web n’est pas la même que qu’un lecteur papier : contraste plus élevé, fréquence de balayage et fatigue visuelle. Certaines études affirment également qu’elle provoque une forme de désorientation cognitive. La lisibilité est donc primordiale et il semble que les grands quotidiens qui éditent 5 colonnes à la une de façon justifiée adopte le ferrage à gauche sur le web.

Le web, un support versatile

2Votre texte s’exprimant sur différents écrans et différents système d’exploitation ne dispose finalement pas d’un seul rendu graphique, mais d’autant de rendu qu’il y a de combinaisons entre ces deux éléments. Cela provoque des lézardes fort inesthétiques qui rendent le texte encore plus difficile à lire, et qui ne sont pas contrôlables car il est difficile de maîtriser parfaitement l’affichage d’un site.

Se repérer sur la toile

3Le web s’exprime sur un milieu mobile qui défile (ou qui scroll) horizontalement et parfois verticalement (argh !). Cette difficulté s’ajoute lors de la lecture car contrairement au papier sur lequel nous pouvons poser notre doigt, l’écran ne propose pas de repère immuable. La disposition du texte au fer à gauche crée une irrégularité qui donne des repères au lecteur lorsque la page change de place.

En terme d’accessibilité

4Ce problème s’amplifie encore pour les internautes aveugles qui emploient des systèmes de lecture adaptés, ou pour les lecteurs à la vision déficiente qui utilisent le mode loupe pour consulter leur ordinateur. Les dyslexiques ne sont pas en reste car ils perdent encore plus leurs marques avec une présentation ferrée à gauche et à droite et qui manque de ce fait de repères.

À contrario

typographisme Il existe quelques extra-terrestres qui prône timidement la justification sur le web. Parmi les plus sérieux, il y a probablement l’équipe de typographisme.net qui dans un article dédié revendique le choix de la justification. Remarquons toutefois plusieurs aspect :

  • La dimension de leur bloc central étroit de 460px de large est adapté à la justification
  • La feuille de style a été travaillée avec une police sans serif très lisible (CartoGothic), une nuance qui diminue le contraste avec l’arrière-plan blanc (#575757) et une taille qui s’exprime en .em (« format qui permet le redimensionnement du texte, afin qu’il s’adapte aux résolutions et aux paramètres des utilisateurs ». – dixit Florent Verschelde, un expert dans le domaine)
  • Un travail sur la césure grâce à un fichier javascript qui gère les césures du texte, selon la langue (mais qui n’est pas non plus une panacée, car son fonctionnement n’est pas autorisé sur les anciens navigateurs.

Bref…un rendu convenable assuré par des personnes qui savent de quoi ils parlent.

La boite à outil

Retrouvez d’autres articles sur le thème de la TYPOGRAPHIE

• Doit-on justifier sur  internet ?
• Bonnes combinaisons typo
• Évitez les fautes communes

Pour mettre tout le monde – presque – d’accord

J’ai expérimenté récemment une extension qui permet d’avoir un contrôle sur la justification sur un site web. Je mets en place cette solution me demande de justifier « pour faire propre » (alors que je ne l’ai pas fait sciemment, « pour faire propre » justement)

Je vous encourage à découvrir wp typography qui propose de belle options pour manier la justification sur internet. Attention toutefois, cette extension peut peser sur votre serveur et votre temps de chargement de votre site.

Considérations UX/UI sur les nouveaux logiciels

Adobe XD Il apparait de plus en plus évident que les nouveaux outils du web ne préconisent plus la justification. Un guru d’Adobe s’exprime même en ces termes en répondant à une demande d’option de justification sur Adobe XD : « [justifier] n’est pas possible dans XD, et il est fortement déconseillé de le faire en général pour la conception de sites web et d’applications ! La plupart des navigateurs sont équipés d’algorithmes de césure et de justification médiocres, en particulier dans de nombreuses langues non anglaises. Les lignes de texte sont donc enroulées de manière incorrecte, ce qui donne des colonnes de texte très illisibles. Un texte justifié peut sembler très droit et attrayant, mais du point de vue du lecteur, c’est souvent une mauvaise chose… »  (source Peter Villevoye • Adobe Community Professional , Jan 06, 2020).
A méditer donc !

En conclusion

Je m’aligne personnellement sur les préconisations du W3C qui stipulent « Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create « rivers of white » running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified. » Le choix de la justification reste bien entendu à la discrétion du propriétaire du site. Il faut cependant veiller à ne pas singer une antique (et toujours actuelle) façon de procéder, en oubliant l’âme, le fondement de cette présentation : la lisibilité, le confort de lecture. Dès lors que ce difficile contrat n’est pas rempli, il me paraît contre-productif de justifier à tout prix. Si vous voulez vraiment le faire, par pitié, n’ajoutez pas des

votre texte

à tout bout de champ dans votre texte, mais agissez sur votre feuille de style avec (par exemple)

p {text-align:justify;}

cela vous permettra de pouvoir changer d’avis ultérieurement et non d’avoir à reprendre le %#@! de code pourri après des années de rédaction contre-nature.

À la réflexion

​Les années passent après la rédaction de cet article et pourtant j’ai toujours autant de difficulté à changer mon point de vue, surtout quand je vois des textes justifiés à la sauvage sur Internet comme dans le cas de l’image ci-contre.

Certains blocs qui sont difficiles à lire sur ordinateur, deviennent très difficiles, voire impossible à parcourir dans le cadre d’une consultation mobile, aujourd’hui majoritaire sur l’ensemble des sites.​ Tous les grands quotidiens en ligne, pourtant habitués à manipuler des colonnes justifiées sur papier, ne prolongent pas à cette habitude et optent très clairement pour des textes en drapeau sur écran.

Il est vraiment préférable de travailler sur la longueur des lignes, la justification, les colonnes, la gestion des césures, l’espacement inter mots, le crénage, la taille du texte avec des plugins ou des lignes de CSS savamment concoctées

Pour aller plus loin

Voici quelques références utiles qui vous permettront de glaner quelques outils supplémentaires : https://code.google.com/p/hyphenator/ Voici la méthode pour intégrer le fichier .js dont je vous parlais un peu plus haut https://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html Un article intéressant, d’un auteur éclairé, responsable d’une entreprise prestigieuse.
https://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4 traite  enfin de la gestion intelligente de la césure sur le web.

Et vous, justifié ou non justifié ? Vos commentaires sont les bienvenus !