Pourquoi on peut pas justifier le texte sur la maquette ?

Une bonne question, souvent posée par les chefs de projet kiffant l’ordre et la symétrie. Fais un clic, là, sur cette icône justified ALLEZ vazy steuplé clique clique clique !
Ce réflexe bien naturel de vouloir ordonner les pavés de texte est propre à la lecture papier.

Sur Internet, il est impossible de justifier son texte sans créer d’espaces inégaux entre les mots. C’est parce que le HTML et les CSS prennent le mot comme unité d’espacement, et non la lettre, comme en imprimerie.
Comme    si    on     écrivait        comme     ça tout le    temps.
lezardes
Ces espaces perturbent la lecture, puisqu’ils mettent du blanc irrégulier là où l’œil doit juste voir une fin de mot. On risque de voir apparaître des “lézardes” (ou “rivières”). Ça demande un effort supplémentaire de lecture, c’est disgracieux et ça donne un aspect amateur (un gris typographique qui n’est pas homogène), et c’est pourquoi on déconseille généralement de justifier le texte

Si, en revanche, on a la possibilité de vérifier mot à mot l’intégration du texte, alors on pourra se donner plus de libertés, même si ça risque d’être long, et qu’il faut arbitrer l’intérêt de la justification vs. le temps passé sur chaque mot pour le caler. Parce qu’il faut composer avec toutes les résolutions, tous les supports, les contenus dynamiques (des données écrites par l’utilisateur, sur lesquelles on n’a pas le contrôle, et qui peuvent faire 3 lettres comme 40, comme par exemple un pseudo)…

Pour en savoir plus, et entrer davantage dans la technique typo, lisez donc cet excellent article, qui explique tout (et qui, pour bien contredire mon propos, est justifié).

4 commentaires

  • Jeff

    Bonjour,

    C’est vrai que la justification d’un texte sur internet était un problème, je dis bien “était”, car avec la nouvelle version de CSS c’est possible. En CSS si on souhaite avoir un texte justifié on utilise le propriété
    text-align : justify;
    Le souci est effectivement l’apparition de “lézardes” dans le bloc texte ce qui n’est pas très beau et peut gêner à la lecture.
    Il faut donc appliquer la césure intelligente et c’est possible en CSS3. Il suffit simplement d’ajouter la propriété “hyphens” qui va couper les mots en respectant la règle typographique de la langue utilisée.
    Cette propriété n’est pas gérer par tout les navigateurs (Firefox 6 ou 8 selon les langues, IE10, Safari 5.1) mais elle permet d’avoir une césure propre alors pourquoi s’en priver ?
    Cela donne :
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;

    • Les Pourquois Du Design

      Tu as raison Jeff, mais du fait que cette solution ne soit pas compatible partout et tout le temps, on peut rarement vendre une maquette avec le texte justifié sur certains navigateurs et aligné à gauche sur d’autres (le client va demander pourquoi le texte n’apparaît pas comme ça sur son navigateur, c’est pas évident à comprendre).
      Du coup, on compose souvent en drapeau (fer à gauche), par souci d’avoir un rendu global le proche possible de la réalité. Mais si on a l’occasion d’utiliser les hyphens, bien sûr, ça aide pas mal et merci pour ta précision :)
      La liste complète des compatibilités : http://caniuse.com/css-hyphens

  • TG

    Bonjour,
    j’avancerais une autre raison pour ne jamais justifier le texte, c’est la factilité d’ancrage du regard. Des lignes de longueur différentes créent un “relief” qui permet à l’oeil de s’y retrouver quand il change de ligne, ou quand il revient au texte après avoir regardé à coté (illustration, distraction) et si ce n’est pas une solution miracle, c’est généralement bénéfique pour toutes les personnes qui ont en particulier des troubles de la lecture. En fait ne pas justifier c’est aussi une question d’acessibilité.
    (D’ailleurs c’est cité dans l’article en lien)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Proposer un pourquoi