Typographie, du papier au Web

Dossier réalisé par : J.E., R.A., K.M., V.S.

Le sens du mot typographie a évolué depuis le XVIe siècle et les premières techniques d’imprimerie mises au point par Gutenberg. Du caractère d’imprimerie en plomb ou numérique à la mise en scène de l’écrit, la typographie est un élément fondamental de la prise de sens du texte. Adaptées à l’impression sur du papier, les règles typographiques se sont pourtant mises au goût du numérique. C’est de leur l’évolution du papier à l’écran qu’il sera question dans ce dossier.

Diaporama

Synthèse

Introduction

Le sens du mot typographie a évolué depuis le XVIe siècle, date de création de ce terme. Il renvoie d’abord aux techniques d’imprimerie mises au point par Gutenberg. La typographie, si elle désigne les techniques elles-mêmes, a aussi désigné l’atelier dans lequel elles étaient utilisées. Aujourd’hui, et c’est évidemment le sens qui nous intéressera le plus dans ce dossier, elle renvoie à la mise en forme et à la mise page. C’est de la mise en forme de l’écrit, et de sa mutation lors de son apparition sur le Web, qu’il sera question ici.

Les siècles qui nous séparent de la création du mot nous permettent donc d’opérer un glissement sémantique : en premier lieu, la typographie était liée aux techniques traditionnelles de l’imprimerie en Occident ; aujourd’hui, elle désigne la mise en forme du récit.

C’est son caractère esthétique qui oppose la typographie à l’écriture. Un texte écrit peut-être lu à haute voix, transformé en ondes sonores. La typographie, quant à elle, est du ressort exclusif de la perception visuelle. Elle conditionne l’accès au texte et répond à la problématique de la lisibilité.Cette rapide définition nous permet de cerner un peu mieux le terme, et ses différents ressorts.
Elle peut être neutre, essayer de s’effacer derrière le texte. Elle peut aussi être originale et attirer l’attention du lecteur. C’est ce qu’on observe généralement sur la Toile.
La typographie a également une dimension culturelle, les formes typographies évoquent généralement des textes de typographie semblable, nous permettant de reconnaître parfois une époque lorsque l’on regarde un texte.
On peut distinguer quatre grands ensembles de procédés techniques mais nous avons décidé de nous concentrer, pour cet exposé, sur le dernier : les écritures produites à l’aide de l’ordinateur. Ce procédé peut à son tour être séparé en deux catégories :

– les textes destinés à l’impression et formatés à cette fin ;
– les textes numériques destinés au stockage sur support numérique et à la diffusion sur le réseau.

En France la typographie est encadrée par des règles regroupées dans le Lexique des règles typographiques en usage à l’Imprimerie nationale ou le Code typographique. Ces codes s’appliquent indifféremment à toute composition qu’elle soit mécanique ou informatique.

Exemples :

– abréviations :  Dr pour docteur, M. pour monsieur, Bd pour boulevard. Un point est nécessaire si l’on n’utilise pas la lettre finale : Av. pour avenue ;
– capitale : dans un titre, les Anglo-saxons vont mettre une capitale à presque tous les mots alors que les Français non ; ni aux noms, ni aux mois, ni aux jours.

Plus que de faire une véritable liste de tous ces codes, il est important de comprendre l’importance de ces règles dans notre langage quotidien. Pour en prendre la mesure, le lecteur aura à cœur d’observer ces 6 textes, de plusieurs époques différentes, déponctués volontairement par les auteurs d’un blog du Monde.fr, et constater l’importance de la typographie, au moins d’un point de vue sémantique.

Edwy Plenel, le directeur de Mediapart, s’exprimait sur le sens de la mise en page dans la production de l’information dans un entretien accordé à Arrêt sur images (lien abonné). Dans le passage compris entre la 13e et la 15e minute de la vidéo, il explique en quoi la construction de la maquette influe sur la perception de la temporalité et sur le sens de l’information.

La mise en page, de la presse à bras à l’ordinateur

