Composer le texte sur le web

Composer le texte sur le web

Vous avez appris à structurer une page avec des balises qui indiquent la typologie de contenu qu’elles figurent (un titre, un paragraphe).

Regardons, brièvement, comment nos compétences en typographie s’appliquent à ce médium particulier pour pouvoir les composer.

Le texte web n’est pas le texte imprimé

Vous arrivez avec une culture typographique. Elle reste précieuse et nécessaire, mais un écran n’est pas une page imprimée. Bien que ces deux médiums partagent des similarités, ils ont également des différences notables.

Des similarités

Le vocabulaire (corps, graisse, italique, chasse, interlignage, mesure, justification – ce sont les mêmes termes en CSS) et les principes de composition (mesure idéale d’une ligne, interlignage, hiérarchie du texte) s’appliquent de la même manière.

Mais un autre médium

Le texte est fluide. Vous ne savez pas sur quel écran, dans quelle fenêtre, à quelle taille votre composition sera lue. Vous ne composez pas une page : vous composez un système qui doit tenir sur des surfaces très différentes.

La typographie web n’est pas une autre discipline, elle est simplement soumise à d’autres contraintes.

Quelques attributs CSS essentiels

Voici quatre éléments-clés pour la composition de texte, ainsi que les attributs CSS qui leur sont associés.

Vous verrez beaucoup de similarités avec la composition du texte imprimé.

1. La hiérarchie

La hiérarchie typographique répond à une question simple : qu’est-ce que l’œil doit voir d’abord ? Elle peut se composer avec trois outils :

Un exemple :

p {
  font-size: 18px;
  margin-bottom: 14px;
}

h1 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 18px;
  margin-bottom: 18px;
}

Comme en print, je vous conseille ne pas combiner trois contrastes là où un seul suffit. Si votre titre est déjà plus gros que votre texte courant, il n’a pas besoin d’être gras en plus.

Pour les rapports de corps entre les titres, comme en print, pensez en échelle modulaire plutôt qu’en valeurs arbitraires : un rapport (1.25, 1.5, 2…) qui relie les tailles entre elles produit une cohérence immédiate.

modularscale.com permet de visualiser une échelle à partir d’un corps de base et d’un rapport.

2. L’interlignage

L’interlignage CSS s’écrit line-height. Il prend de préférence une valeur sans unité :

body { line-height: 1.4; }

Ce nombre est un multiplicateur du corps. À 1.2, une police de 18px aura un interlignage de 25.2px. Ainsi, la valeur se recalcule automatiquement quand la taille change.

Comme dans le print, l’interlignage juste dépend du corps et de la chasse du caractère : un caractère plus gras (et donc plus dense) aura un interlignage légèrement plus réduit.

Plus la mesure est longue, plus l’interlignage doit être généreux pour que l’œil retrouve la ligne suivante. Un paragraphe aura ainsi un interlignage plus généreux qu’un titre. Exemple : 1.4 pour du texte courant, 1.1 pour du titre.

Pro tips : si en print on reste généralement à rapport de 1.2 par rapport au corps, on est légèrement plus généreux en web.

3. La mesure

La règle classique vaut sur le web : 50 à 75 caractères par ligne pour un texte courant avec un bon confort de lecture.

CSS dispose d’une unité conçue pour cela : le ch, qui équivaut à la largeur du caractère 0 dans la police utilisée. Cela permet de fixer la mesure en caractères, pas en pixels :

article { max-width: 75ch; }

Cette ligne suffit, dans 90 % des cas, à transformer un texte illisible (qui s’étend sur toute la largeur de l’écran) en un texte agréable à parcourir.

Pro tips : Le 0 est un caractère plutôt étroit ; faites des tests pour trouver la meilleure valeure. 85ch peut tout à fait être valable selon le caractère employé.

4. La justification et la césure

La justification sur le web a longtemps eu mauvaise réputation, à juste titre : sans césure, elle produit des « lézardes », ces espaces blancs entre les mots.

Pour se faire :

article {
  text-align: justify;
  hyphens: auto;
}

…à condition que la langue du document soit déclarée dans le HTML :

<html lang="fr">

Sans cet attribut, le navigateur ne sait pas selon quelles règles couper les mots, et la césure ne se produit pas.

Pour les titres, une autre piste s’est ouverte récemment avec text-wrap: balance, qui équilibre les retours à la ligne pour éviter les veuves ou orphelines isolées. À utiliser sur les titres et les courts blocs ; pas sur les longs paragraphes (trop coûteux).

5. La composition en drapeau

Pour les textes « ferrés », pas grand chose à faire, il n’y a pas de micro-typographie en web (enfin si, mais cela implique des hacks un peu poussés). Pas non plus de retour chariot, permettant de travailler un drapeau. Le caractère fluide des écrans rend impossible ce degré de détail.

Récemment, une nouvelle propriété a permis de résoudre (un peu) la question de la composition en drapeau :

h1 {
  text-wrap: balance;
}

text-wrap: balance permet de retrouver la fonctionnalité équilibrer les lignes en drapeau dans InDesign. Je vous conseille de l’utiliser sur les titres uniquement.

Le CSS

Eh oui, le CSS évolue chaque jour et de nouvelles fonctionnalités font de temps en temps leur apparitions. J’utilise beaucoup caniuse pour m’assurer qu’une propriété CSS est largement supportée par tous les navigateurs.

Boîte à outils

Une petite liste (non exhaustive) de propriétés CSS pour vous aider à composer (toutes supportées dans tous les navigateurs).

Caractère

Paragraphe

Aller plus loin

Vous êtes prêt·es à composer !