design et typo

Le réglage des approches entre lettres nous conduisent naturellement à examiner les conséquences de ces variables sur la composition des textes. Approches horizontales, mais aussi approches verticales ou plus précisément l’interlignage contribuent à définir ce que j’ai appelé dans la note précédente «la couleur typographique» ou, si vous préférez le gris typo.

Nous allons examiner ces variables sous l’angle de quatre polices de caractère. L’Adobe Jenson, très belle Humane qui n’est pas sans rappeler l’ITC Berkeley, l’ITC Garamond, Garalde transitionnelle, le Meta Book du graphic-designer Eric Spiekerman et le Futura Book d’après le dessin de Paul Renner (1927).

J’ai pris ces quatre exemples parce qu’ils présentent une parfaite symétrie de problèmes dans leur anatomie:

Mais voyons d’abord les images. Cliquez pour agrandir et voir la typo à la bonne résolution:

Forte disproportion pour le Jenson entre les hauteurs de cap et l’œil des bas de casses

Faible différence pour l’ITC Garamond entre les hauteurs de cap et l’œil des bas de casses

Forte disproportion pour le Futura Book entre les hauteurs de cap et l’œil des bas de casses

Faible différence pour le Meta entre les hauteurs de cap et l’œil des bas de casses

Ces quatre polices de caractères focalisent la question que nous nous posons chaque fois que nous abordons la mise en page d’une publication. Petit œil ou grand œil, that is the question.

A corps égal, un petit œil me permettra de caler plus de signes dans une composition, mais c’est là une faible consolation si l’on songe que l’on perd en visibilité de la lettre. Je dis visibilité parce que la taille d’une lettre influe d’abord et avant tout sur sa visibilité c’est à dire sur la distance où l’œil peut lire confortablement une ligne de texte (voyez les planches d’opticiens & ophtalmos). Je ne peux comparer la lisibilité de deux caractères qu’à hauteur d’œil des bas de casse égale. Si tant est qu’on puisse parler de différences de lisibilité entre deux Garaldes ou bien entre une Garalde et une Linéale. J’ai toujours privilégié la notion de confort de lecture sur la notion par trop réducteur de lisibilité. Mais j’ai déjà publié plusieurs notes sur ce sujet et nous y reviendrons. Nous disions que sur le plan économique un caractère à petit œil me permet de gagner en nombre de caractères. Bien. Mais en agrandissant le corps d’une police à petit œil, afin de la mettre à égal niveau de celui à grand œil, je perds du coup cet avantage économique et doublement. 1) parce que je rentrerai moins de signes par lignes, 2) parce que je devrai augmenter l’interlignage en proportion de l’augmentation du corps.

Voyons maintenant la couleur typographique induite par les deux facteurs: les approches et les interlignages.

Les Approches : le Adobe Jenson

Tout d’abord permettez-moi de m’excuser pour cete mise en forme un peu poussive mais le dispositif des blogs est assez contraignant lorsqu’il s’agit de faire ainsi une démonstration qui sur papier, dans une brochure à l’italienne par exemple permettrait de mettre en perspective les différences de gris typos.

Donc pour profiter pleinement de cette étude il vous faut absolument cliquer sur les images. Maintenant que remarquez-vous? Que vous composiez un texte en approche normale ou avec +20, +40 ou +80 unités additives, le texte reste tout aussi lisible. Les deux choses qui changent fondamentalement sont le gris typo, on va du plus foncé vers le plus clair, aérien, et le nombre de signes que vous entrez dans un espace contraint. Il va de soi que plus vous interlettrez plus vous diluez les mots-objets. Ce faisant le déchiffrage est plus délicat, parce que l’œil commence à percevoir les lettres au détriment des mots. Je sais que très récemment l’Éducation Nationale est revenue des méthodes d’apprentissage de lecture globale, mais on voit bien dans ces extrêmes (approche normale et interlettrage +80) que nous devons bien examiner la texture d’une composition au regard de la perception des mots tout autant que des lettres. Cela n’a évidemment aucune importance lorsqu’on interlettre des mots pour les logotyper, mais il n’en va pas de même pour un pavé de texte. Voyons maintenant les autres caractères subir les mêmes expérimentations:

Les Approches : l’ITC Garamond

