Du 7 au 11 septembre 2009, le Centre pour l’édition électronique ouverte a organisé son Université d’été de l’édition électronique ouverte. Nous mettons à votre disposition les comptes rendus des conférences et des cours donnés durant cette semaine de formation. Ce compte-rendu a été rédigé par Annik Le Pape, chargée d’édition au Cléo.

La typographie pour le Web (cours)

Intervenante : Inès Secondat de Montesquieu
jeudi 10 septembre 2009 – 10h30-12h30 (Université St Charles)

Inès Secondat de Montesquieu est éditrice et responsable du pôle édition du Centre pour l’édition électronique ouverte.

La typographie est fondamentalement ancrée dans la culture de l’imprimé mais tend de plus en plus à devenir une spécialité graphique plutôt qu’un métier à part entière. Trois questions : qu’en est-il de la typographie transposée dans l’environnement web ? comment améliorer la lisibilité visuelle des textes en ligne (micro-typographie) ? et comment composer des sites web qui facilitent la lecture cognitive (macro-typographie) ?

I. La typographie et son émergence sur le web

Notions basiques

On le sait, les deux principales familles de caractères sont les polices à empattement (dites « serif », comme le Times ou le Garamond), et les polices sans empattement (également appelées « linéales », « sans-serif » ou « bâton », comme l’Arial ou le Verdana).

La taille du caractère (son « corps ») est exprimée en « points » (Times 12 pt). Sur un support électronique, on va définir le corps d’une police soit en pixels (px, unité absolue), soit en « em » ou en « ex » (i.e. largeur du « m » ou du « x », unités relatives).

Lente émergence de la recherche typographique pour le web

Les débuts du web sont marqués par une absence totale de prise en considération de la typographie : usage exclusif des polices sans-serif, hyperliens soulignés, texte affiché sur tout l’écran, graphismes surchargés (images de fond, couleurs dans tous les sens…), voire abandon de tout enrichissement typographique au risque de perdre le sens même du texte (ainsi du Grand Meaulnes dont toute mise en forme est abolie dans sa restitution « Gutenberg »)¹.

Ce n’est que progressivement que l’édition électronique s’est professionnalisée. De nouveaux métiers ont émergé : les producteurs de contenu ont commencé à travailler avec les développeurs, la question de la qualité éditoriale et des données s’est finalement posée. Introduites au milieu des années 1990, les CSS (Cascading Style Sheets, feuilles de style en cascade) ont grandement contribué à l’amélioration typographique des sites web – notamment à partir des années 2000, quand les navigateurs ont correctement supporté cet outil respectant les standards établis par le World Wide Web Consortium (W3C) pour l’affichage de documents HTML et XML. Il est ainsi devenu possible de spécifier pour toutes les pages d’un site leurs caractéristiques typographiques : police (font-family), taille (font-size), couleur, interlignage, interlettrage (letter-spacing), espace entre les paragraphes, hauteur des exposants et décalage des indices par rapport à la ligne de base, taille des petites capitales, des lettrines, etc.

Contraintes matérielles et techniques

La grande difficulté dans le webdesign est d’accepter que l’affichage puisse être déformé et, même, que le créateur n’aie aucune maîtrise sur le rendu final – qui dépendra des écrans, de leur taille, de leur résolution, du paramétrage des couleurs, des navigateurs parfois configurés par les internautes, ou encore des paramètres système de lissage ou non des polices… Cette instabilité du graphisme global, il faut s’y soumettre.

L’affichage du texte n’est pas davantage contrôlable. Si la typographie traditionnelle se composait ligne à ligne, et si la PAO a suivi les mêmes procédures, ce travail n’est plus possible sur le web : le texte est un flux, recomposable à l’intérieur d’un bloc prédéfini. Cet affichage de la ligne par défaut n’est pas stable, le texte pouvant être redimensionné par l’utilisateur et la césure placée en fin de ligne devenant inutile en cas d’agrandissement du texte. De la même façon, la gestion des caractères varie d’un navigateur à l’autre : l’espace fine n’est pas restituée de la même manière par Internet Explorer et par Firefox. Et l’on perd également la gestion des espaces entre les mots, la possibilité de placer une image où on le souhaite dans un bloc (centré, en habillage, etc.).

