Typographie et mise en page

En cherchant il y a peu de temps de cela un moyen de paramétrer mon blog afin que le texte soit correctement présenté, en palliant les défauts du #%*.?$ d'éditeur de texte de la plate-forme qui héberge ce blog⁽¹⁾, m'est revenue cette réflexion que mon père m'a toujours faite en regardant des pages internet, à savoir que c'était terriblement difficile et moche à lire la plupart du temps, faute, en partie, de respect des principes typographiques (pour mon blog, il m'a pas dit, mais en même temps je me demande si j'ai vraiment envie de savoir...).  

Il faut vous dire que ça fait partie de son métier, à mon papa, ainsi qu'au papa de mon papa, ainsi qu'au papa de la maman de mon papa, et encore d'autres aussi mais j'ai pas tout compris. Et, du coup, sans que j'aie rien demandé, par infusion héréditaire, j'ai toujours été sensible à la composition d'un texte et à sa lisibilité. Doué, je sais pas, mais au moins sensible.

Le web permet à tout le monde de mettre des textes en ligne, mais, parce que chacun cherche à personnaliser sa présentation et à se concocter son petit monde, et aussi parce qu'internet et le xhtml⁽²⁾ ont leurs contraintes propres, même si les design sont très jolis les textes sont le plus souvent mal présentés ; ce qui est très dommage, car un beau contenu a tout à gagner à être bien mis en valeur.

Éééévidemment, en cas de contenu merdique, heuuuu, bon, lààà...

Je vous propose donc de vous exposer ce que j'ai pu retenir de ce que j'ai glané du côté paternel, et, croyez-le, ça découle en gros de recommandations de l'imprimerie nationale et de ce genre de choses, alors, hein, faut pas croire, c'est pas des trucs de rigolos que je sors de la poche juste pour faire mon intéressant.

Le but du jeu de tout ça, c'est de faciliter le travail de l'œil, pour que l'effort de lecture soit minime, afin que nos pauvres petits encéphales (enfin, surtout les vôtres) puissent se concentrer essentiellement sur le sens du texte. Plus l'effort de lecture est grand car gêné par des éléments perturbateurs, moins le sens est directement perçu, d'où tout le bazar.


- Justification pas trop longue

À part de nommer ce qui sert à garder son quant-à-soi quand on a fait une connerie, en imprimerie, la justification désigne la longueur d'une ligne. Donc, un texte justifié, c'est un texte qui prend toute la longueur de la ligne.

La présentation en texte justifié est bien plus claire, plus ordonnée, moins perturbante, qu'une présentation en «drapeau», c'est-à-dire quand un côté est aligné à gauche ou à droite (en «fer à gauche» ou «en fer à droite») et que l'autre côté vit sa vie au petit bonheur.