où l’on voit bien que les mêmes effets produisent les mêmes causes. Plus on interlettre plus on fait disparaître les mots au profit des lettres, donc le sens même du texte. Et finalement une règle commence à s’imposer : dangereux de dépasser un interlettrage de 40 unités (dans InDesign). A 80 nous ne lisons plus que des lettres éparpillés dans un pavé de texte.

Même essais avec les deux autres caractères, le Meta et le Futura:

Vous avez cliqué sur les images, analysé la perception que vous aviez des pavés de textes. N’avez-vous rien remarqué? Curieusement mais pas tant que ça, tout ce que je viens de vous dire au sujet de l’éparpillement des lettres en approches +80, est moins vrai en Adobe Jenson et Futura Book, qu’en ITC Garamond et Meta Book. Cela tient à l’anatomie des caractères. Le fait est que d’avoir des disproportions importantes entre capitales et bas de casses augmente considérablement la lisibilité des mots. Et je ne parle plus des lettres. Mais des mots. Ceux-ci restent plus perceptibles en Jenson ou Futura parce que les futs des lettres montantes donnent une meilleure lecture de l’alphabet. Ils permettent la différenciation des lettres, donc du coup les mots restent plus cohérents. Je ne veux pas paraître prétentieux, d’autant que moi même j’ai cédé à cette mode des caractères à gros œil, mais je dois vous avouer que depuis les années 70, alors que Herb Lubalin et Aaron Burns installaient les nouveaux dispositifs de création d’alphabets en privilégiant l’œil agrandi des bas de casses, on n’a jamais fait réellement attention aux dégats que créaient cette mode sur des générations de lecteurs. Alors me direz-vous, y a-t-il des solutions pour contourner cette difficulté. Oui et nous allons voir dans les planches suivantes le rôle primordial de l’interlignage.

Les Interlignages :

Même expérience. Composition de trois pavés dans quatre caractères. Interligne compact (c’est-à-dire minimum par rapport à une composition en plomb), surinterlignage de 1,5 pt et surinterlignage de 3 pt. Nous allons voir que c’est là que réside la solution des problèmes de lisibilité. Pour comprendre le phénomène cette fois nous allons faire suivre les pavés de textes dont l’interligne est identique.

Vous voyez tout de suite que ce que je vous disais précédemment se vérifie. L’Adobe Jenson et le Futura Book laissent filtrer les mots bien plus que l’ITC Garamond Light ou le Meta Book. Ah les gris typos sont beaux mais trop denses avec les deux dernières typos. Voyons maintenant un surinterlignage de 1,5

pt:

Vous commencez à «sentir» le bonheur de voir vos yeux respirer autour des mots. La fatigue diminue et la rétine se déplace assez agréablement dans le texte. Mais ajoutez y  encore 1,5 pt et ce bonheur sera total :

Et pour le coup nous pouvons revenir à nos études récentes de comparaisons entre caractères. Bien sûr que l’ITC Garamond et le Meta sont formidables d’élégance  et de modernité. Mais à condition d’être considérablement surinterlignés. Là nous retrouvons de la lisibilité parce que nos rétines n’ont plus tendance à décrocher des lignes et à se mélanger les pinceaux si vous me permettez cette trivialité. On peut même désserrer les approches sans trop perdre en lisibilité. Plus vous composez lache, plus il vous faudra surinterligner.

Ainsi donc nous venons d’examiner deux paramètres essentiels dont nous disposons tous sur nos logiciels de mise en page. Que ce soit dans Quark X-Press ou InDesign nous avons la possibilité d’accéder aux réglages les plus fins. Les valeurs d’approches que je viens de vous donner doivent être divisés par 2 au moins dans Quark parce que le logiciel comme vous avez pû vous en rendre compte travaille en millième de cadratin (le cadratin est un espace dont la valeur est égale à la hauteur du corps) alors qu’InDesign subdivise en 2000 ce même cadratin.

Mes conseils : avant toute mise en page, travailler la lisibilité des textes. Vous choissez une grille de mise en page, déterminant pour la largeur des colonnes donc pour la force du corps dans laquelle vous allez composer votre texte. En fonction de ce corps et de ce caractère (qui devra être choisi de sorte à éviter un trop grand nombre de césures) vous devrez faire des essais d’interlignage pour décider du meilleur rapport corps-approche-lisibilité. Pour les paramètres de compostion justifiée je vous invite à relire ma note sur les gris typos où je donne les valeurs de base (qui peuvent être adaptés selon les cas). Vous comprenez aussi la complexité de faire des compromis (le mot est laché) entre les impératifs économiques (de rentrer une quantité de texte dans une page) et les impératifs de lisibilité.