II. Améliorer la lisibilité visuelle des textes : la micro-typographie

On aborde ici la question de la lisibilité du texte. Il s’agit de la lisibilité visuelle, qui se réfère au niveau perceptif, et non de la lisibilité cognitive, la façon dont un texte est compris par le lecteur. De nombreuses recherches en psychologie cognitive étudient le processus de lecture à l’écran².

Comment lit-on à l’écran ?

En mesurant les mouvements oculaires, on observe que le regard du lecteur se déplace par saccades, sur des points plus ou moins éloignés les uns des autres selon le rythme de la lecture, lui-même déterminé par la longueur des lignes, la dimension des marges, l’interlignage.

S’agissant de typographie, les critères de lisibilité sont les mêmes sur les supports électroniques et le papier et passent avant l’esthétique d’une police. Ce sont 1 : son acceptabilité (adéquation entre la forme d’une lettre et la représentation interne qu’en a le lecteur) ; 2 : sa discriminalité (contraste entre la lettre et le fond) ; 3 : sa distinctivité (différence nette entre les caractères)³.

Critères de lisibilité

La lisibilité d’un texte tient à trois éléments : la police, la justification, le contraste.

Police. La sempiternelle complainte du webdesigner est le faible choix de polices et la pixellisation des caractères sur écran. On sait que les polices recommandées sur le web, car elles sont communes à tous les systèmes, sont Arial, Verdana, Times et Times New Roman, Georgia et Courrier New.

Pour s’évader de ce carcan, le script siFR (Scalable Inman Flash Replacement) permet aux graphistes de substituer au texte chargé dans la base une image au format Flash, avec la police de caractères souhaitée – mais le fait de remplacer du texte par une image n’est évidemment pas une solution idéale. La propriété CSS font-face – qui n’est pas reconnue par tous les navigateurs – permet quant à elle d’afficher un site avec une police disponible sur un serveur, que l’internaute va télécharger sans l’installer sur son système – mais il faut alors résoudre les problèmes concernant les droits des polices et le temps de chargement des pages.

Afin de maîtriser autant que possible l’affichage d’un texte, il est bien préférable de constituer dans les CSS un groupe de polices : l’internaute pourra – si son système ne comporte pas la fonte choisie par le websesigner – accéder au texte dans une police de substitution. Il importe de sélectionner des groupes de polices cohérents afin que la taille des caractères et leur redimensionnement soient compatibles.

On soutient généralement qu’il est préférable de choisir pour l’écran un corps supérieur à 10 pt (12, voire 14 pt, pour limiter la fatigue oculaire due à la lecture sur écran) mais ce qui importe, en réalité, c’est la possibilité de redimensionner le texte correctement sans que les mots se chevauchent ou bien que l’interlignage soit réduit ou non proportionné au redimensionnement.

Justification. On appelle justification en typographie la longueur de la ligne. On admet généralement que la ligne ne doit pas être trop courte (elle casse le rythme de lecture), ni trop longue : une ligne doit comporter entre 40 et 60 caractères.

La méthode de Robert Bringhurst, qui multiplie la taille de la police par 30, est une façon simple de calculer la justification idéale : ainsi, multipliée par 30, une police de 10 px sera clairement lisible sur une justification de 300 px (environ 65 caractères/ligne).

La valeur de l’interligne est essentielle pour la lisibilité d’un texte et dépend naturellement du type de police utilisée. Un interlignage correctement déterminé permet au lecteur de mieux percevoir la fonte et améliore l’apparence globale du texte. L’interlignage a un impact direct sur le « gris typographique » rendu par la densité régulière d’une page composée sans lézarde.

Il est indispensable de travailler sur une grille de référence pour construire le rythme typographique d’une page. Ce rythme préserve l’équilibre vertical d’une page, et donc sa lisibilité, quels que soient la taille de la fonte, l’interlignage ou la justification.

Comme la grille, l’échelle typographique améliore la lisibilité d’un texte en hiérarchisant les différents éléments (niveaux des intertitres, citations, etc.).

Contraste. La lecture est plus aisée si le dessin de la lettre sur le fond est bien contrasté mais, sur écran, un contraste trop important pose des problèmes d’accessibilité (les dyslexiques voient les mots se déplacer dans la page) : un noir « allégé » sur un fond blanc facilitera donc une lecture sans fatigue oculaire.

