Remerciements
Avant tout, un très grand merci à Olivier et Esther qui m’ont encouragée, soutenue et endurée avec une infinie patience quand je devenais désagréable, ce qui s’est souvent produit au fil des mois de la rédaction de Webgrids. Leur présence a été autant un moteur qu’une inépuisable source d’énergie tout au long du projet.
Je remercie naturellement David Rault – fort sage et patient lui aussi – ainsi que Stéphane Deschamps et toute l’équipe de Paris-Web pour la confiance qu’ils m’ont témoignée et l’enthousiasme qu’ils ont manifesté pour la typographie sur le web. Je ne connais rien de plus stimulant que d’échanger avec des personnes qui croient au progrès du web et s’investissent pour le faire évoluer dans la meilleure direction.
Enfin, je tiens à rendre hommage à deux excellents professeurs, François-Marie Mallet et Laurent Pflughaupt, grâce à qui j’ai tant appris et cultivé mon amour de la typographie et de la lettre. L’admiration et le respect que je leur porte sont une véritable source d’inspiration.
Collection dirigée par David Rault
Illustrations : Anne-Sophie Fradier
ISBN : 978-2-911220-44-9 pour la version imprimée
ISBN : 978-2-911220-65-4 pour la version numérique
© Atelier Perrousseaux éditeur 2012
www.perrousseaux.com
www.adverbum.fr
Aux termes du Code de la propriété intellectuelle, toute reproduction ou représentation, intégrale ou partielle de la présente publication, faite par quelque procédé que ce soit (reprographie, microfilmage, scannérisation, numérisation…) sans le consentement de l’auteur ou de ses ayants droit ou ayants cause est illicite et constitue une contrefaçon sanctionnée par les articles L 335-2 et suivants du Code de la propriété intellectuelle. Toutefois, l’autorisation d’effectuer des reproductions par reprographie (photocopie, télécopie, copie papier réalisée par imprimante) peut être obtenue auprès du Centre Français d’exploitation du droit de Copie (CFC) - 20, rue des Grands-Augustins - 75006 Paris.
Dépôt légal avril 2012
La communauté du design web témoigne depuis peu un vif intérêt pour la typographie qui se manifeste aussi bien à travers la dynamique engendrée par la prise en charge de la propriété @font-face que dans une forme de retour aux sources que sont Jan Tschichold, Emil Ruder ou, plus près de nous, Robert Bringhurst.
On voit ainsi se multiplier sites et articles consacrés à la discipline, son histoire et sa mise en œuvre, dans une sorte d’effervescence qui ne doit que nous réjouir. Les fonderies ne sont pas en reste et participent activement à la promotion de la typographie sur le web, un marché qui leur était jusque-là fermé dans la mesure où, jusqu’à fin 2009 environ, il était pratiquement impossible d’utiliser autre chose que les polices de base des systèmes des utilisateurs.
Les caractères et leurs beautés ne sont heureusement pas les seuls à séduire les designers web, qui se tournent vers les grands théoriciens du XXe siècle pour trouver les secrets de la lisibilité, de la clarté et de la belle mise en page. C’est une démarche louable dans un domaine vierge d’histoire tel que le web, mais elle n’est pas sans risque : appliquer simplement les consignes des maîtres à un support qu’ils ne connaissaient pas ne peut que constituer une impasse, dans laquelle William Morris se fourvoyait déjà à la fin du XIXe siècle1.
Malgré la jeunesse du support, nous devons nous efforcer de prendre du recul et de comprendre les fondements de ces règles pour les adapter au web et tirer parti des spécificités, des multiples visages et des possibilités uniques de ce support tout neuf. Nous allons donc, de l’architecture de la page à la composition du texte courant, faire un point sur les pratiques traditionnelles et les nouveaux usages en nous interrogeant sur leur pertinence, sans jamais perdre de vue la finalité de la typographie : offrir au regard du lecteur des contenus clairs, agréables à lire, dans lesquels on se repère aisément.
1. Jugeant les livres de son temps très laids et fort mal imprimés, William Morris a entrepris d’étudier manuscrits et incunables (c’est ainsi qu’on appelle les livres imprimés avant 1501) pour percer le mystère de leur perfection. Il a ainsi produit des livres d’une grande beauté, richement ornementés, mais malheureusement bien trop coûteux et inadaptés à leur époque.
Notre approche du design web est, par la force des choses, conditionnée par l’immense héritage de la mise en page sur papier, des siècles de développements artistiques et techniques qui ont forgé nombre de nos réflexes de conception actuels. À ce titre, il est intéressant de faire un bref retour en arrière pour comprendre sur quoi se fondent nos canons.
Avant que le livre ne prenne la forme que nous lui connaissons aujourd’hui, on utilisait le rouleau ou volumen1, qui est encore le format traditionnel de la Thora. Les scribes de l’époque alignaient des colonnes sur cette longue bande de papyrus que l’on déroulait d’un côté et enroulait de l’autre au fur et à mesure de la lecture. À bien y regarder, la pratique de lecture propre à ce support que les anglophones appellent – accrochez-vous – scroll, en fait un cousin bien plus proche de la page web que ne le sera jamais notre livre de poche, descendant végétarien du codex en parchemin.
Le codex, puisqu’on parle de lui, a été inventé au début de notre ère pour des raisons principalement économiques, géopolitiques et pratiques. Le papyrus présente en effet le double inconvénient de ne daigner pousser que sur les rives du Nil et de très mal se conserver dans les contrées grises, froides et humides du nord de l’Europe. On a donc abandonné le support végétal au profit de la peau de veau tannée et lissée, le parchemin, qui s’accommodait mieux des climats européens et permettait de mettre un terme à une relation de dépendance inconfortable vis-à-vis de l’Égypte, seul et unique fournisseur de papyrus.
Le morceau de parchemin est nécessairement limité par la taille de l’animal qui l’avait sur le dos. C’est ainsi qu’on met au point les premières techniques de reliure qui permettent d’assembler plusieurs rectangles de parchemin pliés en deux ou en quatre. Le codex est né : c’est une révolution pour le livre et sa conservation, et donc pour la préservation et la diffusion de la connaissance et de la pensée. C’est aussi ce qui fonde le principe même de mise en page, qui naît à l’instant où les copistes se retrouvent face à une unité nouvelle : la double page.
En effet, nous sommes encore bien loin de la naissance de la typographie et pourtant, l’essentiel des paramètres de ce qui nous préoccupe ici est en train de se mettre en place.
Les copistes – essentiellement des moines, vous vous en doutez – élaborent des règles complexes de proportion pour délimiter la place que doit occuper le texte dans la double page. Ces méthodes, auxquelles s’apparente par exemple le Canon des Ateliers, ont traversé les âges, parfois au prix d’importantes recherches, et sont toujours considérées comme des références aujourd’hui. Selon les dimensions de l’ouvrage, le rectangle d’empagement peut être divisé en colonnes, dans lequel le texte est généralement calligraphié « au pavé » (à l’aide de nombreuses césures et abréviations).
Vous savez sans doute aussi que les livres produits à l’époque du manuscrit traitent essentiellement de sujets religieux, historiques et scientifiques. Parce qu’ils célèbrent Dieu ou les hauts faits de personnages importants, les ouvrages des deux premières catégories se prêtent merveilleusement à un traitement artistique et créatif du texte (et les journées sont longues dans les monastères du Moyen Âge). Se développe donc un vocabulaire très varié et luxuriant de l’ornementation, à l’échelle de la lettre avec la lettrine enluminée, du mot – je pense notamment aux titres et en-têtes de chapitres, et de la page qui s’enrichit de bordures et d’illustrations.
Tracés régulateurs, colonnes, justification, titres et paragraphes, ornements, illustrations et bordures : tous les éléments de la mise en page se trouvent dans le codex. D’un point de vue technique, l’imprimerie va profondément modifier et rationnaliser la pratique, fixer la forme de l’alphabet, épurer la mise en page, mais sans apporter aucun élément nouveau. Si elle constitue une révolution pour le livre et la diffusion de la connaissance et permet la naissance de la presse, on pourrait même dire qu’elle représente un appauvrissement pour la mise en page par le nombre de limitations qu’elle comporte.
Cela ne doit certainement pas être considéré comme un défaut : la calligraphie et le livre unique cèdent la place à la typographie, une technique qui a pour vocation le seul service du texte et sa diffusion. Par contre, le web lève une grande partie des contraintes propres à l’impression mécanique, si bien que le designer web de 2011 peut renouer avec la liberté de son religieux prédécesseur, sans le vœu de chasteté ni les épidémies de peste. Joie et bonheur.
• • •
1. Si le terme volumen veut bien dire « rouleau », il faut savoir que les Romains désignaient déjà l’objet sous le nom de liber, qui a donné livre.
Si j’ai pris le temps de vous parler de toutes ces choses, c’est non seulement par égard pour ceux qui nous ont précédés mais aussi pour mettre en évidence à quel point le support peut influencer la pratique. La pratique typographique actuelle est issue du plomb et du papier : pour comprendre comment on peut l’exploiter pour l’écran, tâchons d’abord de définir les spécificités de ces deux supports et les relations qu’ils entretiennent avec les créateurs et les utilisateurs.
J’aime autant vous prévenir que cette section est une longue suite d’évidences, qui méritent néanmoins d’être rappelées.
Le papier est avant tout un objet. Il est présent dans l’espace, il est tangible, il existe. Il se caractérise par sa couleur, sa texture, ses dimensions, son format. Si vous altérez ces caractéristiques, non seulement vous aurez nécessairement fait preuve d’un minimum de violence, mais en plus vous n’avez plus tout à fait le même objet dans les mains.
Il en va de même pour le texte et les éléments imprimés sur le papier. Une fois en place, vous ne pouvez plus les déplacer ni en changer la taille ou la couleur sans avoir recours à des méthodes (découpage, grattage) qui vont forcément briser l’intégrité de l’objet que vous tenez.
Ces caractéristiques ont deux conséquences essentielles : la force de la contrainte spatiale et la stricte hiérarchie des rôles du créateur et de l’utilisateur.
Celui qui réalise une mise en page dispose d’un contrôle total sur le produit imprimé (je parle bien de contrôle, et non de liberté – je me place au niveau de l’exécution et non de la créativité). Il lui appartient entièrement de gérer la contrainte spatiale, les limites physiques de son document, de manière à composer du texte lisible, intelligible, utile et, si possible, esthétique. Il peut, pour cela, s’appuyer sur un ensemble de règles et d’habitudes, forgées par des siècles de pratique.
Et pour le lecteur, ou plus généralement l’utilisateur car l’imprimé est déjà une interface, cela se traduit au contraire par une absence totale de contrôle.
Cette répartition déséquilibrée du contrôle, propre au support papier, n’est ni bonne ni mauvaise en soi. Bien sûr, si les conditions de garantie de votre sous-marin télécommandé ont été composées en corps 7, en gris pâle sur fond blanc, vous ne pouvez, au mieux, que sortir une loupe pour les déchiffrer. Mais s’il s’agit non pas de littérature légale mais d’un carton d’invitation à une exposition, et que le créateur s’appelle Herbert Bayer, personne ne songera à se plaindre qu’il ne peut pas altérer la composition parfaite qu’il a sous les yeux. C’est au créateur d’assumer pleinement les responsabilités inhérentes à sa position et donc d’assurer l’utilisabilité de sa production, par nature inflexible.
L’imprimé définit ainsi très précisément les rôles respectifs du créateur1 pratiquement tout-puissant, et de l’utilisateur qui est en position de réception. Il faut comprendre que cette relation est en fait aussi vieille que l’écrit ; on comprend donc qu’elle puisse fortement conditionner le travail d’un designer web même si elle est caduque pour ce support.
Le support qui nous intéresse, la page web, est quant à lui insaisissable. Il n’existe pas en soi. Tant qu’une page web n’est pas consultée par un utilisateur, et donc générée par son navigateur, elle n’est qu’une somme de fichiers html, css, JavaScript et autres. De ce fait, elle n’a pas de dimensions a priori. Entièrement élastique, elle s’adapte à la taille de son contenu et – grand avantage par rapport à son homologue en papier – elle peut intégrer autant de blanc que vous le voulez sans que cela coûte un centime de plus.
Les conditions de génération de la page déterminent une part importante de son affichage, à commencer par ses dimensions visibles2, qui dépendent de plusieurs facteurs : la résolution et la taille de l’écran, son orientation (les moniteurs sont au format paysage, les écrans de smartphones sont au format portrait, l’iPad peut adopter l’un ou l’autre), mais aussi la taille de la fenêtre du navigateur, le fameux viewport, qui devient plus cruciale que celle de l’écran quand celui-ci fait plus de 17 pouces et a donc vocation à afficher plusieurs fenêtres3. La question de la taille du viewport est d’autant plus intéressante qu’elle tient compte du choix de l’utilisateur et pas seulement d’un élément technique.
Les conditions technologiques ont également un rôle à jouer, et la typographie est suffisamment concernée par cette problématique pour illustrer amplement cette idée. Jusqu’à fin 2009 et la résurrection de @font-face, les designers n’avaient à leur disposition que les polices installées sur les ordinateurs de leurs visiteurs potentiels, et l’on s’en tenait donc à un petit groupe de font-stacks classiques censés assurer un minimum d’homogénéité du choix typographique d’un système d’exploitation à l’autre.
Depuis, @font-face a brisé les chaînes des designers qui peuvent utiliser la police de leur choix dans leurs pages web… en tenant compte de la diversité des prises en charge de cette propriété, et en fignolant encore la chaîne de substitution de polices parce que nombre d’utilisateurs n’ont pas un navigateur assez récent pour interpréter @font-face. Au final, la propriété @font-face crée – pour le moment bien sûr – plus de problèmes qu’elle n’en résout.
Dimensions et choix de caractère : le designer web doit renoncer à avoir un contrôle total sur ces deux paramètres fondamentaux. Et nous n’avons même pas encore évoqué les modifications que l’utilisateur peut appliquer à l’affichage de la page. Les navigateurs permettent tous d’agrandir ou de réduire la taille du texte pour l’adapter à la vue du lecteur – renonçons également à déterminer les corps de façon absolue. Il existe enfin des plugins qui superposent à la page une série de styles visant à améliorer le confort de lecture, et vous avez sans doute déjà ouvert Firebug pour modifier à la volée la css d’un site peu lisible.
Concevoir un design pour le web implique donc une grande part de lâcher-prise qui peut être déroutante car notre culture graphique est essentiellement fondée sur l’imprimé. Il serait pourtant dommage de considérer cela comme une carence sans voir tous les avantages que possède ce support qui peut se dérouler à l’infini sans qu’il faille pour autant déforester la moitié de l’Amazonie.