Interrogé sur les approches serrées pratiquées par les typographes américains des années 70, Hermann Zapf n’eut qu’un geste de la main : ah! sex spacing typography ?

Les approches typographiques, peu abordés dans les manuels et guides qui traitent de l’anatomie de la composition sont un des éléments les plus essentiels de la mise en page. Certes le choix d’un caractère est déterminant pour la mise en page d’une revue, magazine ou un quotidien, sans oublier toutes les publications publicitaires et culturels. Quelle révolution pour l’administration française lorsque le génie de Roger Excoffon choisit le Souvenir d’Edward Berguiat pour mettre en page les feuilles de déclaration d’impôts sous un Giscard d’Estaing qui n’était encore «que Ministre des Finances». Certes la couleur typographique (ou gris typo) dépend beaucoup du caractère utilisé mais ce n’est pas à mon sens le premier paramètre. Qu’est ce qui détermine cette couleur?

1 | Tout d’abord la graisse d’un caractère. C’est le déterminant absolu. Comme la couleur d’une voiture. Composé en gras (ou bold) un titre, un texte se verra attribué une des premières place dans la hiérarchie de la lecture. Massin a bien exploité cet artifice dans son magnifique ouvrage «La Cantatrice Chauve» d’après l’œuvre d’Eugène Ionesco. Il a fait parler les textes en fonction de la graisse et des tailles des corps. (je consacrerai une note à cet ouvrage prochainement).

2 | La taille aussi de ce texte, bien sûr. Il va de soi que c’est presque à égalité avec la graisse, la première manifestation d’une couleur typographique.

3 | Mais tout de suite derrière vient l’approche. Serrée, la composition se densifie, lache elle se clarifie et devient aérien. C’est tout aussi valable pour la composition d’un titre que de pavés de textes.

4 | Le choix du caractère. Bien entendu il est aussi primordial que les facteurs précédents. Mais là on joue plus sur les perceptions inconscientes du lecteur. Que l’on choisisse une Humane ou une Garalde ou encore une Mécane transitionnelle (Le Clarendon par exemple), on influe considérablement sur le style d’un pavé de texte ou d’un titre. Mais là on emploi des moyens culturels dont la syntaxe appartient à l’inconscient collectif et ne relève pas d’une perception lucide du public. Comme le mobilier ou l’architecture la typographie a évolué au long des siècles au gré des inventions technologiques de la gravure, du papier et des moyens d’impression. Les lecteurs que les études ont poussé jusqu’aux facultés ou grandes écoles sont certainement plus sensibles à ces évolutions que les employés qui ont du s’arrêter en chemin. Mais ce n’est pas pour autant et surtout en France que les formes des caractères sont perçues de la façon la plus lucide et clairvoyante.

Classification Thibodeau vs Classification Vox (des familles de caractères)
(Cliquez sur l’image pour la voir au mieux de sa résolution)
Avertissement : depuis les dernières mises à jour de TypePad, il faut ouvrir les images trop grandes avec le clic droit (ouvrir dans une nouvelle fenêtre ou nouvel onglet) pour pouvoir se déplacer dans les images.

Nous allons dans cette note nous intéresser uniquement à l’anatomie des approches des lettres.

Une des priorités du metteur en page d’un texte, d’un titre est d’équilibrer les approches. Pourquoi? c’est simple, si vous laissez au milieu d’un mot un blanc irrégulier, vous créez un espace de division qui va gêner la lecture. Une des erreurs la plus communément pratiquée consiste à croire qu’il suffit de composer les lettres à égale distance les unes des autres pour en établir la régularité de lecture. Or c’est méconnaître les lois optiques de la perception. L’œil ne lit pas des distances entre les lettres mais des volumes de blanc entre elles. Voici un exemple pour que vous visualisiez le plus facilement ce phénomène.
(Cliquez sur l’image pour la voir au mieux de sa résolution)

