La typographie, un langage créatif au coeur de la création

Que ce soit sur nos télé­phones, des sites webs ou dans notre quoti­dien, la typo­gra­phie est partout. Véri­table outil de commu­ni­ca­tion, nous réflé­chis­sons souvent bien plus au message que nous souhai­tons trans­mettre qu’à sa forme. Un même message peut être inter­prété de diffé­rentes manières selon nos cultures mais aussi prin­ci­pa­le­ment à cause de sa forme. Chaque police est unique et véhi­cule une puis­sante iden­tité, avec laquelle nous devons nous fami­lia­ri­ser.

Bien souvent négli­gée, la typo­gra­phie joue pour­tant un rôle fonda­men­tal dans la réus­site de nos créa­tions. Dans nos travaux de concep­tion, nous oublions souvent de prendre le temps de réflé­chir pour conci­lier esthé­tisme et lisi­bi­lité. Lorsqu’elle est utili­sée effi­ca­ce­ment, une bonne typo­gra­phie peut faire toute la diffé­rence dans l’ex­pé­rience que vous allez offrir à vos utili­sa­teurs.

Re-commençons par les bases

Petite histoire de la typo­gra­phie

La typo­gra­phie est l’art d’ar­ran­ger les lettres et le texte de manière à rendre la copie lisible, claire et visuel­le­ment attrayante pour le lecteur. Elle est compo­sée du style, de l’ap­pa­rence et de la struc­ture de la police. Une typo­gra­phie est créée dans le but de susci­ter des émotions, reflé­ter une époque ou un style, et prin­ci­pa­le­ment pour trans­mettre des messages.

La typo­gra­phie peut être datée du XIe siècle, avec l’in­no­va­tion du célèbre Guten­berg et de ses carac­tères mobiles. Avant l’ère numé­rique, la typo­gra­phie était un métier spécia­lisé asso­cié à l’édi­tion. L’ar­ri­vée d’In­ter­net a boule­versé ce petit monde. Chacun s’est retrouvé avec de vastes librai­ries de police à dispo­si­tion. Depuis, tout un champ créa­tif s’est créé autour de la typo­gra­phie, où chacun peut à sa guise jouer, créer, expé­ri­men­ter. La typo­gra­phie est un art à part entière !

Pour revoir vos bases en images on vous propose : Une vidéo sur l’his­toire de la typo­gra­phie par Domes­tika, un article de Font Fabric sur l*‘évolu­tion de la typo­gra­phie*, et une dernière vidéo sur l’ana­to­mie des carac­tères .

La typo­gra­phie au coeur du design : pourquoi le choix typo­gra­phique est-il déter­mi­nant ?

Au-delà d’un simple choix de belles polices, la typo­gra­phie est un élément central dans la concep­tion d’une inter­face. La majo­rité des sites ont besoin de textes pour être compris, et tous les sites en ont besoin pour exis­ter, réfé­ren­ce­ment oblige. Vous devez consi­dé­rer les divers aspects de la typo­gra­phie tels que la police, la taille, les aligne­ments, les couleurs, etc… pour créer un système utili­sable et beau.

Une bonne typo­gra­phie donnera un ton et une person­na­lité à votre inter­face. Vos utili­sa­teurs à force d’uti­li­ser votre site ou votre appli­ca­tion asso­cie­ront de manière subli­mi­nale la police que vous aurez choi­sie pour votre marque. Bien choi­sir sa typo­gra­phie peut faire la diffé­rence sur l’at­ten­tion que portera votre visi­teur sur votre site web. Il est impor­tant de créer une expé­rience visuel­le­ment stimu­lante et impac­tante, en utili­sant les diffé­rents procé­dés graphiques à votre dispo­si­tion.

Pour mieux comprendre comment la typo­gra­phie peut créer une iden­tité marquée, allez jeter un coup d’œil à la série d’Arte : Safari Typo ! Une bonne source d’ins­pi­ra­tion et d’his­toire sans bouger de chez soi.

Les tips pour choi­sir votre police

Pas facile de choi­sir une police avec le large cata­logue à notre dispo­si­tion. Faire le bon choix dépend de bien plus que de voir ce qui est beau. Nous vous donnons quelques pistes pour aiguiller votre choix :