Habillage typographique

Les ornements typographiques traditionnels peuvent être – plus ou moins aisément – restitués sur un support électronique grâce aux CSS.

Lettrine. Placée au début d’un paragraphe, elle peut être de deux sortes : il s’agira soit de l’initiale du premier mot du texte courant dont le corps a été augmenté ; soit d’une capitale ornée (sous forme d’image) – héritage des enluminures du Moyen Âge.
Ces deux types de lettrines s’afficheront sur le support électronique grâce aux CSS ou aux fonctionnalités web.

• l’attribut first-letter définit en CSS toutes les propriétés de la lettrine : sa taille, sa couleur, des spécifications de marges, mais également un fond (image ou couleur), une ombre au texte, etc. ;
• un traitement automatisé identifiera la lettrine dans le code HTML et la remplacera à l’affichage par une image présente sur le serveur.

Ligature. Elle fusionne deux caractères pour en former un nouveau : la plus connue est celle du « e » et du « t », l’esperluette « & ». La ligature est soit esthétique (ex. : « fi », fusion du point sur le « i » avec l’empattement du « f »), soit linguistique (« œ », « æ »). Il est aisé de respecter les ligatures linguistiques, plus complexe de respecter les ligatures esthétiques, absentes des logiciels de traitement de texte (Word ne les prend pas en compte) et pas forcément présentes dans toutes les polices Unicode.

La césure. Elle se pratique dans les textes justifiés. Cet élément est essentiel à la fois pour l’esthétique et la lisibilité du texte.

En PAO, les césures sont généralement insérées automatiquement puis corrigées à la main, en insérant un caractère spécial (un tiret conditionnel, qui ne s’affiche que lorsque le mot en fin de ligne doit être coupé). Il existe en Unicode un caractère de césure qui peut fonctionner de la même manière en ligne mais peu de systèmes permettent d’insérer des césures pertinentes en bout de ligne.

• la propriété word-break, encore en projet dans les CSS3, devrait permettre de définir – comme sous XPress ou InDesign – la coupure automatique ou non, de spécifier le nombre maximum de lignes comportant une césure, le minimum de caractères avant et après la césure (afin d’éviter une césure incorrecte ne rejetant à la ligne que deux caractères) ; encore faudra-t-il que le navigateur de l’internaute possède un dictionnaire de coupure de mot…
• des scripts (php issus de Tex, plugin pour Spip) peuvent traiter la page mais allongent considérablement le temps de chargement… à éviter pour les textes longs.

Appliquer les règles typographiques aussi à l’écran

La typographie, c’est une attention incessante portée aux textes, afin d’en assurer la cohérence, d’en fluidifier la lecture. Il en va de l’orthotypographie comme de l’orthographe : le non-respect de ses normes ralentit la lecture. Les règles typographiques portent notamment sur la ponctuation, l’accentuation, l’usage des majuscules ou des minuscules (des noms de personnes, historiques ou géographiques), la composition des formules mathématiques, etc. En France, elles se fondent généralement sur les recommandations du Lexique des règles typographiques en usage à l’Imprimerie nationale.

Une charte typographique doit être cohérente et systématique : si l’on choisit de composer les siècles en chiffres arabes, ou d’user des guillemets dits “anglais” au lieu des classiques « français », il importe d’appliquer cette norme de bout en bout du texte.

Les logiciels de traitement de texte, d’une part, et les pratiques typographiques de la presse, d’autre part, ont eu une influence néfaste sur l’application de ces règles (majuscules souvent non accentuées, utilisation de guillemets non français, espaces).

L’apostrophe est probablement le signe typographique le plus malmené. Elle doit s’afficher ainsi : [ ’ ] et non comme ceci : [ ‘ ].

Les espaces insécables et fines. En typographie française, une espace fine insécable doit précéder les ponctuations hautes [ ; ! ? ], à l’exception du deux-points [ : ] qui exige une espace insécable normale (justifiante). Une fine insécable doit également être insérée entre le texte et les guillemets français [« »].