J’ai symbolisé dans l’exemple ci-dessus les volumes de blanc par des pastilles grises qui viennent remplir les espaces de lecture tel un liquide ou mieux encore comme des petits cailloux. De fait deux espaces sont à peu près à égale distance lorsque vous pouvez y couler à peu près le même nombre de cailloux. Ci-dessus comme dans les exemples suivants j’ai choisi volontairement les situations les plus périlleuses pour un metteur en page. Lettres obliques accolées à des lettres droites ou rondes etc. Bien entendu le problème se complique d’autant que nous avons décidé d’utiliser des lettres à pâtins et encore plus dans le cas où vous choisissez une mécane (ci-dessous, le Clarendon gras) :
(Cliquez sur l’image pour la voir au mieux de sa résolution)

Dans l’hypothèse d’un choix de Linéales (Antiques), nous avons la possibilité d’adopter deux stratégies. Celui, traditionnel de la composition en plomb, aux approches non imbriquées ou, à peine (composé ici en Helvetica normale (55 | régular) :
(Cliquez sur l’image pour la voir au mieux de sa résolution)

et  l’autre stratégie qui consiste à resserrer les approches au point de presque faire se toucher les lettres. Sex spacing Typography, ainsi nommé par Hermann Zapf, sans doute par humour et référence au mouvement flower génération issue de la guerre du Vietnam et Woodstock. Mais plus sérieusement cette mode ne fut pas le fruit d’un hasard. C’est très exactement entre 65 et 75 que les technologies du phototitrage ont connu leur apogée. Libérée des servitudes du plomb (sa rigidité), les phototitreurs sous la pression de directeurs artistiques aussi renommés qu’Herb Lubalin ou Milton Glaser se sont vu obligés de resserrer les approches au delà du raisonable pluisque la lisibilité n’était pas la priorité de ces DA. Seul comptait l’impact visuel, la tache typographique dans la page blanche :
(Cliquez sur l’image pour la voir au mieux de sa résolution)

Pour vous donner un aperçu d’ensemble d’approches normales et volontairement désserrées voici un exemple de composition décliné avec un caractère de chacune des familles de la Classification Vox (ci-dessus). Où l’on voit le rôle primordial des approches. Parce désserrées elles permettent de logotyper un mot. Désserrées les approches nous font pénétrer inconsciemment dans le champ visuel de l’esthétique et de l’énonciation institutionnelle tant prisé par les designeurs de logotypes. Où il est démontré que cette couleur typographique dont je parlais plus haut dépend bien plus (excepté des caractères gras ou scriptes) des approches que du choix d’un caractère.
(Cliquez sur l’image pour la voir au mieux de sa résolution)

J’ai composé en grisé les scripts et gothiques que jamais nous ne composerons en capitales parce que bien trop illisibles. Et voici encore sur un mot bien plus périlleux à la composition une autre déclinaison qui montre bien qu’en réglant correctement les approches paires on arrive à une homogénéité dans la lecture.
(Cliquez sur l’image pour la voir au mieux de sa résolution)

Cette petite étude anatomique n’était évidemment pas destinée aux nombreux professionnels qui lisent mon blog chaque semaine. Mais à tous ceux, étudiants-élèves d’écoles d’arts graphiques, et web designers qui seraient passés par des filières plutôt informatiques et n’ont pas eu la chance d’expérimenter ces aspects de la typographie, et plus généralement à tous ceux, lecteurs grand public et étudiants d’universités qui s’intéressent à la mise en page et veulent en connaître d’avantage sur la grammaire typographique.

Suite de l’article [Garamond vs Garamond | physiologie d’un caractère typographique]

Vous êtes sur le point de faire une mise en page. Un livre, une brochure, une plaquette institutionnelle, ou tout simplement le design d’une nouvelle papeterie. Au moment du choix de la typo, un nombre de possibilités infinies s’ouvre à vous. D’abord parmi tous les styles de familles, Elzéviriens ou Humanes-Garaldes-Réales (ou Transitionnels chez les Anglo-saxons) ou encore les Linéales (Bâtons-Antiques en France, mais Grotesques en Allemagne ou Gothic chez les Américains), ou bien et pourquoi pas une belle Mécane Egyptienne, Sérif-slab chez les Américains). Le choix d’une typo s’impose lors de l’analyse du contenu rédactionnel et du style du document, la Presse, le Livre obéissent à des usages, habitudes de lecture qui pour être transgressables n’en sont pas moins codifiés depuis plus de 500 ans. La publicité se permet à la fois plus de liberté lorsqu’elle travaille à faire connaître des produits nouveaux et modernes, mais s’il s’agit de Beauté, Luxe ou encore de l’institutionnel (Banques, Assurances, Gouvernement, Culture etc.) la tendance est naturellement de revenir à des expressions typographiques traditionnelles connotant des valeurs liées au passé.