• Réflé­chis­sez à la person­na­lité ! Comment voulez-vous que votre utili­sa­teur se sente sur votre site ? Quelle ambiance souhai­tez vous expri­mer? Plutôt haut de gamme ? Profes­sion­nel ? Ludique ? Ce sont quelques ques­tions à se poser pour bien choi­sir votre future police. Un bon point de départ est de défi­nir les traits fonda­men­taux de votre marque puis de commen­cer à rassem­bler des polices qui reflètent les traits que vous souhai­tez expri­mer.
• Pensez fonc­tion­nel ! Choi­sir sa police c’est envi­sa­ger toutes les utili­sa­tions qui en seront faites : site web, supports papier, motion design etc. Excepté certains sites très “arty”dont la seule volonté est d’être beaux, il est aussi impor­tant de réflé­chir au fond qu’à la forme. Il n’y a rien de plus frus­trant qu’un site web graphique­ment soigné dont les textes sont diffi­ci­le­ment lisibles, où l’on peine à comprendre où nous devons cliquer ou ce que nous devons lire. Alors au-delà de l’as­pect pure­ment esthé­tique de votre police, envi­sa­gez l’as­pect pratique de cette dernière, vos utili­sa­teurs en seront d’au­tant plus satis­faits.
• Inspi­rez vous, et testez ! Vous vous sentez perdus ? Pas de panique ! Si vous ne savez pas par où commen­cer, ou si vous avez des doutes, accor­dez vous du temps pour aller voir ce que font les autres desi­gners. Quelle police utilisent-t-ils ? Pour quelles marques ? Leur choix de polices vous semble cohé­rent ? Tenez vous au courant des tendances afin d’af­fu­ter votre œil. Et après ? Testez vos choix sur vos maquettes, auprès de votre cible ou de vos proches.

La typo­gra­phie, un champ créa­tif à part entière

Nous l’avons vu, choi­sir une typo n’est pas toujours évident, c’est à nous de construire et déve­lop­per notre “œil graphique” jour après jour. D’ex­pé­ri­men­ter, de tester, de jouer avec celle-ci. Plus qu’un simple support textuel, elle peut deve­nir le design même de nos sites grâce à ses multiples person­na­li­tés. Le conseil à ne pas oublier : Un jeu typo­gra­phique origi­nal est réussi s’il ne dessert pas votre message, pensez toujours à la lisi­bi­lité !

La typo comme design

Avant même la lecture du contenu, la typo­gra­phie apporte une charge émotion­nelle et une atmo­sphère parti­cu­lière au design : autre­ment dit elle déter­mine la person­na­lité et l’am­biance graphique de votre marque ou de votre produit. Cette année la prise de risque est bien­ve­nue, voire néces­saire ! Une typo­gra­phie design s’af­fiche comme un visuel à part entière et non plus unique­ment comme un simple texte. Elles enva­hissent l’es­pace et sont le cœur du design. Surdi­men­sion­nées, elles s’in­vitent même au cœur des para­graphes ! Cette typo XXL se prête à de nombreux jeux de tailles, de graisses, pleines, en contours, fusions photo/texte, trans­pa­rences, bruta­lisme, … A vous d’ex­pé­ri­men­ter et d’être créa­tif !

Les reines du domaine : les polices à empat­te­ments

Utili­sés depuis le XVe siècle, les polices à empat­te­ments ne sont certai­ne­ment pas une nouveauté. Autre­fois réser­vées au monde du print ou du luxe, elles se sont petit à petit popu­la­ri­sées. Depuis quelque temps les polices à empat­te­ments sont de retour sur le devant de la scène et dans nos inter­faces. Les sérifs ont l’avan­tage d’im­po­ser dès le début une forte person­na­lité. Indé­mo­dables, les empat­te­ments apportent une forme de déli­ca­tesse, tout en inspi­rant immé­dia­te­ment à l’uti­li­sa­teur une forme de confiance dès que son regard se pose dessus.

Appre­nez à marier vos polices

La complé­men­ta­rité des contrastes entre les typo­gra­phies est essen­tielle pour une bonne lisi­bi­lité. Une des asso­cia­tions les plus effi­caces et communes pour offrir à vos utili­sa­teurs une lecture agréable est celle entre une police sérif et sans sérifs. Une autre asso­cia­tion qui fonc­tionne à merveille est de conser­ver la même famille de police, mais de jouer avec la graisse de celle-ci ! Bien sûr là aussi, il faut prendre le temps d’étu­dier les polices qui offrent une syner­gie parfaite entre elles, ainsi qu’un bon niveau de contrastes entre elles. Car évidem­ment toutes ne se marient pas forcé­ment correc­te­ment.

De nombreux sites ont vus le jour pour aider à combi­ner parfai­te­ment vos polices, voici notre sélec­tion :

• Type­wolf vous propose des asso­cia­tions de polices de fonde­ries avec l’avan­tage de regrou­per des exemples réels de sites où elles sont utili­sées.
• Arche­type , un outil avancé de combi­nai­sons de polices avec comme bonus de pouvoir visua­li­ser et créer une hiérar­chie typo
• Google Fonts , la réfé­rence des fonts webs

A éviter : Mélan­ger deux polices qui ont beau­coup de person­na­lité peut être une asso­cia­tion risquée, bien souvent le résul­tat provoque trop de bruit visuel et se révèle peu harmo­nieux.

Coup d’oeil sur les perfor­mances

Les polices variables (ou »Variable fonts »)