Bien que les spécifications Unicode définissent plusieurs types d’espaces ainsi que leurs entités nominales ou décimales, les logiciels de navigation modernes ne les reconnaissent pas toutes et lorsqu’ils les reconnaissent, ne les traitent pas toutes de la même façon. De plus, les spécifications d’Unicode ne déterminent pas la valeur exacte de chaque type d’espace (en fraction ou en pourcentage de cadratin, par exemple, comme le font les logiciels de PAO).

Parmi les différents types d’espaces définis par Unicode (nominale, insécable, thin, ponctuation, hair), il est préférable d’utiliser une simple espace insécable que pas d’espace du tout (comme le font justement certains gestionnaires de contenu web – CMS – tels SPIP et dotclear).

Les guillemets. En typographie française, les guillemets se marquent ainsi : « texte » et non comme ceci “texte” ou à l’anglaise, comme ceci “texte”.

III. Améliorer la lecture cognitive : la macro-typographie

Le travail sur la composition, la mise en page du texte dans son environnement (page ou site web) est un l’élément constitutif de ce qu’on appelle la macro-typographie, ou la manière de présenter, de hiérarchiser et de valoriser le texte, sa structure, les différents composants de l’information.

Les stratégies de lecture à l’écran : la mémoire spatiale

Comme pour le papier, les « règles de mise en page, les enrichissements visuo-graphiques, l’organisation hiérarchique et la position des blocs informationnels » visent à influencer l’ordre de lecture et les fixations oculaires.

Comment lit-on ? Pour réaliser la cohésion entre les phrases ou les propositions adjacentes, le lecteur a recours à des « saccades régressives » qui représentent 10 à 15 % du temps de lecture : pour lire une phrase comportant une structure syntaxique complexe, l’œil revient en une large saccade vers la zone du texte permettant de résoudre l’ambiguïté de la formulation.

De la même manière, la mémoire spatiale est un élément essentiel dans le processus de lecture. Elle aide le lecteur à situer une information à l’intérieur d’un document.

La verticalité de la page web. Peut-on lire sur écran de longs textes, qui défilent indéfiniment sur une page verticale ? Sur le support web, le scrolling entraîne une modification incessante des coordonnées spatiales de l’information. Le retour en arrière devient donc ardu. Le scrolling institue donc une importante rupture dans le mode de lecture, génère une surcharge de la mémoire de travail et complique l’établissement de la cohérence lors des processus de compréhension.

À cette difficulté certains répondent en adoptant le pagging, qui consiste à découper le texte en autant de « pages » que nécessaire, adaptées à la taille d’un écran. Ce système repose sur le principe – très éloigné de la réalité – d’une taille unique d’écran, perturbe la navigation, pose des problèmes de citabilité, et reste un pâle copie de la page imprimée.

Il faut donc pallier cette perte de repères sur le support électronique en créant des ancrages spatiaux dans la page.

Le paragraphe est constitué d’une série de phrases apparentées. Au Moyen Âge, le pied-de-mouche [ ¶ ], parfois en couleur, apparaît d’abord dans la continuité du texte pour signaler le début d’un nouveau groupe de phrases. À la fin du Moyen Âge, on commence à introduire ces groupes en passant à la ligne et en conservant la marque ¶ en début de ligne… jusqu’à ce que les typographes estiment que le renfoncement suffisait à distinguer un nouvel alinéa.

La composition sans indentation s’est peu à peu imposée dans la presse, avec la composition en colonnes où le renfoncement a été remplacé par un interligne plus important entre les paragraphes : c’est le choix que nous avons fait pour les revues du portail Revues.org. D’ailleurs l’ajout, depuis quelques années, de la numérotation automatique des paragraphes rendait l’indentation redondante.

Cette numérotation est doublement utile : elle permet de situer précisément une citation d’une page web ; elle ajoute un repère visuel qui améliore la lisibilité d’un texte.

Marqueurs de page. Afin de scander la page web, il importe de bien distinguer visuellement les blocs sémantiques qui seront autant de repères mémorisables par le lecteur : les listes à puces, les blocs de citation, les images et évidemment les intertitres sont autant de marqueurs.

On voit aussi – notamment sur les blogs – se répandre la mise en exergue de passages (à l’instar de la presse) pour mettre en valeur l’idée-phare développée dans le texte alentour.

Travailler l’ergonomie pour le confort de lecture

