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

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).

Iii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8

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

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 versatileElastomère Mocassins 02 Milan 4763 229 Marron 57340 Cuir Pbtdijg Paco QrhCtxsd

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.

A contrario

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.

Homme Populaire Acheter Acheter Noir TimberlandBottines 1lcKFJ

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

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


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

Dtk Bon Marché BootsBottinesMarron Femmes Chaussures BoeEdWrQCx
1
<p style=

Iii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8

"text-align:justify">votre texte</p>

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

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.

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.

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 http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html Jacket Femme Sport Beige Automne Fille Blouson Casual Kbcxygo m08vNnwOUn article intéressant, d’un auteur éclairé, responsable d’une entreprise prestigieuse


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

Iii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8
  1. Sergio dit :

    Merci pour cet article qui va m’aider à illustrer mon propos, l’argument des normes W3C devrait finir de convaincre mon client avocat de respecter la “loi”.

    Iii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8Répondre
  2. Sophie Fabbi dit :

    Super article !
    Je cherchais des arguments concrets à donner à mon énième client qui me demande de justifier un texte pour un contenu web (en l’occurrence, une newsletter). Jusqu’à présent, je répondais que ça donnait un effet « bloc massif de texte » parfois peu esthétique, mais tes explications vont me permettre d’étoffer un peu ma réponse !
    Merci pour ces précisions historiques et techniques qui permettent de comprendre l’origine de tout ça !

    Répondre
  3. Nikole Iii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8dit :

    Moi j’aime les lézards et les lézardes, si c’est la condition pour qu’un texte soit justifié. Comme une autre commentatrice, le texte « droit » d’un côté et « n’importe quoi de l’autre » me dérange, comme si la personne avait « oublié un truc ». Je trouve d’ailleurs incroyable d’avoir un outil aussi perfectionné que les ordis et de ne pas pouvoir résoudre ce problème (pourquoi pas en faisant comme avec une écriture manuscrite, c’est-à-dire en éventuellement coupant les mots.) Comme quoi, « dans certains cas », la machine sera toujours inférieure à l’humain(e).

    Répondre
  4. Darknote dit :

    Bonjour,

    via Firebug, j’ai mis votre texte en justifier, tout parait bon, pas de blanc, sauf à un endroit, je n’aimes pas que le texte à droite fait comme un « drapeau » ou « lézarde », surement trop maniaque.
    C’est vrai que sur certains textes, mettre « Justifier » créé trop de blanc entre les mots et cela n’est pas beau et correct.
    Dommage de ne pas avoir traduit les préconisations du W3C, je ne comprends pourquoi, ils ne sont pas pour, leurs arguments auraient pu finir de me convaincre.
    Chacun doit faire selon ses envies.

    Répondre
  5. Femmes Achetez Mustang La BasketsBleu Chaussures Mode ED9I2WH
    Chennorris dit :

    Avant, je justifiais tous mes textes car je trouvais que ça faisait beaucoup plus propre que ce soit aligné des deux côtés. Et puis après en avoir discuté avec une personne très à cheval sur les bonnes règles typographiques, je me suis rendu compte que la justification n’était clairement pas appréciée de tous. J’ai donc commencé à dé-justifier mes textes mais sans argumentation officielle.

    Après vous avoir entièrement lu, je vous remercie pour m’avoir apporté de vraies réponses sur le fait qu’il ne faut pas justifier son texte (la présence de lézardes, notamment). Et je ne parle pas nécessairement de texte à lire sur un écran puisqu’à mon sens, la justification ne devrait être réservée qu’à des profesionnels de l’édition qui utilisent de vrais logiciels de mise en page et qui de fait ont une maitrise totale du support de lecture.

    RépondreIii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8
  6. Mealin dit :

    Et un de plus qui est vraiment dérangé par les textes non justifiés, surtout sur de longs blocs, mais si cela peut présenter des difficultés réelles de lectures pour certains publics alors je vais me y réfléchir plus sérieusement. Merci ;)

    Répondre
  7. Efraim dit :Masnsui Chevron 5045446384128 Avec Multicolore Motif Évasé Métallisé Topshop Pantalon CxrtsdQh

    Ouff, en fin je trouve des raisons bien fondées qui me poussent à faire passer les textes de tous mes sites en Non justifier.
    Personnellement en lisant les textes justifiés, je trouve assez difficile la lecture, mais je me dis toujours que c’est peut être ma vision. Et certes, les textes justifiés sont à vu d’oeil plus présentables et plus jolis, mais comparé aux textes Non justifié, c’est carrément moins lisible. Je préfère donc plus privilégier la bonne lecture que la bonne présentation. :)
    Merci Fabrice pour ces précisons.

    Répondre
  8. StepHh dit :

    Tu le sais je suis une profane, je ne remettrai donc pas en cause tes justifications (rhooo le jeu de mot). Mais Perso j’ai beaucoup plus de mal à lire un texte non – justifié. Ça m’écorche les yeux ! C’est bête hein. Mais je pense que cela est bien personnel et que chacun trouve son compte dans telle ou telle écriture.

    Répondre
  9. Alain dit :

    Alors beaucoup de professionnels en réponse ici, mais voici un lecteur, et je trouve, personnellement très pénible la lecture en escalier sur la droite, car non justifié, en tant que professionnel, on peut avoir un avis, mais vous devez avant tout prendre en compte le lecteur, non ;-) Leur avez-vous demandé leurs avis ? Non ? Oups.
    Et du coup, j’ai lu ici en diagonale, comme beaucoup d’article, car, trop pénible à lire, fatiguant, oups
    Et puis cela ne fait pas trop feignant de jouer la carte de la facilité ? Non ??
    Du, coup, tu es passé à côté de ton message, non ? Puisque je n’ai pas tout lu, suis-je un cas à part ?
    Yfwvhrc T Application 2843499 Courtes Noir Puma Devant Col Manches Standard Siglée shirt Rond Coupe dBeCox En tout cas, une certitude dans le choix de la Police, pitié sur certaine police pénible à lire, je ne parlerai bien sûr pas du passage PC à tablette ou Smartphone très mal géré par énormément de professionnels, même de grands sites !
    Des fois l’essentiel, c’est le basique, non ?
    Tombé ici par hasard, je repasserai, par curiosité.
    Cordialement.

    Répondre
    • Fabrice Court dit :

      Bonjour Alain,

      Le professionnel est normalement placé en amont du « profane », pour faciliter justement sa vie, l’ergonomie de ses outils, ou de ses objets. Le designer pense l’objet pour l’utilisateur et non pour son propre plaisir qu’il s’auto-procure du haut de sa tour d’ivoire.

      Je sais que les avis sont partagés concernant la nécessité de justifier ou non. J’estime pour ma part que la justification n’apporte rien à un texte présenté sur un site, car contrairement à un texte imprimé, les textes sur les réseaux sont affichés selon des tailles, aspects et containers différents selon les médias (or UNE seule règle ne pourrait prévaloir pour tous ces usages). Les grands quotidiens en ligne semblent en tout cas être de cet avis :)

      Étant maitre en mon domaine, j’agis non pour mon bon plaisir, mais comme j’estime être le mieux (i.e non justifié, et ferré sur la gauche)

      5923g94p34Noir Originals Adidas Baskets Chaussures SneakersHomme N 6Y7bgfyRépondre
  10. Camille dit :

    Bonjour,
    Je suis une adepte du justifix, et votre article a anéanti ma vision ! J’étais persuadée que sur le net également, un texte justifié était plus agréable à lire.
    Vos explications sont pertinentes, mais malheureusement je ne suis pas convaincue par l’esthétique de l’alignement à gauche, surtout lorsque l’on fait une mise en page composée de plusieurs encarts.
    Qui sait, dans quelques années, les experts changeront peut-être d’avis et reviendront à l’époque de Gutenberg :D

    Répondre
    • Fabrice Court dit :

      Bonjour Camille

      Merci de votre commentaire! La justification n’est pas le mal sur une page internet. C’est juste que les outils dédiés pour cette justification ne sont pas aussi précis que sur un compositeur comme InDesign ou QuarkWPRess par exemple, où l’on peut paramétrer très finement les espaces intermot, l’interlettrage et la césure (ou hyphenation en anglais). C’est tout particulièrement catastrophique sur du texte en colonne. Les paramètres CSS comme la propriété hyphens mérite encore d’être polie.

      Personnellement, j’aime bien l’esthétique d’un texte ferré à gauche ou à droite, je trouve cela moins artificiel qu’une justification automatique forcenée…Mais c’est un avis personnel qui je n’imposerait à personne :)

      Répondre
      Iii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8
  11. thibaudd dit :
    Iii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8 12 décembre 2014 à 14 h 21 min

    Je viens donc d’apprendre quelque chose : merci pour ça !

    Je justifiais mon texte depuis des années et à partir d’aujourd’hui, j’ai décidé de ne plus le faire. Merci pour ce billet

    Répondre
  12. Doit-on aussi créer un site web professionnel? dit :
    30 septembre 2014 à 13 h 36 min

    Bonjour
    J’avoue, je ne me demandais jamais s’il fallait justifier ou pas les textes. Je faisais tout selon mon bon gré. Mais j’ai pu apercevoir depuis que j’ai lu votre texte que j’étais toujours en mode non justifié!!!
    En effet, vous m’avez convaincu (ce qui m’arrive rarement après simple lecture d’articles :) )
    Merci pour cet éclairage très professionnel je dois dire :) à la prochaine j’espère.

    Répondre
    • Fabrice Court dit :
      30 septembre 2014 à 13 h 45 min

      Bonjour Daniel
      Merci de votre commentaire. Je ne mène certes pas une croisade contre la justification ; L’équipe de Typographisme.net le fait fort bien sur son site. Il faut simplement que cela soit bien fait :)
      Bonne continuation

      Répondre
  13. jean dit :
    19 mars 2014 à 22 h 24 min

    J’allais le dire… Un article qui va m’être très utile en ceci qu’il condense tout ce que je sais, et résume mon opinion sur la question, que je n’ai jamais pris la peine d’écrire en un court article. Voilà qui est fait. Merci.

    Répondre
  14. elise dit :
    22 août 2013 à 2 h 00 min

    Je justifie toujours tout! Mais en revanche, je n’ai pas réussi à le faire sur Linkedin….

    Répondre
  15. Vouyoux Nadège dit :
    21 juin 2013 à 15 h 56 min

    C’est décidé, je reste en non-justifié, il en va du confort de mon lecteur… merci pour cet éclairage et ses précisions.

    Répondre
  16. morgane dit :
    19 juin 2013 à 12 h 52 min

    Bonjour Fabrice, je l’avoue, je n’ai pas tout compris, mais tu m’as convaincue.
    Jusqu’à présent, je ne m’étais jamais posé la question et n’avais même jamais fait de distinguo entre les sites justifiés et les autres…
    De façon instinctive, j’étais en non justifié.
    Du coup, j’ai fait le test. Voici mon avis : le justifié est plus « joli », bien aligné, visuellement « carré ». Mais j’en trouve la lecture moins aisée.
    Du coup, après réflexion et avoir changé d’avis plusieurs fois, je garde ma non-justification, mais cette fois-ci de façon consciente et choisie.
    Pour une lecture plus fluide et pour mon côté légèrement rebelle !
    Merci pour cet éclairage de pro !! (et à la semaine prochaine)

    Répondre
    • Fabrice Court dit :
      19 juin 2013 à 13 h 32 min

      Merci Morgane !
      A la semaine prochaine :)

      Répondre

Trackbacks (rétroliens) & Pingbacks

  1. Compléments pour la troisième séance | Workshop web dit :
    25 mars 2015 à 17 h 50 minIii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8

    […] Doit-on justifier un texte pour la mise en page ? https://www.fabricecourt.com/formation/doit-on-justifier-un-texte-sur-le-web/ […]

    Répondre

Ajouter un commentaire

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Iii Tiempo Achat Homme Sg Rouge Football NikeChaussures Legacy mwyvn0ON8