Carnet d'atelier · Typographie

Typographie fluide : la mise en page qui respire

Entre le téléphone tenu à trente centimètres et l'écran de bureau à un mètre, le même texte doit rester confortable. La typographie fluide remplace les paliers arbitraires par une échelle continue — sans jamais sacrifier la mesure.

Carnet n°76 — réédition 2026 Texte entièrement réécrit 13 min de lecture
76

Troisième billet de la collection, publié à l'adresse historique du n°76. Le sujet — le texte à l'ère des écrans multiples — n'a jamais été aussi actuel.

Il existe un moment précis où une mise en page cesse d'être agréable : celui où la largeur de colonne dépasse la barre des soixante-quinze caractères. L'œil perd le début de la ligne suivante, la lecture devient un exercice de saut à la perche, et personne ne peut dire pourquoi la page paraît « fatigante ». Ce moment arrive typiquement quand un texte pensé pour un écran s'étale sans précaution sur un autre. La typographie fluide est l'ensemble des techniques qui empêchent ce drame silencieux.

Planche de travail de typographe vue de dessus : spécimens de caractères imprimés en indigo, règle et loupe posées à côté
La planche du carnet : spécimens en indigo, règle et loupe — la mesure avant tout.

La mesure avant tout

En typographie, la « mesure » est la largeur d'une ligne de texte. La règle est stable depuis un siècle et traverse les supports : entre 45 et 75 caractères par ligne pour un texte courant, idéalement autour de 60 à 66. Trop courte, la ligne hache la lecture et multiplie les retours à la ligne hyphénés ; trop longue, l'œil perd le fil en revenant à la ligne. Sur le web, la sanction est immédiate : au-delà de 90 caractères, la compréhension chute et le taux de rebond monte.

Le corollaire est impopulaire mais ferme : la largeur du texte ne doit pas être proportionnelle à l'écran. Un écran 27 pouces n'appelle pas des lignes de 140 caractères — il appelle des marges, des colonnes, du blanc. Fixez une largeur maximale en unités de caractère (environ 34 à 38 rem) plutôt qu'en pourcentage de la fenêtre, et laissez le reste à la respiration.

Interligne : la hauteur qui suit la largeur

Les deux dimensions travaillent ensemble. Plus la mesure s'allonge, plus l'interligne doit s'ouvrir pour guider le retour à la ligne ; plus elle raccourcit — sur mobile, par exemple — plus il peut se serrer. D'où l'intérêt d'un interligne légèrement fluide, lui aussi : autour de 1,6 sur grand écran, 1,5 sur petit. La même logique vaut pour l'espacement entre paragraphes, qui doit rester visuellement supérieur à l'interligne interne sans créer de « trous ».

Une page ne se lit pas en largeur, elle se lit en fatigue accumulée. Chaque décision typographique est une décision d'économie oculaire.

L'échelle modulaire, squelette du rythme

Titres, intertitres, chapô, corps, légendes : les tailles d'une page gagnent à venir d'une même échelle — une progression géométrique (1,2 pour des nuances douces, 1,25 à 1,333 pour des contrastes affirmés, 1,5 pour les pages très hiérarchisées). L'échelle fait trois travaux à la fois : elle garantit des sauts de taille perceptibles (retour au carnet n°56), elle crée un rythme vertical régulier, et elle se décline d'un écran à l'autre sans se déformer — on change la racine de l'échelle, les proportions restent.

clamp() : la fluidité sans JavaScript

Longtemps, le responsive typographique a été une affaire de paliers : 16 pixels sous 640 px de large, 18 au-delà, 20 sur grand écran. Les paliers fonctionnent, mais ils créent des « sauts » visibles au redimensionnement, et ils multiplient les valeurs à maintenir. La fonction CSS clamp() propose mieux : une taille qui croît continûment entre un plancher et un plafond, en fonction de la largeur de la fenêtre. Un corps de texte peut ainsi passer de 16 à 19 pixels sans heurt ; un titre de page grimpe de 30 à 46 pixels en suivant une courbe plutôt qu'un escalier.

Deux garde-fous cependant. D'abord, respectez les préférences du visiteur : un utilisateur qui demande un texte plus grand au niveau du système doit l'obtenir — c'est le rôle des unités relatives au texte, jamais des pixels figés. Ensuite, bornez la pente : une typographie qui grossit trop vite entre deux largeurs donne le mal de mer. Une croissance de 15 à 20 % entre le mobile et le bureau est un ordre de grandeur sain pour un corps de texte.

Repère pratique. Testez vos réglages en lisant un article complet, pas un paragraphe d'exemple. La fatigue de lecture se juge au millier de mots, pas à la maquette.

Les détails qui font la différence

Quelques finitions séparent la mise en page correcte de la mise en page soignée : des guillemets français et de vraies majuscules accentuées, une césure activée avec parcimonie en français (elle sauve les colonnes étroites), des veuves et orphelines contrôlées, et des liens dont le soulignement ne coupe pas les jambages des lettres. Aucun de ces détails ne se voit ; tous se ressentent.

La collection continue : le carnet n°56 pose la hiérarchie, le n°57 la couleur, ce carnet le rythme du texte. Pour appliquer l'ensemble à un projet réel, le comparatif des outils de création indique quelles plateformes respectent le mieux ces réglages — et notre journal revient chaque mois sur un point de détail du métier.