La typographie est plus qu’une série de glyphes, c’est un asset qui est au coeur d’une identité de marque ou d’une expérience. Bien utilisée, elle ajoute de la valeur à son support.
Il est important d’avoir les best practices dans le choix d’une typographie ou d’une combinaison de plusieurs. Il n’y a pas de règles précises sur le choix d’une typographie, mais il existe de nombreuses astuces afin de s’aider.
Choisir une typographie peut être une étape difficile, en partie dû au très grand nombre de typographies existantes et à leurs variétés. Il y a deux types de designers, ce qui utiliseront régulièrement les mêmes typographies car ils sont à l’aise avec et elles fonctionnent facilement sur un projet. Les autres, qui passeront beaucoup de temps à trouver la combinaison idéale. Tout dépend également du type de projet, un projet de Brand ne sera pas traité de la même manière que la conception d’un Produit. Certains projets nécessitent un apport typographie fort, pour d’autres il ne s’agît que d’un asset de communication et non de design.
C’est un mélange de règles et d’intuition, et d’un oeil (une sensibilité graphique) se développant à chaque expérience. Voici donc un guide avec quelques astuces afin de faciliter le choix d’une typographie pour votre interface.
Dans un premier temps, il est important de pouvoir différencier les différentes familles de typographie :
Que nous évoquent les typographies ?
Bien qu’il ne faille succomber aux stéréotypes, l’histoire et l’anatomie de chaque famille de typographie leur donne une facilité d’utilisation dans certains contextes. Voyons brièvement leur origine et leur usage.
Serif : Les serifs, ou empatement, sont les extensions que l’on trouve aux extrémités des lettres. En théorie, les empattements proviendraient de la trace laissée par l’outil (ex: la plume) lors du geste d’écriture. Elle évoque quelque chose de professionnel, sérieux, rigoureux, traditionnel et subtil. Les serifs s’utilisent beaucoup dans le domaine de l’édition et de l’imprimerie, ainsi que du luxe. Il existe différents types de serif (ou empatement) : les triangulaires, carrés, plats.
Sans serif : On les rattache à des usages modernes, sérieux, sobres, leur apparition venant de l’industrialisation et l’optimisation. Les sans-serifs sont souvent présent dans l’industrie digitale. On peut également constater l’augmentation de leur présence dans du branding. Par exemple, pour se moderniser, de nombreuses marques de luxe on troqué leur logo serif pour un sans-serif.
Display : Les displays sont inspirées des lettrages manuels arrivés autour des années 1770, utilisés pour des posters publicitaires. Elles ont utilisées en petite dose pour des éléments ayant pour but d’attirer le regard rapidement (titres, headers, quotes…). Il n’y a pas de style pré-défini pour les displays, ce qui en fait un type de typographie très disparate. Elles sont plus excentriques, ont moins de restrictions que les autres familles de caractères.
Script (ou cursive) : Initialement apparue autour de 1380, l’écriture script évoque le quotidien, l’intime et la correspondance privée. Sa manière de simplifier les tracés par rapport aux écritures script peut lui donner un aspect joyeux, enfantin, rond, mais aussi travaillé, luxe ou romantique (exemple: une marque de parfum)
Mieux vaut être pertinent, qu’ambitieux
La typographie, ça doit avant tout être lisible le plus rapidement possible. Elle ne doit pas fatiguer l’utilisateur, le déconcentrer de son but, et doit être appropriée pour l’occasion.
Bien qu’une typographie originale puisse vous plaire et devenir votre préférée, il se peut qu’elle ne convienne pas au scope donné. Dans une majorité de cas, il faut privilégier une typographie qui fonctionne avec tout, s’adapte à son environnement. La métaphore du vêtement l’explique bien : votre tenue préférée n’est pas forcément adaptée au quotidien.
Pas plus de deux ! S’il s’agit de deux typographies différentes. De cette manière là, on recommande souvent d’en utiliser une pour du titrage, une autre pour des corps de texte.
Dans le cas d’une même typographie, on peut s’autoriser à utiliser plusieurs graisses pour différencier les différentes hiérarchies. Les typographies dîtes variables offrent une grande variété de traitement en plus des poids, tels que la largeur même de la lettre, et sont facilement manipulables. De plus en plus fréquentes (apparues en 2016), elles permettent une belle cohérence tout en diversifiant les styles de la typographie. Un autre avantage est que tous ces styles sont répertoriés sur un seul fichier.
À quel moment d’un projet faut-il choisir une typographie ?
Il est important dans un premier temps d’avoir défini le scope. Pour quel projet la typographie sera t-elle utilisée, pour communiquer quel message ? Un produit défini à être utilisé sur le long-terme, ou un projet de court terme tel qu’une présentation ? Un projet long terme nécessitera une composition typographique confortable et pérenne qui ne lassera pas, et qui, en cas de changement n’aura pas un impact trop important (bien sûr, un re-design et un changement de personnalité peut faire partie de la stratégie).
Ensuite, il faut prendre en compte l’humeur, la personnalité, le message de la marque. S’engager trop tôt avec un choix typographique peut restreindre le designer. Est-ce traditionnel ? Amusant ? Moderne ? Quel est le langage utilisé ?
En interface, l’utilisation d’un design system et de styles de textes peut permettre la modification de ce choix au besoin. Cependant, lorsque cela concerne une composition graphique, il est plus prudent de finaliser un choix rapidement.
Le site m2.material.io montre son design system, et permet de tester les styles avec différentes typographies à cette adresse-là.
Quelle est la personnalité du projet ?
Les typographies ont une personnalité, tout comme les marques. Utiliser des mots-clés et fonder des design principles permet de consolider la personnalité de marque. Ce travail se fait en collaboration avec l’équipe marketing pour une efficacité optimale. Si vous retrouvez ces mots-clés, ou des synonymes, dans la description d’une typographie alors il est possible qu’elle soit un bon choix.
Pour définir la personnalité d’une typographie il faut en observer les déliés, empattements, formes globales ainsi que la famille à laquelle elle appartient. Quelles sont les connotations que l’on en retire ? Les formes sont-elles droites et taillantes, ou rondes et douces ? Sobre et modernes, ou ont-elles des fioritures ? Ont-elles un petit détail qui vient casser l’ambiance que l’on pensait lui accorder ?
Qu’est-ce qu’une mauvaise typographie ?
Afin de limiter les choix que l’on peut avoir, on peut écarter les typographies qui :
- N’ont pas d’accent, ou une majorité de glyphes manquants. Une bonne typographie devrait pouvoir s’adapter à plusieurs langues.
- L’approche (ou interlettrage) est mal réglé, ce qui crée des espacements dans un mot. Certaines typographies nécessitent un réglage de l’approche manuel afin d’être améliorées.
- Une mauvaise qualité visuelle : une typographie pixelisée que ne fonctionne qu’à petite taille
- Trop fantaisiste / dure à lire dans un contexte de marque ou de produit. Bien que la Papyrus fonctionne en tant que logo d’Avatar, elle ne convient pas à des utilisations professionnelles dans un corps de texte, un produit, ou toute utilisation plus impactante.
Quelques outils pour s’aider
- https://jmattthew.github.io/better-font-finder/better-font-finder.html : Filtre les fonts google par similarités
- https://www.canva.com/learn/typography-terms/ L’anatomie d’une lettre et autres termes du lexique typographique
- https://www.fontbrief.com/fontbrief Un catalogue de typographies filtrable par des critères de personnalité
- https://v-fonts.com/ Présente différentes fonts variables.
- https://www.typewolf.com/
La typographie est un vaste sujet qui sera amené à être approfondis à travers d’autres articles, afin de rentrer en détails sur des spécificités.
