Interlettrage, intermot et interligne

Le monde de l’édition a une belle avance sur la mise en page et la typographie par rapport au web. Les logiciels de PAO (Publication Assistée par Ordinateur) permettent des ajustements très précis. Il faut donc se satisfaire des outils mis à disposition notamment le contrôle approximatif des feuilles de style. J’ai volontairement grossi certaines illustrations pour une meilleure compréhension mais il faut les adapter au contenu textuel.

Interlettrage

L’interlettrage est l’espace entre les caractères. En CSS, on modifie cette valeur via la propriété letter-spacing. L’effet s’applique sur l’ensemble du texte.

L’interlettrage varie en fonction de la partie imprimée du caractère et des contreformes. L’espacement normal est déterminé par le dessinateur des lettres. Généralement, l’interlettrage par défaut est suffisant et ne nécessite pas de modification. Il a été pensé pour assurer un rythme régulier des caractères et une bonne lisibilité. Une augmentation de l’interlettrage trop importante risque de découper les mots et rendre la lecture plus difficile. Une diminution excessive donne des lettres qui s’entrechoquent. Cet effet est accentué avec les lettres capitales.

Différents interlettrages

Intermot

Comme son nom l’indique, l’intermot est l’espace entre chaque mot. La propriété word-spacing en CSS modifie sa valeur. Par défaut, les logiciels d’édition de texte ou d’édition graphique génèrent automatiquement un espace variable en fonction du corps du texte. Le rédacteur ne doit pas, comme son ancêtre typographe, ajouter lui même les espaces entre les mots.

Dans la plupart des cas, cela suffit pour garantir une lisibilité correcte. Il faut juste être attentif en cas de justification afin de ne pas créer des blancs trop importants qui font apparaître des lézardes dans le texte. Dans le cas d’un texte justifié, plus l’interlignage sera grand plus l’espace intermot semblera petit. En cas de modification, ne descendez pas en dessous de 80 % et au-dessus de 120 % de la valeur par défaut.

Interligne

L’interlignage est l’espace entre deux lignes de base consécutives. En CSS, line-height fait varier cette valeur. Dans une logique graphique, il n’y a pas de règle en matière d’interlignage. Chacun apprécie le résultat en fonction de ses affinités, des objectifs à atteindre. Dans une logique de lisibilité, l’interlignage a toute son importance. Jadis, ce travail revenait à l’imprimeur muni de bandes de plomb (leading) pour espacer correctement les lignes.

Le texte doit être suffisamment aéré et ne pas donner l’impression d’un gros bloc. Inversement, un interlignage trop important donne une impression de vide et de flottement des lignes. L’attention du lecteur est distraite par les blancs optiques entre les lignes. Toute la difficulté consiste à choisir un juste milieu entre ces deux extrêmes.

Par défaut, les navigateurs web affichent un interlignage de 120 % par rapport à la taille du texte. Selon les typographes, un interlignage correct se situe entre 120 et 150 % pour un texte destiné à être lu. Sur ce blog, j’utilise un interlignage d’une valeur de 130 % (Verdana, 13 px, longueur de ligne à 550 px). J’évite ainsi l’effet de tassement des paragraphes et je donne plus de légèreté aux blocs de texte.

Un bon moyen de vérifier l’interlignage c’est de repérer la rencontre entre les ascendantes, les descendantes d’une ligne et les montantes de la ligne suivante. On peut aussi se concentrer sur le rendu des capitales accentuées qui posent souvent problème dans ce cas.

L’interlignage doit également tenir compte de l’œil de la police. Plus l’œil est grand, plus grand sera l’interlignage. L’espace entre les lignes d’un Georgia sera différent d’un Times. Idem pour la longueur de ligne: de longues lignes obligent à augmenter l’interlignage pour faciliter le saut de l’œil au début de la ligne suivante. D’autres facteurs influencent le choix de l’interlignage comme la graisse, la justification, le choix typographique, etc.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s