Il en va ainsi du Garamond, dont l’usage est de plus en plus réservé au Livre et à l’expression publicitaire pour le luxe. La Presse, depuis que le Times de S. Morison a fait ses preuves tant en économie d’espace qu’en lisibilité s’est orienté plus précisément vers les Réales et nous y reviendrons dans une autre note.

Mais nous voici à analyser, comparer les Garamonds entre eux (voir le billet précédent). Les six dessins, fortement ou peu différenciés vous ont montré l’aspect graphique des tracés. Mais il était indispensable d’en venir à leur utilisation courante, la composition, qui est bien le lieu, la destination finale d’une création de caractère.

Voici six pavés de textes composés en corps 11 interligné 12 points. Notez bien qu’il est absolument indispensable de cliquer sur les compositions pour en voir le détail anatomique, car dans le blogroll ils sont considérablement réduits.

Six Garamonds, six textes composés tous les six en c.11 inter.12 et vous éprouvez une sensation diffuse. Ce n’est pas du tout le même caractère. Toutes les différences que nous avons relevé dans la note précédente se retrouvent ici dans la texture même des pavés. Le Simoncini, le Garamond, le Monotype sont dessinés avec une hauteur de cap (X-Height) assez petit, il en découle que l’œil de la bdc est aussi assez réduit et du coup le texte composé en c.11 (un talus de 11 points identiques dans tous les cas, cf. note précédente) semble assez petit. Il en résulte tout de même un avantage s’il en est un, on peut entrer plus de signes dans un encombrement identique, avec un léger avantage pour le Garamond d’Adobe qui fait rentrer le texte du tramway sur sept lignes tout juste.

Le Garamond Stempel se compose sur sept lignes et demi et en clignant l’œil pour rétrécir votre champ de vision (jusqu’à ne plus voir que les masses de gris) vous constatez que c’est celui qui se trouve dans un gris médian par rapport aux autres Garamond.
Parce que si les Garamond de Berthold et d’ITC semblent plus présents à notre perception, c’est que soit leur dessin de cap. (et tout l’alphabet qui s’en suit) est vraiment très grand (Berthold), soit l’œil de la bas de casse exagéré pour donner plus de visibilité (Garamond ITC de Tony Stan). Mais du coup nous nous retrouvons avec des impératifs économiques de calibrage désastreux en apparence puisqu’en quelques lignes on prend une moitié de ligne en plus, ou même une ligne entière pour l’ITC.
Autrement dit et c’est un exercice que je vous invite à faire vous même, de composer les six textes avec des corps différents afin d’avoir un encombrement identique pour tous les pavés, et on s’apercevra alors que les Simoncini, Adobe Garamond et Garamond Monotype légèrement agrandis retrouveront leur raison d’être. Vous pensez que c’est aussi simple? Vous vous trompez. Et c’est là où ça se complique. En agrandissant les corps, il faudra aussi interligner un peu plus proportionnellement. Ce qui fait que l’on va reperdre de l’espace de composition. Et qu’au final un Garamond d’Adobe pour paraître d’égale densité qu’un Garamond Berthold ou ITC, aura un encombrement de composition peut-être plus grande. C’est donc une combinaison assez complexe même s’il parait relativement binaire que de faire correspondre le gris typo d’un caractère à celui d’un autre.

Ce sont des questions qui prennent tout leur sens dans l’édition lorsque le choix d’une typo pose le problème non d’une page supplémentaire au livre, mais parce que les pages fonctionnent par cahiers, celui d’être obligé de rajouter un cahier de 16 pages supplémentaires. On mesure là l’importance économique des dessins de caractères aussi bien pour l’édition que la Presse.

Note précédente : Garamond vs Garamond | physiologie d’un caractère typographique