Pour justifier un texte, le principe est d'agrandir ou diminuer les espaces à l'intérieur d'une ligne de manière équitablement répartie; malheureusement, le xhtml s'arrête là, ce qui fait que pour des petites lignes avec peu de mots (à côté d'une photo, par exemple), on peut se retrouver avec des lignes mal foutues comportant des espaces énormes entre trois mots (raison pour laquelle je suis resté longtemps avec une présentation en drapeau sur ce blog) :

quelque    chose     dans      ce      genre-là.      C'est      très      agaçant    à    lire     non      ?

Car pour justifier vraiment correctement, il faut peaufiner la méthode, afin que la largeur des espaces reste dans une fourchette correcte, en choisissant avec soin le nombre de mots par lignes, et surtout, en pratiquant la césure, chose que ne connaît pas le xhtml (mais possible sur les vrais logiciels de traitements de texte, commeQuarkXPress). Avec la césure, on peut ainsi rajouter un bout de mot pour éviter d'élargir trop les espaces, de cette ma-
nière. La classe, non ?

À vue de nez, comme ça, je dirais qu'une justification ne devrait pas dépasser une moyenne d'une douzaine de mots par phrase. De trop grandes lignes perdent l'œil : arrivé au bout d'une ligne, plus elle est longue, plus il est difficile de retrouver le début de la ligne suivante.

L'ennui, sur le web, c'est qu'il n'est pas recommandé de faire de colonnes comme sur un journal (si les colonnes demandent de faire défiler le texte verticalement, ça serait très agaçant de tout remonter pour retrouver le début de la colonne suivante) ; par conséquent, pour un texte long, avec des lignes pas très longues, on se retrouve avec une seule très loooongue colonne. Hein ? Oui, c'est ça, bien vu, un peu comme pour ce texte-ci, très bien observé.

C'est un choix et un équilibre à trouver : pour ma part je préfère faire défiler le texte verticalement (vive la roulette de souris - deuxième plus grande invention humaine après le Nutella), plutôt que de se taper des lignes trop longues, car dans ce cas ça fait un problème par ligne, plutôt qu'un petit désagrément au moment du défilement. Donc, d'après le théorème de flemme maximum, je vous laisse conclure.

- Texte suffisamment aéré

Dans une page, il faut veiller à respecter un équilibre entre «zones de texte» et «vides».

En pratique, dans 99,99% du temps sur internet, il n'y a pas assez de vides : je n'ai pas souvenir d'avoir vu une seule page avec un texte trop aéré. La cause principale de cela, c'est qu'une page internet se veut remplie d'informations (trop ?), avec des menus, des modules, des gadgets, des images, etc...

Or, il est important que le texte soit clairement délimité vis-à-vis des autres éléments, sinon l'œil est attiré et distrait par les autres éléments en question, et cela lui demande un effort supplémentaire pour distinguer les parties de la page, et en particulier le début des lignes du texte. Vous allez me dire que décidément, c'est un gros flemmard, cet œil, et qu'il ferait bien de se remuer le derche, mais bon, c'est pas à moi qu'il faut le dire, hein, j'y peux rien, moi, voyez ça directement avec lui.

Il faut donc veiller à des marges suffisantes entourant le texte, sans avoir peur du vide. Le zen au secours de la mise en page.

- Gras et italique

Le gras se doit d'être réservé aux titres. Des mots en gras dans un texte attirent immédiatement l'attention au détriment du texte qui est autour, ce qui nuit nettement à la lecture.

Il faut veiller à distinguer clairement les titres des sous-titres, par le corps (grosseur des caractères) et, justement, la graisse.

Si un mot doit être mis en exergue dans un texte, alors c'est l'italique qui devrait être utilisé (sans en mettre non plus pour un mot sur deux) ; l'italique ne ressort pas trop du texte, mais au passage de l'œil indique clairement la spécificité du mot.

Caractéristique du web : les liens, qu'on appelle «hypertextes» pour faire classe, mais qu'on peut appeler juste «liens», ça suffit en fait ; dans ce cas, la couleur reste le code le plus simple pour indiquer que c'est là qu'il faut cliquer, mais il convient de ne pas multiplier les caractéristiques avec du gras ou de l'italique en plus, sous peine de surcharger inutilement : la couleur bien choisie suffit amplement, sinon le pauvre petit nœil, tout ça tout ça...

Il y a un petit ennui : sur tous les PC que j'ai vu jusque-là, les caractères sont très mal lissés et apparaissent crênelés, ce qui fait que l'italique fait un peu la gueule. Cela dit, l'effet fonctionne quand même.

L'italique sert aussi pour indiquer le titre d'une œuvre (avec une majuscule au début).

Note : dans un texte entièrement en italique, par exemple un texte d'introduction détaché du reste de l'article, les mots importants ou les titres d'œuvre seront, du coup, mis dans la fonte normale. C'est comme le coup du moins par moins qui fait plus, voyez.

Ha, et je précise : non, l'italique n'est pas un pays.

- Accents sur les majuscules

Définitivement et une fois pour toute, on met les accents sur les majuscules. Je ne reviendrai pas là-dessus.

- Paragraphes et alinéas

À chaque fois que l'on va à la ligne, il faudrait introduire un alinéa à la ligne suivante ; ainsi, les paragraphes sont clairement délimités entre l'alinéa de la première ligne, et la ligne creuse de fin.

De cette manière, l'œil identifie très clairement l'agencement du texte ; comme chaque paragraphe est censé présenter une idée différente, le lien entre sens et présentation est ainsi renforcé.

On ne saute normalement pas de lignes entre deux paragraphes ; sinon, chaque paragraphe acquiert la même importance, et on perd ainsi la possibilité de faire apparaître de plus grandes parties, en structurant ainsi encore mieux le texte et en mettant en valeur sa construction. Voici ce que ça devrait donner :

«Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pretium, eros a dapibus ultrices, ligula arcu aliquam justo, congue gravida quam tortor eu metus. Etiam lacinia risus id sem. Pellentesque tellus. Aliquam ac erat vel ligula viverra lobortis. In hac habitasse platea dictumst. Duis accumsan. Nullam eget libero.

Aliquam erat volutpat. Sed lectus lorem, commodo ut, elementum quis, molestie nec, tortor. Donec est massa, sollicitudin eget, aliquet sagittis, bibendum sed, libero. Nullam libero mi, dignissim in, vulputate sit amet, pharetra at, orci.

In vel erat sit amet lacus ultricies congue. Nulla mattis dignissim tellus. Maecenas placerat tincidunt massa. Praesent dignissim nibh sit amet ipsum. Maecenas molestie neque non ipsum. Aenean nonummy. Morbi faucibus. Cras id lorem sed pede tincidunt lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Nulla suscipit libero. In eget turpis sit amet est eleifend feugiat. Proin sit amet dui eget urna euismod vulputate. Donec a turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum, lorem sit amet lacinia adipiscing, nunc diam blandit massa, sit amet sodales mi ante et metus.

 Vivamus a metus. Ut libero. Maecenas ultrices. Aenean placerat. Praesent quam libero, consequat sit amet, convallis eu, vulputate vehicula, arcu. Aliquam placerat velit id massa.

Curabitur mollis.»

Là, tout de suite, vous avez tous beaucoup mieux compris le sens du texte, forcément.

(Une solution simple en CSS pour ceux que ça intéresse : http://bakemono.over-blog.com/archive-10-01-2007.html)


- Espaces et ponctuation :

Un texte bien ponctué est un texte agréable et fluide. C'est comme de tenir la porte ou de dire merci, ça fait plaisir.

 abcd_(abcd)_abcd
-_abcd
abcd._abcd
abcd..._abcd
abcd,_abcd
abcd_:_abcd
abcd_;_abcd
abcd_?_abcd
abcd_!_abcd

Pour présenter une liste :

-_abcd ;
-_abcd :
    -_abcd ;
    -_abcd ;
-_abcd.

Normalement, les espaces avant : ; ? et ! devraient être plus petites qu'une espace normale (en effet, dans le sens de la phrase, ces signes sont liés à ce qui précède), et aussi insécables, pour éviter de se retrouver avec des caractères orphelins, comme ceci :

Est-ce que tu vas bien
?
    
ce qui est agaçant, vous en conviendrez.

Ce sont des choses qui peuvent se régler assez simplement avec des logiciels comme XPress, mais en xhtml c'est une autre paire de manches.

J'ai dit : «de manches».

- Pour aller plus loin :

Une possibilité pour distinguer les noms de famille sans pour autant trop se faire remarquer, c'est d'utiliser les petites capitales: Djac BAWEUR.

Les guillemets " " qu'on a sous la main sur le clavier d'ordinateur, sont des guillemets anglo-saxons (tous en chœur : beuuuark). Les guillemets français « » devraient être utilisés, ça fait quand même plus classe. Avec un petit ennui : normalement, il devrait y avoir une petite espace après un guillemet ouvrant, et avant un guillemet fermant (vous suivez ?).

Une lettrine, c'est-à-dire une lettre en plus gros que les autres (et pourquoi pas en couleur, etc...), survivance des manuscrits enluminés du Moyen-âge, peut faire très joli en début d'article ; mais attention, la lettrine, à la base, n'était utilisée qu'en début de chapitre, car trop de lettrines tue la lettrine.

Il y a normalement tout un tas de «règles» pour les acronymes, les chiffres, les abréviations, ça rigole pas...

Par exemple, «erreur» que je fais souvent : il faudrait écrire 2^e, et non 2^ème. Ou, Mr pour monsieur : Mr c'est en fait Mister en anglais, pour  Monsieur en français c'est juste M.

Voir ici pour un état des lieux complet :
http://www.synapse-fr.com/typographie/TTM_0.htm
Et pour des tas de définitions et précisions :
http://fr.wikipedia.org/wiki/Typographie

Et si vous êtes sages, je vous raconterai les ffi et les ffl...



⁽¹⁾ Merci à Bakemono, au passage.
⁽²⁾ Précisons : une page internet est en fait une série de codes que décrypte le navigateur ; essentiellement, ces codes sont regroupés en deux fichiers, le premier dont le langage est nommé xhtml, qui décrit la structure profonde de la page et son contenu, et le second dont le langage est le CSS et qui lui s'attache à décrire la mise en forme du contenu (disposition, marges, couleurs, etc...).