Choix de typographie
Photo by John Jennings on Unsplash

“Il faut tourner sa langue 7 fois dans sa bouche avant de parler”. Eh bien cette expression est aussi véridique dans le choix de typographie pour un site. Il faudrait tourner 7 fois une typographie sur son écran avant de le publier ;) Tout simplement parce qu’elle est une forme de graphisme à part entière. Dans cet article, je vais donc t’aider à comprendre leur rôle, à distinguer leur différence et surtout : à choisir la bonne typographie pour ton design.

Quels rôles jouent-elles dans le webdesign ?

La typographie était comme une touche de charme pour un site, pourvu qu’elle soit lisible. En effet, si elle est assez compliquée à déchiffrer, elle risque de tout gâcher. Le choix de typographie à insérer dans un site web est donc d’une importance capitale.

Il y a une vidéo Youtube dans laquelle je décris cela en bas de l'article. Soutenez-moi en vous abonnant à la chaine YouTube "Happy Desk Design"

Choix de typographie pour un site : comment être sûr ?

Toutes les typographies ne conviennent pas forcément à un site web. Si elles sont mal choisies, ton site risque de paraître ridicule (que ce soit aux yeux de tes clients). Je vais d’ailleurs te donner un exemple : pour un document très sérieux, oserais-tu adopter la police Comic Sans ? En tout cas, je ne le ferais pas :)

Choix de typographie
Photo by Anastasiia Kamil on Unsplash

Fais un test

Pour être sûr du choix de typographie pour ton site, je te conseille de la tester et de voir par toi-même si elle transmet le ton recherché. Tu verras alors un peu plus clair. Aussi est-il pratique de demander l’avis des gens : tes amis, ta famille, tes collègues… Si tu veux des résultats encore plus fiables, pourquoi ne pas t’adresser à une personne qui peut potentiellement faire partie de ton public cible.

Considère ces autres éléments

1. Ton

Si tu crées un site, c’est avant tout pour envoyer un message à ton audience (de recourir à ton service, d’acheter tes produits, etc.). Ce message ne sera jamais compris à 100 % si la typographie utilisée n’a pas le bon ton, c’est-à-dire qu’elle ne fait pas ressortir le sentiment ou l’humeur voulus chez le public cible. Pour un public professionnel, ce ton devrait par exemple être formel. Par contre, en t’adressant à des particuliers, tu peux choisir une typographie moins formelle.

2. Legibility

Quand tu te rends sur un site, mais que celui-ci est difficile à lire, car tu mets beaucoup d’efforts à distinguer les différentes lettres utilisées, que fais-tu ? Je suppose que peu vont répondre qu’ils persisteront et poursuivront leur navigation. La plupart d’entre vous me diront qu’ils partiront tout simplement à la recherche d’un autre site. Comprends-tu donc l’intérêt de la legibility ? L’expérience utilisateur en est impactée.

Voici deux exemples de lettres qui nous rendent souvent confus : i majuscule et l minuscule. Ce ne sont pas les seuls ; les espaces trop élevés ou trop faibles entre les lettres compliquent également la lecture.

3. Lisibilité

Enfin, la lisibilité à proprement parler concerne l’ensemble du contenu. Ce critère dépend essentiellement de la taille de la police, de l’espacement et de sa couleur.

Choix de typographie
Photo by Kelly Sikkema on Unsplash

Quels sont les différents types de polices ?

Tu devrais savoir qu’il existe en tout 5 types de polices : Serif, Sans Serif, Monospaced, Cursive et Display.

Serif

Il est principalement destiné aux documents imprimés. Il s’agit des polices qui ont des “empattements”. Sur le papier, les sérifs (ou empattements) sont en effet faciles à lire. Tu peux avoir un aperçu de ce que c’est réellement en observant ces exemples : Times New Roman, Georgia...

Sans sérif

Ici, les polices n’ont pas de sérifs (ou empattements). Ils sont donc plus simples, et ainsi, faciles à lire sur le web. C’est pourquoi la plupart des polices qu’on voit sur le web sont des sans sérifs. En fait, les premiers ordinateurs avaient du mal à rendre les empattements nets. D’où ce choix jusqu’à aujourd’hui. Voici quelques exemples de polices sans sérifs qu’on a l’habitude de lire : Arial, Verdana...

