Typo : et si vous envisagiez votre projet web comme un aéroport ?

De Facebook à Google, en passant par les SMS, les panneaux d’affichage, les journaux, nous vivons entourés de mots, de lettres, de typographie. Et, si nous nous intéressons au sens des mots, leur forme est rarement observée : nous arrêtons notre regard lorsqu’une personne se met À CRIER dans un commentaire, mais à part les majuscules, sommes-nous attentifs à la manière dont les lettres se couchent sur l’écran ou le papier, aux jambages, aux boucles, aux empattements ? Et pourtant, le titre Vogue serait-il aussi glamour sans son élégante typographie ? Est-ce qu’un rapport annuel s’écrit en Comic sans, et que dire de Coca-Cola dont la seule typographie suffit à définir la marque dans toutes les langues ?

Cette excellence est portée par un métier, celui de typographe. L’un des plus renommés est décédé en septembre dernier : Adrian Frutiger. Concepteur des polices Univers, Avenir, Frutiger, il a participé à de nombreux projets d’envergure et retenu notre attention. Créateur de typographie, cet art n’est-il pas désuet à l’heure où Dafont.com recense des milliers de créations différentes ?

Nous allons essayer d’identifier les moments forts de la création d’une typographie, d’en retenir les leçons, les principes majeurs à partir de son application dans un aéroport. Plus proche de nous, quels doivent être les partis pris, le questionnement d’un webdesigner lorsqu’il conçoit et imagine ? Quelles sont les clés pour choisir une typographie ? Un projet web est-il si différent d’un aéroport ?

Concevoir une typographie : l’exemple de la signalétique de Roissy

C’est au début des années 1970 que l’architecte Paul Andreu, responsable de la construction de l’aérogare de Roissy fait appel à Adrian Frutiger pour concevoir la signalétique du terminal. Le défi dans ce projet est de composer avec une architecture particulière (l’aéroport est conçu comme un cylindre) : dans ce contexte, la signalisation est indispensable, elle doit guider, rassurer, être compréhensible en un battement de cil tout en étant bilingue.

Lorsqu’Adrian Frutiger accepte cette mission,  il n’en est pas à son coup d’essai. En 1959, il avait déjà collaboré avec Charles Peignot à l’aménagement de l’aéroport d’Orly. Il en retire des enseignements majeurs sur l’emploi des majuscules dans un espace contraint et sur l’usage de l’italique, une première expérimentation riche et structurante.

En 1970, pour l’aéroport, Adrian Frutiger décide de créer une police sans sérif  (Wikipedia explique qu’en typographie, les empattements, ou sérifs sont les petites extensions qui forment la terminaison des caractères dans certaines polices d’écriture). Il estime qu’il faut un caractère nu, « sans fioriture artistique ». La source d’inspiration du Roissy (cette typographie sera ensuite renommée « Frutiger » par ses commanditaires, avec l’accord de son créateur)  sera la typographie Concorde (créée en 1960), retenue pour sa pureté, son efficacité mais surtout pour la lisibilité des chiffres, omniprésents sur les panneaux. « Une signalétique ne se lit pas comme un livre », elle impose des contraintes spécifiques de lecture. « L’enjeu est la rapidité de la perception. » Frutiger utilise des caractères minuscules et majuscules (leçon tirée de l’expérience d’Orly) pour permettre aux lecteurs de « saisir plus rapidement l’image des mots ». Il explique que les minuscules « polies et simplifiées au fil des siècles par la rapidité de l’écriture, se laissent moins différencier [que les lettres majuscules], elles se fondent plutôt en image de mots, si bien que leur sens est rapidement saisi, pour ainsi dire “photographié par le lecteur” »*.

“L’idée créatrice, surtout dans l’écriture, est d’essayer toujours de se limiter, de regarder d’abord le cadre dans lequel on évolue.”

Adrian Frutiger s’associe également avec un spécialiste des couleurs qui préconise de ne pas utiliser de contraste trop marqué. Des expériences avec des caractères noirs sur fond blanc puis sur fond jaune démontrent la pertinence de cette dernière proposition. C’est ainsi que des textes — noirs pour le français, blancs pour l’anglais — sur un fond jaune, ont emporté l’adhésion. Les tests ont été nombreux pour la signalisation intérieure, car la taille des lettres doit être fonction de la distance avec le lecteur. À l’usage, l’interlettrage (espace entre les lettres) en revanche se révélera trop fin, notamment pour la signalisation routière de l’aéroport.

Au total, les travaux d’Adrian Frutiger sur les signalétiques d’aéroport ont duré près de dix ans ! Un premier projet en forme d’expérimentation, le choix d’une typographie guidé par les contraintes d’utilisation – notamment les conditions dans lesquelles les voyageurs sont amenés à lire les panneaux (en courant ou en marchant) –, l’importance de l’univers coloré mis à contribution pour améliorer l’utilisabilité (et non pour décorer ou agrémenter), etc., ces éléments font furieusement penser aux méthodes centrées autour de l’utilisateur affectionnées par les webdesigners. Peut-on transposer certains principes lors de la conception de sites ? Quelles bonnes pratiques suggère cet exemple ?

Les enseignements appliqués à la conception digitale

Choisir la bonne police pour votre projet web signifie choisir d’une part la famille de polices qui correspond à votre projet et d’autre part, parmi celles-ci, la police qui conviendra au plus grand nombre d’utilisateurs de votre site ou de votre application. Attardons-nous tout d’abord sur la police de titre.