La mise en page est un élément essentiel de la présentation de l’information, mais aussi du texte et des différents éléments qui l’accom­pagnent. Ses standards ont considérablement évolué depuis les débuts de la publi­cation, de même que sa technique.

À la fin du XVIIIe et au début du XIXe siècle, la mise en page est marquée à la fois par les contraintes techniques et par l’influence de l’imprimerie de labeur (celle du livre, beau­coup moins marquée par les contraintes de temps). Les contraintes techniques sont principalement celles induites par la composition du journal. Pour l’imprimer dans un nombre suf­fisamment important d’exemplaires et suffi­samment vite, les journaux ont alors souvent recours à plusieurs compositions, ce qui fait augmenter le nombreux d’ouvriers néces­saires, de machines, et donc, le prix.  Le Constitutionnel utilise 35 ouvriers dédiés à la composition pour 16 000 exemplaires au début des années 1820.

Une du Journal des débats du 1er pluviôse an 8

Une du Journal des débats du 1er pluviôse an 8

Avec l’arrivée combinée de machines plus performantes (presses mécaniques, rotatives, lino­type, etc.), de la presse populaire, de la concurrence et de la publicité, la mise en forme évo­lue ; les journaux s’étirent sur plusieurs colonnes et, dans les publications plus soignées, laissent de la place aux gravures et aux premières photographies. La mise en forme des publi­cations de presse s’améliore au fur et à mesure de l’apparition d’un public plus large (en op­position au lecteur très érudit du début du journal, qui ne lisant pas tant le journal par envie que par devoir : lire le Tour du monde en 80 jours, de Jules Verne : Phileas Fogg donne une bonne idée du rapport à la presse de l’aristocratie et de la grande bourgeoisie à l’époque).

La presse du XIXe jusqu’à la fin du XXe est marquée par de nombreuses inventions qui la font progressivement passer au stade du développement industriel, mais sans véritable rup­ture. Celle-ci arrive avec l’entrée de l’information dans les rédactions ; le numérique, comme dans bien d’autres domaines provoque un véritable raz-de-marée, dans les habitudes de pu­blication comme dans les métiers de la presse.

La publication assistée par ordinateur (PAO) offre une très grande souplesse, puisqu’elle peut se faire pratiquement sans au­cune contrainte de forme (il n’y a quasi au­cune limite). Elle permet donc l’élaboration de do­cuments ou de publica­tions sophistiqués, qui n’auraient pu voir le jour avant. Paradoxale­ment, le numérique in­troduit aussi une grande rigidité : nombre d’organes de presse, atti­rés par les économies à faire sur les postes des ouvriers du livre, uti­lisent dorénavant une maquette fixe. La liberté apportée par la PAO s’est donc soldée, dans bien des cas, par la mise en place d’un véritable carcan – au sens propre – pour le rédac­teur, obligé d’adapter son texte au cadre, et non l’inverse comme s’était le cas avant.

Article du Monde diplomatique de Juillet 2012

Article du Monde diplomatique de Juillet 2012

Le même phénomène se produit sur le web. La construction d’une page en HTML (hyper text markup language) im­pose une construction en blocs. Les contraintes de la PAO se retrouvent donc logiquement sur ce support. Avec une différence : le positionnement de ces blocs par l’intermédiaire des feuilles de style CSS implique qu’il faille modifier le code pour chaque changement dans la mise en page du site. Il est possible de réaliser ces changements dynami­quement par le biais d’une interface graphique, mais il est nécessaire de les avoir prévus à l’avance, individuelle­ment. La mise en page ne se fait pas intégralement de manière gra­phique, comme en PAO. Pour cause, les règles en PAO sont interprétées par un seul et unique logiciel, toujours de la même manière, alors qu’une multitude de navigateurs per­mettent d’accéder aux mêmes sites sur le Web, avec parfois une étrange conception de l’idée de standard.

Cette différence se justifie donc par le support de publication : un document, en PAO, est conçu avec un certain logiciel, puis imprimé sur une feuille de papier directement à partir de ce logiciel ou d’un PDF fabriqué par lui. Le document est ensuite apporté au lecteur, grâce à une feuille de dimension toujours égale ; le lecteur sur le Web accède au document avec son propre outil de lecture.