Pour penser la macrotypographie d’un site, il faut garder en tête les différentes stratégies de lecture. Alors que les textes imprimés permettent plusieurs modes de lecture – lecture continue, lecture de consultation (d’une revue, d’un journal), de recherche d’information courte et précise (dictionnaire) – le support électronique génère de nouvelles stratégies⁴ dont il faut tenir compte pour adapter la composition typographique au contenu et au support : on présentera différemment un roman destiné à une lecture linéaire sur une liseuse et un article d’une revue en sciences humaines et sociales.

La présentation du plan – ou de la table des matières – est évidemment le premier élément qui permet au lecteur de comprendre la structure d’un document, d’accéder rapidement à une information précise.

Proposer plusieurs formats de lecture revient à tenir compte des différentes stratégies de lecture. Le format HTML est le format source, il permet d’accéder aux autres formats ; il est adapté à une lecture de type scanning, en ligne. Le format Print, comme son nom l’indique, est adapté à une impression immédiate du texte en ligne pour une lecture plus linéaire et concentrée, hors ligne. Le PDF est également adapté à une lecture soit imprimée, soit sur écran, mais en intégrant la notion de pagination, il peut être le fac-similé de la version papier. D’autres formats sont également possibles : le format Phone est destiné à une lecture en ligne sur un téléphone mobile, le format ePub sur des appareils mobiles comme les liseuses, les smartphones, etc.

En conclusion…

L’héritage des pratiques typographiques, des règles de cette discipline, et de son objectif de lisibilité ne doivent pas être oubliés ou abandonnés avec le support électronique. La typographie pour le web serait à la fois un héritage de la typographie classique, et une adaptation aux contraintes nouvelles liées à la composition automatisée. Il est possible, par un travail éditorial et de développement technique, de concevoir des sites web dans une belle typographie. Certaines contraintes sont aujourd’hui insurmontables, notamment au niveau des navigateurs qui ont été développé sans souci typographique et qui, du coup, n’interprètent pas correctement les espaces, par exemple. Il faut espérer que cette question prenne plus d’importance à l’avenir.

Si les logiciels de mise en page ont libéré l’édition des contraintes matérielles de la composition au plomb, ils n’ont pas pour autant fait de leurs utilisateurs, même expérimentés, des typographes ou des graphistes de métier. Tant pour le support papier que pour le support électronique, il est indispensable de former les néophytes à la typographie et à la composition ; et de convaincre les acteurs de l’édition d’acquérir les connaissances nécessaires à la réalisation d’une bonne mise en page, d’une bonne composition, d’un affichage lisible et agréable du texte.

On n’invente pas une typographie : on la recherche, on la réfléchit, on la pense.

Liens

• Enregistrement du cours sur L’édition électronique ouverte et sur Internet Archive
• Voir la présentation du cours sur la page wiki de l’université d’été

Crédits photographiques : « Inès Secondat de Montesquieu », par Élodie Picard, tous droits réservés.

1. Wikipedia est une bonne illustration de ces principes hérités des premiers moments du web : un affichage simplifié (sans doute pour favoriser l’appropriation de l’outil par les internautes), liens très visibles, texte sur large justification. [↩]
2. Citons entre autres Thierry Baccino, La lecture électronique, Grenoble, Presses universitaires de Grenoble, 2004, 254 p. (« Sciences cognitives »). Et, à l’université de Wichita, « Reading Online Text: A Comparison of Four White Space Layouts », par Barbara Chaparro, J. Ryan Baker, A. Dawn Shaikh, Spring Hull & Laurie Brady. [↩]
3. On sait que la lisibilité des caractères tient essentiellement au dessin de leur partie supérieure, d’où l’avantage des polices serif dont les hauts sont plus distincts : cf. Peter Gabor, « Design & Typo le Blog », évoquant les recherches d’Émile Javal (1878) http://paris.blog.lemonde.fr/2009/02/06/typography-legibility-lisibilite-et-typographie/ [↩]
4. Différents types de consultation des sites : scanning, inspection visuelle d’un document sans le lire, mais en couvrant une surface large ; browsing, suivre un exposé jusqu’au bout ; searching, inspection de zones privilégiées, à la recherche d’une information précise ; exploring, exploration du document sans but défini. [↩]

---

---