Dans le monde des polices stan­dards, au-delà de l’har­mo­nie à ne pas utili­ser trop de polices diffé­rentes, nous devons réflé­chir ne serait ce qu’un mini­mum au nombre de styles de polices que nous allons utili­ser. Il faut savoir que chaque style appelle une requête et impacte direc­te­ment les perfor­mances de votre future concep­tion.

L’avan­tage des polices variables, qui contiennent plusieurs styles dans un même fichier, est tout simple­ment de réduire le nombre de requêtes ! Si vous avez des doutes, ou souhai­tez simple­ment comprendre en profon­deur ce sujet, nous vous invi­tons à lire l’ar­ticle écrit par UX Repu­blic sur ce sujet.

Google Fonts, fonde­ries et compa­ti­bi­lité

De trop nombreux graphistes négligent encore de choi­sir des polices compa­tibles avec les navi­ga­teurs, notam­ment lors de refontes de plate­formes de marques, souvent initiées par des direc­teurs artis­tiques assez peu fami­liers avec les bonnes pratiques sur le web. La solu­tion la plus simple est de capi­ta­li­ser sur des Google Fonts qui présentent un gros avan­tage : celui de propo­ser des fichiers de polices parfai­te­ment inter­pré­tés par tous les navi­ga­teurs.

Les fonde­ries offrent quant à elles des polices moins communes, plus origi­nales et plus modernes, mais elles sont souvent soumises au règle­ment d’une licence d’uti­li­sa­tion ; pour un effet « Wahou » orien­tez vous vers ces dernières. Elles sont égale­ment des sources d’ins­pi­ra­tions inté­res­santes pour votre culture graphique. Allez faire un tour sur Pangram Pangram, Font in use, ou encore The desi­gners foun­dry !

Les bonnes pratiques

Si vous avez besoin d’une piqûre de rappel, ou si vous souhai­tez simple­ment décou­vrir les bonnes pratiques d’uti­li­sa­tion typo­gra­phique en Ui design, nous vous invi­tons à lire notre article précèdent. Vous y retrou­ve­rez les règles et prin­cipes de base pour créer une inter­face harmo­nieuse et lisible.

Les tendances typo­gra­phiques 2021

Des typo­gra­phies impo­santes et bruta­listes

Nous avons vu la police prendre une place de choix dans nos design : Grande, grasse, condensé, et tant d’autres effets. Elle devient un élément prin­ci­pal dans la concep­tion de nos design, voire même le design même d’un site.

Des Sérifs plus sveltes

Les polices Serif sont toujours omni­pré­sentes et semblent intem­po­relles. Plutôt réser­vées jusqu’à présent à l’uni­vers du luxe. Elles sont de retour, et s’ancrent désor­mais dans de nombreux secteurs et marques grand public. Les polices sérifs offri­ront des sensa­tions de douceur et de déli­ca­tesse à vos inter­faces. Les sérifs sont de retour, mais plus minces et élégantes.

Sérifs rétro

En plus d’être de retour sous des formes élégantes, la sérif est aussi de retour sous un autre aspect plus rétro. Avec des empat­te­ments inspi­rés du style des années 70, ces polices donne­ront un senti­ment à la fois d’élé­gance et de de convi­via­lité qu’Ins­ta­gram à bien contri­bué à popu­la­ri­ser.

Jeux de défor­ma­tions

nspi­rée des premiers arts numé­riques des années 1980, l’une des tendances les plus origi­nales est la police défor­mée. Étirée, tordue, tordue ou écra­sée, les défor­ma­tions se présentent sous la forme de lettres occa­sion­nel­le­ment pertur­ba­trices dans le design ou le texte. Cette tendance est idéale pour des marques indé­pen­dantes ou alter­na­tives.

Du contours et du constraste

Appa­rue en 2020, la tendance des polices en contours unique­ment reste encore présente. Souvent asso­ciée à un effet de contraste, entre contours et remplis­sage (ou police plus grasse). Cet effet permet d’ac­cen­tuer un mot, un message et donne une impres­sion de confiance. Il faut cepen­dant être prudent en ce qui concerne la lisi­bi­lité. On réser­vera cette tendance aux titres.

Mouve­ments & ciné­tique

Inspi­rée des géné­riques de Saul Bass des années 60, la typo­gra­phie ciné­tique (ou en mouve­ment) est peut-être l’une des dernières tendances en vogue en matière de polices. Une typo animée retient l’at­ten­tion plus long­temps et consti­tue un outil puis­sant pour créer un récit convain­cant pour les marques et les produits.

Les mots de la fin

La typo­gra­phie est au cœur de la concep­tion de votre inter­face utili­sa­teur. Il est donc impor­tant de prendre le temps de bien faire les choses en appliquant quelques prin­cipes et règles de base. Si vous ne savez pas par où commen­cer, prenez le temps de voir ce que font les autres, que ce soit sur Pinte­rest, Behance, ou Insta­gram. Gardez en tête que la fonc­tion­na­lité doit être votre ligne direc­trice.