Impossible, donc, de changer rapidement la forme d’une page pour l’adapter à un événement particulier. Les contraintes peuvent parfois avoir des conséquences surprenantes : la barre qui présente les rubriques du Monde.fr a vu disparaître la rubrique « planète » depuis la mise en ligne de la nouvelle version du site en mars 2012. Face aux protestations de certains lec­teurs, le Monde.fr avait d’abord argué d’un « problème technique » et assurait travailler à sa résolution. La rubrique n’a toujours pas fait son retour…
Ces contraintes techniques ont fortement conditionné l’apparence des sites web. La colonne, élément phare de la mise en page depuis deux siècles, s’est volatilisée, pour ne réapparaître partiellement que récemment, et très rarement dans le corps du texte lui-même. La relance, positionnée au cas par cas dans les journaux, a tiré sa révérence, et même l’encadré connaît des jours difficiles. Quant aux lettrines, une marche funèbre pourra probablement bientôt leur être écrite.

Image d'un article sur le site du Monde diplomatique

Article sur le site du Monde diplomatique

Même les polices de caractères, autrefois appelées « fontes » dans le jargon des typographes du fait de leur matière, pourtant constitutives de l’identité d’une publication (le titre gothique du Monde par exemple), ont un temps été chassées de la typographie sur le Web ; la possibi­lité de choisir les polices utilisées sur un site vient seulement d’être réintroduite par la nou­velle version du CSS.
Enfin, une nouvelle donnée vient compliquer le paysage de la publication sur la Toile : la taille des écrans. Jusque-là, deux possibilités s’offraient au concepteur d’un site : obliger ses visiteurs à agrandir la page s’ils venaient à partir d’un petit dispositif et leur infliger une co­lonne étrangement étroite s’ils venaient avec un grand écran, ou concevoir une version diffé­rente du site pour chaque taille d’appareils.
Le responsive design (mise en page « réactive »), arrivé avec le CSS 3, permet désormais de concevoir un seul site et d’appliquer des règles différentes dans la feuille de style selon la taille et la nature du support.
Cependant, dans un cas comme dans l’autre, plus la mise en page sera complexe au départ, plus il sera difficile de l’adapter. Le concepteur de sites est donc fortement tenté de rester sur des designs simples, quitte à laisser au placard pour longtemps encore les avancées en termes de confort de lecture apportées par la presse papier au cours de son histoire.
La question serait donc de savoir si cette « typographie du Web » constitue une norme défini­tive, ou si les avancées techniques vont peu à peu l’approcher des standards du papier. La ré­ponse à cette question est conditionnée à la fois par la mise à disposition de langages infor­matiques plus perfectionnés (et donc d’une volonté de les créer) et de navigateurs plus per­formants, mais aussi par la nature des dispositifs de lecture existants. Quelles tailles d’écran vont devenir majoritaire ? Le papier numérique s’imposera-t-il comme une norme, y compris sur des écrans d’ordinateur (ce qui signerait le retour de texte longs sur Internet, et donc un plus fort besoin de mise en page) ?
Autant de questions auxquelles il est difficile de répondre aujourd’hui.

Polices de caractères : Des caractères d’impression aux caractères Numériques

Le caractère est, en typographie, la petite pièce fondue, généralement en plomb, dont l’empreinte forme la lettre ou le signe qui permet d’imprimer des textes sur du papier. Les très gros caractères peuvent être en bois. Un caractère alphabétique peut s’appeler simplement « lettre ».

planche de fonte imprimerie

Planche de fonte d’imprimerie

La typographie, avec ses caractères mobiles, et réutilisables débute avec l’invention de l’imprimerie au XVe siècle et s’achève avec l’avènement de la photocomposition dans les années 1970. Un jeu de caractères typographiques cohérents porte aussi le nom de fonte de caractères ou police de caractères.
Sur le Web, les caractères numériques que l’on retrouve sont souvent très simples. On retrouve souvent quelques exemples bien connus : Time new roman, Calibri, Microsoft Himalaya…