Une police de caractères porte en elle tout un imaginaire, elle évoque immédiatement un secteur d’activité, le sérieux ou la nonchalance, le classicisme ou la modernité, etc. Par son élégance, le contraste entre ses pleins et ses déliés, ses empattements, son interlettrage, une police commence, dès le premier survol d’une page, à forger une image de votre contenu. On peut donc, sans prendre de risque, énoncer quelques règles générales. Selon votre secteur d’activité vous opterez pour une police classique à empattements pour un cabinet d’avocats ou de consultants. Un site dans le secteur du luxe aura intérêt à se servir parmi les didones, Bodoni par exemple. Les polices un peu massives, grasses et carrées évoquent une force et une stabilité qui peuvent être associées au sport, à la construction, à l’automobile, tandis que les secteurs artistiques et créatifs pourront se permettre de piocher parmi les polices plus fantaisistes.

D’une manière générale, et cela est aussi important pour votre image que pour votre lisibilité, il est préférable de se limiter à deux polices sur un site : une pour les titres, une pour le texte. Cela permet de hiérarchiser les éléments et d’éviter l’impression de fouillis que donnerait la multiplication des styles. La possibilité existe toujours d’utiliser du gras pour donner de l’importance à un terme ou une phrase et les italiques, principalement pour les citations. En revanche, s’amuser à déformer une police — en jouant sur l’approche, sur l’échelle horizontale ou en utilisant une fonte « condensée » — est une mauvaise idée puisque les lettres auront alors tendance à se rencontrer voire à se superposer et à rendre ainsi plus difficile la distinction entre les n, les m et les r, par exemple, ce qui peut poser de gros problèmes aux personnes dyslexiques. Une police est une famille de fontes : elle regroupe tous les jeux de caractères, gras, maigres, italiques, romains, condensés…

En ce qui concerne l’accessibilité et, plus généralement, la lisibilité, quelques grands principes prévalent également.

Tout d’abord d’un point de vue technique, pour que le texte puisse être librement agrandi, sa taille doit être exprimée en une unité relative et non en une taille fixe en pixels. C’est majoritairement le cas aujourd’hui puisque ce sont essentiellement les anciennes versions d’Internet Explorer qui exigeaient une taille de texte en pixels.

Tout comme Frutiger cherchait quels éléments dans son lettrage rendraient le panneau indiquant la porte d’embarcation n° 15 lisible au voyageur courant dans les couloirs de Roissy, il faut trouver ce qui facilitera la lisibilité de votre page. À la base, dans les deux cas, c’est le rapport entre le noir et le blanc, entre le caractère et l’espace qui l’entoure. Il faut donc trouver l’interlignage optimal, qui conduit l’œil d’une ligne à la suivante sans se perdre. Il faut également se poser la question des sérifs dans la police de corps de texte. Frutiger disait que « les empattements matérialisent la ligne de lecture et en facilitent la perception, (…) dans ce sens, il est évident que le caractère à empattements est plus confortable ». Cela est vrai dans le cas d’un texte relativement long, beaucoup moins dans le cas de notules. Les polices les plus connues d’Adrian Frutiger et les plus utilisées en signalétique sont d’ailleurs des polices bâton.

De plus, les personnes dyslexiques ou malvoyantes ont plus de mal à déchiffrer les caractères à empattements. Pour elles, l’important est de pouvoir différencier facilement les lettres similaires comme le b et le d, le p et le q. De longs jambages inférieurs et supérieurs, des contrepoinçons importants et une hauteur d’x suffisante (voir image ci-dessous) aident également à accentuer les différences entre les lettres et facilitent la lisibilité.

Si l’on peut utiliser le gras et l’italique, le souligné devrait être réservé aux hyperliens et les capitales aux majuscules. Parce qu’on reconnaît la forme générale d’un mot quand on lit, les textes en all caps (tout en capitales d’imprimerie) sont difficiles à lire puisque toutes les lettres ont la même hauteur.

Qu’elle s’affiche sur des panneaux autoroutiers ou sur une smartwatch, la typographie participe à l’expérience des utilisateurs. Loin d’être un élément anodin dans la conception d’un dispositif de communication, la typographie – avec ses corollaires, les couleurs et les contrastes – est essentielle et doit être choisie avec un soin particulier pour véhiculer une image cohérente et singulière. Une des clés dans la réussite des projets est la compréhension du contexte des lecteurs, une connaissance d’autant plus fine si elle est basée sur une mise en situation réelle – pour vivre, ressentir et partager l’expérience des lecteurs. L’accessibilité est également un point fondamental. Négliger cet aspect serait une erreur : c’est dans les situations délicates que la promesse du service, du produit, est éprouvée et jugée par les utilisateurs.

Le mot de la fin reviendra à Adrian Frutiger : « Un caractère est comme une cuillère, écrivait-il. Si le soir, je me souviens de la forme de la cuillère avec laquelle j’ai mangé ma soupe le midi, c’est que sa forme n’était pas bonne. »**

Xavier Berger, Delphine Delfieu et Cécile Almonté

Poursuivre votre lecture sur cette thématique  :

** Adrian Frutiger

Les livres dont il est l’auteur  :

• * Caractères: L’œuvre complète
  publié par Heidrun Osterer, Philipp Stamm, Fondation
• L’homme et ses signes signes | symboles | signaux
  Les Ateliers Perrousseaux
  
• Forms and Counterforms
  Syndorpress
  
• A bâtons rompus. Ce qu’il faut savoir du caractère typographique
  Les Ateliers Perrousseaux

La typographie, tout savoir pour l’apprivoiser
Typographe reconnu et inventeur de Parisine – l’identité typographique du métro parisien – Jean-François Porchez était l’invité du dernier Creative Drink’up.

L’histoire de la typo en stop motion

Sacré caractère
Douze films courts d’animation sur des polices qui ont du caractère ! Une web série sur la typographie imaginée par Thomas Sipp.

---

---