Monospaced

On parle de police monospaced à chaque fois qu’on a affaire aux polices ayant des caractères de même largeur. Ces types de polices ont fait leur apparition il y a bien longtemps, à l’époque de la machine à écrire. De nos jours, ils sont principalement réutilisés dans les éditeurs de textes. Il y en a plusieurs, mais je connais par exemple Incosolata.

Cursive

Cette typographie imite les écritures manuscrites (Indie Flowers, Great Vibes…). Elle met donc l’accent sur l’intérêt visuel, mais pas vraiment sur la lisibilité. En général, on la rencontre dans les différents titres.

Display

Enfin, les display tapent à l’oeil (Changa One entre autres). Elles sont imposantes, car elles sont composées de polices grandes et grasses. Pour celles de leur famille qui sont fines, elles ont une forme complexe. On voit bien qu’elles veulent attirer l’attention, c’est pourquoi elles sont sur les gros titres.

En tout, nous avons 5 principales typographies. Cependant, les plus utilisées sur le web ne sont que celles avec et sans sérifs. Sont-elles seulement vraiment différentes ?

Choix de typographie
Photo by Mj S on Unsplash

Serif vs Sans Serif : lequel choisir ?

La réponse n’a jamais été aussi simple : le choix de typographie dépend du design voulu.

Si certains pensent que les sérifs augmentent la visibilité, ils ont tort. Dans le monde numérique, c’est plutôt l’inverse. Les sérifs sont moins illisibles, surtout s’ils sont lus sur des écrans à faible résolution. Or, tout le monde n’a pas forcément l’écran adapté. Je te conseille donc d’opter pour le sans sérif pour le corps de texte.

Cela voudrait-il dire que les sans sérifs ne servent à rien ?

Non, je n’ai pas dit ça. Au contraire, tu peux les utiliser. Leurs empattements font d’eux des typographies professionnelles et formelles. Les grandes marques auront une très belle image si elles choisissent les sans serifs comme typographie principale. Pareillement pour les blogs professionnels, les agences de presse, etc. Toutefois, attention à ne pas en abuser ;)

Conclusion

Bref, la typographie n’est pas une simple question de design. Elle tient un rôle non négligeable dans le webdesign, car la perception de ton public cible du message que tu as voulu transmettre dépend d’elle.

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be
Kevin Palombo, Gérant de Happydesk

Hello 👋

Je suis en mission pour ton Web Succès! Qui je suis?

Tu veux apprendre?

Un café? Mais oui, prends ton temps!

25/9/2020

Créer un site internet design : Le Guide

En tant que webdesigner, ton rôle est de t’assurer que l'expérience utilisateur est réussie ! Je t’ai donc préparé ce guide webdesign : 10 astuces pratiques

Ça m'intéresse
11/9/2020

La théorie des couleurs en webdesign

La couleur en webdesign est très importante. Comment fais-tu pour choisir les palettes à utiliser (titres, boutons, etc.) ? Voici la théorie des couleurs.

Ça m'intéresse
28/8/2020

Théorie de Gestalt sur Webflow : comment fonctionne-t-elle ?

Dans la conception d'un site, il faut respecter une règle : la théorie de Gestalt sur Webflow. Qu’est-ce que c’est ? Quels avantages promet-elle ?

Ça m'intéresse

Je veux...

Happy.business

Parce que toute histoire commence par une rencontre. Prenons contact, une vraie personne se cache derrière Happydesk et sera ravie d’écouter ce que vous avez à lui raconter !

Prendre un rendez-vous

Happy.webnews

Parce que nous mettons toutes nos connaissances du monde Digital à disposition de notre Communauté pour les accompagner dans leur quête du Web Succès.

Lire le blog

Happy.webevent

Parce que se sentir moins seul renforce notre essence de leader. Happydesk organise des Events entre Entrepreneurs plus que motivés à se dépasser et atteindre des objectifs jamais espérés.

Assister aux events

Tu veux favoriser ta réussite?

OUI, ça m'intéresse !