Image de la liste des polices classiques

Liste des polices classiques

Caractère BitMap et Caractère Vectoriel

Les caractères d’une police bitmap sont composés de points situés dans un rectangle quadrillé. L’avantage de cette technique, historiquement la plus ancienne, est sa légèreté. Son gros problème est qu’elle nécessite un fichier représentatif, pour chaque police et par taille utilisée. Lorsque l’on fait la somme des fichiers de toutes les tailles, cet avantage se transforme vite en inconvénient. Par opposition aux polices bitmap, on trouve les polices vectorielles.

Image caractère Bitmap

Caractère Bitmap

Les améliorations apportées par les polices vectorielles les rendent indispensables : possibilité de faire varier la taille, la résolution ou la forme des caractères sans perte de qualité, gestion des ligatures et formes contextuelles, crénage et autres gestion des espacements, etc.

Les polices True Type sont des polices vectorielles.
Tous les formats présentés ci-après (TrueType, OpenType, Postscript Type 1) utilisent des courbes de Bézier pour représenter un caractère. Cette approche permet d’afficher les caractères en grande taille sans aucun effet de pixellisation.

Image qui montre la différence entre bitmap et vectoriel

Différence entre bitmap et vectoriel

La granulation des pixels pouvant créer des effets optiques indésirables pour les petits corps (taille), la fonte numérique comprend des spécifications supplémentaires pour éviter un effet de « bavage ». Ces indications complémentaires sont en fait des algorithmes qui adaptent les caractères aux périphériques basse résolution : elles améliorent le dessin sans modifier de manière permanente le dessin de la police. Cette technique est appellée le hinting.
Ces paramètres vont ainsi par exemple rajouter des pixels à un caractère pour qu’il apparaisse en gras ou en enlever pour éviter qu’il ne bave trop. Le hinting va corriger ce phénomène en décalant les pixels pour que le rendu soit le plus fidèle possible au dessin d’origine de la police de caractères.

Les polices de caractères numériques sont par ailleurs dotées de paramètres de crénage (kerning en anglais) également appelés approches. Il s’agit d’harmoniser les espaces entre les lettres qui peuvent changer couple de lettres par couple de lettres. Ainsi si des corrections ne sont pas apportées, l’espacement entre le A et le V comme dans le mot

Les différents corps (taille) des polices vectorielles ne s’obtiennent pas par simple homothétie. Une police de corps 16, n’est pas une police de corps 8 agrandie deux fois. L’arrondi des empattements possède sa propre échelle qui n’est pas celle du caractère lui-même et ce afin d’éviter les effets d’empâtement.

Sources et ressources complémentaires

Biblio

Collectif. Lexique des règles typographiques en usage à l’Imprimerie Nationale. Imprimerie Nationale, 2002.

Guéry, Louis. Dictionnaire des règles typographiques. 4e édition. Editions Victoires, 2010.

Gautier, Damien. Typographie, guide pratique. 2e éd. Pyramyd, 2001.

Frutiger, Adrian. « La forme des caractères à l’âge de la photocomposition ». Communication et langages 4, no 1 (1969): 45‑53. doi:10.3406/colan.1969.3766.

Web

« pointypo– – L’actualité typographique en français. » Consulté le décembre 22, 2012. http://www.pointypo.com/.

« Typographisme ». Consulté le décembre 22, 2012. http://typographisme.net/.

« Site d’information français d’actualités indépendant et participatif en ligne | Mediapart ». Consulté le décembre 22, 2012. https://www.mediapart.fr/.

« L’espace fine insécable dans les documents HTML | Typographe futé ». Consulté le décembre 22, 2012. http://typofute.com/l_espace_fine_insecable_dans_les_documents_html.

« Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web ». Consulté le décembre 22, 2012. http://www.alsacreations.com/.

« Le Site du Zéro, site communautaire de tutoriels gratuits pour débutants : programmation, création de sites Web, Linux… » Consulté le décembre 22, 2012. http://www.siteduzero.com/.

Téléchargement

Télécharger le diaporama du dossier

Laisser un commentaire