Dans des articles ou des messages, sur des affiches, des panneaux, des modes d’emploi ou des étiquettes : la typographie est partout. Et évidemment, en UI, elle jalonne le parcours des utilisateur·rice·s d’interfaces numériques et des lecteur·rice·s en général : indications, titres, boutons et instructions diverses.
Les choix typographiques ne sont jamais des hasards, ni seulement le reflet des goûts des typographes. Par exemple, quel est le point commun entre les touches de votre clavier et le panneau de signalisation stop ? Ces deux supports sont en lettres capitales avec une typographie sans sérif (voir le glossaire dans l’encadré bleu).
En effet, dans les deux cas, l’utilisateur·rice a besoin de lire une information courte, de manière rapide et parfois depuis une certaine distance. Les lettres en capitales d’imprimerie sont ainsi une façon d’aller droit au but.
En revanche, SI ON ÉCRIT CET ARTICLE ENTIÈREMENT EN LETTRES CAPITALES, VOUS RISQUEZ DE VITE QUITTER LA PAGE.
Car l’œil humain ne lit pas les lettres une par une. Il suit des combinaisons d’informations déjà connues du cerveau et se déplace de façon saccadé le long des lignes. Vuos puoevz par exmelpe cmopnerdre ctete prhase mmêe si les lerttes ne snot pas dnas le bon odrre. C’est tout simplement parce que le cerveau humain ne lit pas chaque lettre mais le mot comme un tout.
Comme pour toute démarche de design, il ne s’agit pas seulement de choisir une typographie visuellement plaisante mais de d’abord déterminer le contexte d’usage et les cibles du contenu écrit concerné.
Qu’est-ce que la typographie ?
La typographie est une discipline du design graphique qui utilise des caractères (lettres) et des systèmes d’organisation de ces caractères pour des supports (généralement print ou web). L’objectif ? Concevoir des contenus écrits user-friendly, c’est-à-dire lisibles, inclusifs, adaptés à l’expérience utilisateur.
D’un point de vue business, un bon choix typographique capte l’attention du lecteur aux bons endroits et aux bons moments, augmentant ainsi l’usabilité, la qualité de l’expérience utilisateur et potentiellement le taux de conversion.
Pour commencer, on vous a préparé un petit glossaire non exhaustif mais orienté UX sur le vocabulaire spécifique de la typographie. Et pour en savoir plus sur son histoire, rendez-vous à la fin de l’article pour un encadré dédié.
Glossaire
Caractère : signe ou lettre
Police de caractère : famille de caractères avec le même style visuel (exemples : Arial, Time New Roman, Helvetica, etc)
Fonte : la sous-catégorie d’une famille (exemple : Arial regular 12pt)
Sérif et sans sérif : typographies avec ou sans empattements (petits traits ou formes qui prolonge l’extrémité d’une lettre)
Pixel : unité utilisée pour les tailles de polices
Graisse : épaisseur d’un caractère (allant généralement de l’ultra-léger ou ultra-light à l’extra-noir ou extra-black
Interlettrage : espacement entre les lettres d’une police
Interlignage : espacement entre les lignes d’un texte
Orphelins : mots qui se retrouvent seuls sur une ligne en fin de phrase (il faut éviter de les laisser, surtout lorsqu’ils sont courts)
Césure : mot coupé à la fin d’une ligne, divisé par un trait d’union
Pleins et déliés : parties les plus épaisses et les plus fines d’un caractère
Fonderies : entreprises où sont fabriquées les polices de caractères
La typographie dans l’UX contemporaine
Aujourd’hui, la typographie, comme les autres disciplines du design, devient user-centric. Elle doit donc s’adapter aux besoins des utilisateur·rice·s dans toutes leurs spécificités et toutes leurs différences. Elle peut notamment jouer un rôle majeur dans le caractère inclusif d’une interface.
Par exemple, la typographie Luciole a été conçue spécifiquement pour les personnes malvoyantes. Elle est le fruit d’un travail entre le Centre Technique Régional pour la Déficience Visuelle et le studio typographies.fr.
Luciole est composée de plus de 700 signes incluant des caractères numériques et des signes mathématiques qui ont requis une attention particulière pour les adapter aux personnes atteintes d’une déficience visuelle.
Afin d’assurer une expérience utilisateur optimale, la typographie a été testée auprès d’élèves malvoyant·e·s, de l’école primaire au lycée.
Comparaison de Luciole et de Libre Franklin (police de Wedo)
L’année dernière, Twitter a adopté une nouvelle police de caractère, intitulée Chirp. Le réseau social est devenu pour la première fois propriétaire d’une police de caractère unique, nette et lisible sur tous types d’écrans et pour un usage quotidien. En termes de stratégie de marque, cela renforce également leur identité en les distinguant des autres réseaux sociaux.
Twitter présente sa nouvelle typographie avec un tweet
Apple fait également des efforts sur l’accessibilité. En effet, les utilisateur·rice·s d’Iphone peuvent désormais paramétrer leur navigateur Safari selon leurs goûts grâce à l’icône aA présent dans la barre de recherche. Différentes fonctionnalités sont disponibles comme le zoom, qui permet d’agrandir le texte d’une page sans impacter la mise en page.
Fonctionnalités zoom sur le navigateur Safari de l’Iphone
On peut aussi souligner le travail fait sur la typographie Open Dyslexic, conçue pour faciliter la lecture des enfants et adultes atteints de dyslexie. Open Dyslexic est dotée de caractéristiques particulières qui permettent aux lecteurs de moins confondre les lettres entre elles.
Comparaison de Open Dyslexic et de Libre Franklin (police de Wedo)
En 2018, le designer japonais Kosuke Takashi conçoit Braille Neue, une typographie qui combine le braille et un caractère visible (latin ou japonais) : une typographie multisensorielle et inclusive !
Il faut cependant noter que la connaissance du braille n’est pas répandue, même chez les personnes non-voyantes. En France par exemple, avec le développement des solutions audios, seulement 12% des non-voyant·e·s utilisent encore le braille (soit 7 000 à 8 000 personnes).
Typographie Braille Neue
La typographie dans l’espace
Les livres ou les écrans ne sont pas les seuls endroits où l’expérience utilisateur est impactée par la typographie. En effet, les caractères typographiques nous guident et nous informent quotidiennement dans la signalétique des commerces, des musées, des transports, etc.
Le célèbre métro Londonien et sa typographie Johnston, créée en 1916 par Edward Johnston, est une référence en termes de signalétique. Elle est utilisée dans l’ensemble des services de transport publics de la capitale.
Panneau du métro londonien avec la typographie Johnston
En 2016, la fonderie Monotype s’associe à la TFL (Transport for London) pour créer Johnston100. Cette nouvelle version de la typographie iconique revoit les proportions des lettres pour mieux répondre aux usages numériques et de nouveaux caractères font leur apparition comme le dièse (pour les hashtags), l’arobase ou l’esperluette.
La Johnston100 rend donc hommage à la Johnston en conservant les qualités qui en font une référence, tout en s’adaptant aux usages actuels
Typographie Johnston100
À Paris, le designer Ruedi Baur a été missionné pour concevoir la charte graphique du futur “Grand Paris Express”. Ce dernier, qui ne reliera pas moins de 68 gares d’ici 2030, nécessite une identité propre et forte afin d’unifier tout le réseau.
Il faut aussi prendre en compte les typographies existantes de la SNCF et de la RATP notamment. C’est donc une toute nouvelle typographie, la Grand Paris (conçue par la fonderie Typothèque), qui est adoptée. Elle sera utilisée sur tous les panneaux d’informations et de signalisation du Grand Paris Express.
Typographie Grand Paris
5 conseils typo
pour une expérience utilisateur optimale
1. Trop de typo tue la typo !
Sur une même interface il est important de ne pas mettre trop de polices différentes.
Cela peut affecter la lisibilité du texte et perturber l’utilisateur·rice dans la compréhension de sa hiérarchie. On vous recommande de ne pas dépasser 2 à 3 polices différentes et d’en utiliser qui se différencient suffisamment entre elles.
Par exemple, une typographie sérif associée à une typographie sans sérif permettra à l’utilisateur·rice de mieux se situer dans sa lecture.
Si vous choisissez d’utiliser plusieurs polices, privilégiez les combinaisons sérif et sans sérif.
2. Hiérarchie de l’information
Il est important de créer une certaine hiérarchie entre les différentes informations (entre les titres et les paragraphes par exemple) afin que l’utilisateur·rice puisse rapidement scanner le texte.
Vous pouvez notamment varier la taille, la graisse ou la couleur de votre typographie principale. Pour ce qui est de la taille, on vous conseille l’outil Type-scale.com qui vous permet de hiérarchiser vos textes en fonction des besoins de vos utilisateur·rice·s.
3. La typographie servante
Autrement dit, l’information passe avant l’esthétisme !
Il s’agit de mettre la priorité sur la lisibilité et l’accessibilité de vos textes. Pensez à vos utilisateur·rice·s, à leurs usages, leurs devices, aux difficultés qu’ils ou elles pourraient rencontrer.
Par exemple, la couleur et le contraste des textes sont des éléments essentiels en termes d’accessibilité : un texte rose pâle sur fond rouge sera plus difficile à lire qu’un texte rouge sur fond blanc.
Les polices avec sérif sont considérées comme moins accessibles que celles sans sérif : privilégiez plutôt une police sans sérif pour le corps de texte.
4. Enrichir l’expérience utilisateur
La typographie est un des nombreux éléments visuels qui vous permettent de communiquer avec vos utilisateur·rice·s.
Une typographie a une personnalité et une résonance émotionnelle propre qui correspondent à un usage, une culture, une mode ou une époque. Il est donc important de bien la choisir selon vos utilisateur·rice·s, leurs usages ou encore le message ou l’ambiance que vous souhaitez véhiculer.
Le New York Times utilise de la calligraphie pour son logo et une police avec sérif pour ses titres, ce qui évoque un style classique et rappelle la version papier du journal.
La marque de chocolat Milka utilise une typographie avec sérif et une graisse importante pour évoquer la douceur et la gourmandise.
5. Tester, tester, toujours tester !
Que ce soit sur différents devices, en dark mode ou en plusieurs langues, il est important de tester votre typographie dans le plus de contextes possibles.
Testez différentes polices, fontes ou différentes combinaisons de polices. Pensez également à tester vos textes auprès des vos utilisateur·rice·s cibles afin de vous assurer de leur lisibilité et accessibilité. Un travail d’UX writing complètera à merveille cet exercice.
Les typographies marquantes
Pour bien choisir sa typographie, il faut d’abord en comprendre l’origine. L’histoire de la typographie est étroitement liée à celle de l’impression. Ainsi, lorsque le célèbre Johannes Gutenberg invente les caractères métalliques mobiles, il révolutionne pour toujours la diffusion des écrits.
La première typographie qu’il crée est dite « blackletter » : elle préserve un côté manuscrit mais est jugée trop dense et écrasée.
Blackletter par Johannes Gutenberg, entre le 12ème et le 17ème siècle
Pour pallier ces problèmes de lisibilité, Nicolas Jenson crée au 15ème siècle la Roman type. Une typographie simplifiée qui s’inspire de l’architecture romaine. Elle connaîtra un succès immédiat à travers l’Europe. La Caslon, créée par William Caslon, fait partie des typographies dite “Roman”.
Caslon par William Caslon, 1816, pour la fonderie Caslon
Plus tard, William Caslon conçoit la première typographie dite “Sans Sérif”, un nouveau type de caractère aussi appelé « caractère bâton » à cause de son absence d’empattement.
Dans cette classification on retrouve certaines des typographies les plus célèbres et les plus utilisées encore aujourd’hui comme “Helvetica” ou encore “Univers” conçu par Adrian Frutiger pour la Fonderie Deberny et Peignot aux alentours de 1957.
Univers est pensée pour être la plus « fonctionnelle » d’un point de vue typographique, dans l’ensemble des langues. Son nom à l’origine était “Monde”. Ce fut un succès commercial à l’étranger et surtout en Suisse.
Univers par Adrian Frutiger, 1957, pour la fonderie Deberny et Peignot
Le 20e siècle est aussi synonyme de simplicité. À l’instar de l’architecture et du design de produit, les typographies deviennent plus sobres. Certaines s’inspirent du mouvement Bauhaus comme la Futura et la Geometric Sans.
Futura par Paul Renner, entre 1924 et 1927, pour la fonderie Bauer
En 1984, Apple lance le premier Macintosh, capable de lire et reproduire n’importe quelles typographies. Le nombre de ces dernières n’a cessé d’augmenter depuis au point qu’il soit devenu impossible de les trier dans les classifications historiques (comme la Thibaudeau ou la Vox).
D’ailleurs, en avril 2021, l’Association Typographique Internationale (ATypl) a annoncé qu’elle renonçait au système de classification Vox ATypl et missionnait un groupe de travail pour en créer un tout nouveau.