La typographie est un élément de design essentiel à la communication.
Comprendre les principes fondamentaux de la typographie et savoir choisir les meilleures combinaisons de caractères peut considérablement améliorer le design d’un support de communication.
Dans cet article vous allez découvrir comment bien choisir vos polices d’écriture et en faire un allié de taille dans votre communication.
Quelle importance a la typographie ?
Ça ne sera probablement pas une surprise pour vous si je vous dis qu’en communication la forme a autant d’importance que le fond.
Imaginez par exemple que vous êtes entrain de faire vos courses et qu’une personne du magasin s’approche de vous pour vous parler d’un nouveau produit.
Le vendeur se met à parler, son argumentaire est très bien ficelé, mais malheureusement sa façon de s’exprimer gâche totalement son message : son timbre de voix, son élocution, son débit et volume de parole, etc.
À l’inverse, vous pourriez faire 10 mètres plus loin et tomber sur un second vendeur qui lui a un argumentaire bien moins travaillé, mais une vraie aisance orale qui fera peut-être toute la différence à la fin.
Que ce soit sur votre site web ou n’importe quel support de communication, vous devez toujours mettre autant d’effort dans la façon dont vous allez transmettre le message que dans la construction du message en lui-même.
La forme peut totalement gâcher, ou au contraire, décupler l’impact d’une communication.
Ok, la forme est aussi importante que le fond en communication, mais quel rôle a la typographie dans tout ça ?
Les experts de ce domaine disent que «la meilleure typographie est invisible.»
Ce qu’il faut comprendre ici c’est que la priorité de la typographie n’est pas de donner un style au texte, mais de le rendre le plus lisible et agréable possible à lire.
Au même titre que ça ne sert pas à grand-chose d’avoir une belle voix si on a une mauvaise élocution, la typographie a d’abord un rôle fonctionnel avant de chercher à développer un style.
Les différentes catégories de typographies
Avant de voir ensemble comment choisir votre police d’écriture, vous devez d’abord connaître les différentes catégories de typographies avec leurs différences de style et d’utilisation.
Mais au fait, est-ce que vous connaissez la différence entre le terme «police d’écriture» et «typographie» ? Parce que oui, ce ne sont pas les mêmes choses.
La typographie veut dire «type d’écriture» en grec. C’est donc le style des caractères et c’est ce qu’on va voir maintenant. Quant à la «police», c’est une famille bien spécifique d’un style, par exemple Times New Roma, Helvetica, Arial, Futura, etc.
Maintenant que vous savez ça, voyons ensemble les six principales catégories de typographie.
Les serifs
La typographie serif est la plus traditionnelle de toutes et celle qui est la plus utilisée sur les supports de communication physiques (magazines, livres, affiches, etc.)
Cette typographie se caractérise par ses empattements sur certaines lettres.
Elle dégage un sentiment traditionnel, d’autorité et de fiabilité.
Les sans-serifs
Comme son nom l’indique, les sans-serifs sont l’inverse des polices serifs et donc ne possèdent aucun empattement. Elles ont été pensées pour le web parce qu’au départ les ordinateurs n’arrivaient pas à afficher correctement les typographies serifs.
Elles dégagent un sentiment de modernité, de clarté et de stabilité.
Les scripts
Les scripts sont tout simplement la catégorie de typographie faite ou imitée à la main. Elles captent facilement l’attention grâce à la place qu’elles peuvent prendre, mais peuvent aussi être difficiles à lire selon la police choisie.
Elles dégagent un sentiment d’élégance, d’ancienneté et de créativité.
Les display
Les display sont des typographies plutôt décoratives qui sont généralement réservées aux logos ou aux titres.
Elles ont généralement une forte personnalité en étant expressives, uniques et amicales.
Les monospaces
Les monospaces se caractérisent par le fait que chaque caractère occupe la même largeur.
C’est ce type de typographie qu’on retrouvait sur les machines à écrire. Aujourd’hui, ce genre a été un peu mis de côté, mais il reste encore très utilisé dans les éditeurs de texte.
Elles sont structurées et dégagent un sentiment assez neutre et formel.
Les slab
Pour finir, les slabs font partit de la famille des serifs. Elles ont donc elles aussi des empattements sur certaines lettres, mais à la différence des serifs classiques, les slabs ont des empattements plus créatifs et originaux.
Parfois rondes, parfois rectangulaires, la forme de ces empattements permet de moderniser les serifs tout en gardant leurs forces.
Elles dégagent un sentiment d’équilibre, de solidité et de simplicité.
Choisir sa combinaison de polices
Maintenant que vous connaissez les différents types de typographies, il est temps pour vous de faire un choix précis de polices d’écriture.
L’objectif ici sera de choisir trois types de polices qui auront chacune une utilité bien spécifique :
- Une police pour votre logo – On cherchera à choisir une police avec de la personnalité, qui sera identifiable et unique pour se démarquer des concurrents. C’est ici qu’on peut se permettre une prise de risque et faire passer l’originalité avant lisibilité.
- Une police pour vos titres – Ici il faudra chercher un équilibre entre personnalité et lisibilité. Les titres ont le rôle de capter l’attention du lecteur, mais elles doivent rester suffisamment lisibles pour ne pas gêner la lecture.
- Une police pour vos corps de texte – C’est la police qui sera la plus utilisée étant donné que le corps de texte sera logiquement là où il y aura le plus de texte. Cette police devra être la moins originale possible et au contraire très lisible pour apporter un confort de lecture optimal.
Pour le logo, on aura tendance à se tourner vers la catégorie des Display, alors que pour les titres et les corps de texte on cherchera une combinaison de serifs et sans-serifs.
Au même titre qu’il n’est pas simple de créer une palette de couleur sans un minimum d’expérience en design, choisir sa combinaison de polices n’est pas aussi simple qu’on pourrait le croire.
Il ne suffit pas de choisir deux belles polices et de les mélanger ensemble pour donner un résultat qui fonctionne. La typographie est, comme les couleurs, une véritable science.
Le meilleur moyen de ne pas faire d’erreur reste encore une fois de s’en remettre à des designers professionnels :
N’hésitez pas à mettre de côté plusieurs combinaisons et à les tester en situation réelle (sur votre site internet ou tout autre support) pour choisir celle qui fonctionne le mieux.
Toutes les polices qui sont présentées sont téléchargeables gratuitement depuis Google Font.
Pour installer une police vous devrez :
- Cliquer sur une des polices présentées dans la liste
- Cliquer sur le bouton «Download Family» en haut
- Dézipper le fichier en double cliquant dessus
- Ouvrir le dossier et sélectionner tous les fichiers qui se termine en .ttf
- Une fois tous les fichiers .ttf sélectionnés, ouvrez-les et vous aurez la possibilité d’installer les polices sur votre ordinateur
En découvrant la liste des polices de Google Font, vous verrez en haut à droite de chaque encart une indication sur le nombre de styles de la police en question.
Privilégiez toujours des polices avec un plus de 3 styles ou avec écrit «variable».
Les styles sont en fait les déclinaisons de graisses et de style en italique. Il faudra au minimum que la police puisse avoir un style standard, fin et gras.
Ces styles seront importants puisqu’ils sont bien utilisés, ils apporteront de la diversité à vos textes.
Rendre ses polices lisibles
Comme on l’a vu un peu plus tôt, la lisibilité est un élément fondamental en typographie. Faire le bon choix de polices est un bon début, mais ça ne garantit pas nécessairement une bonne utilisation.
Vous pouvez très bien choisir une bonne police, mais mal l’utiliser en situation réelle et donc gâcher sa lisibilité.
Maintenant que vous avez fait votre choix de police, vous devrez faire en sorte de mettre vos polices d’écriture dans les meilleures dispositions pour que le confort de lecture soit le plus agréable possible.
La taille
Rien de surprenant si je vous dis qu’un texte trop petit sera difficile à lire. Mais à l’inverse, un texte trop grand ne sera pas non plus agréable à la lecture.
La question qui complique les choses est : comment savoir si son texte est trop petit ou trop grand ?
Avant de répondre à la question, il faut déjà comprendre une chose importante. Quand il est question d’un support de communication physique, il suffit de connaître la taille du support pour adapter la taille du texte en fonction de la surface disponible.
Avec internet, la question de la taille est devenue un vrai casse-tête.
Un site internet peut être visité de plein de façons différentes. D’un tout petit smartphone, à une tablette, en passant par un ordinateur portable jusqu’à des écrans géants.
Pendant longtemps, on a utilisé le pixel comme unité de mesure pour définir la taille des textes et des autres éléments d’une page web (comme les images par exemple). Aujourd’hui il existe d’autres unités de mesure comme le EM, le REM ou le %.
Vous aurez normalement la possibilité d’utiliser ces unités de mesure sur votre logiciel de création de sites web.
Pour un site web il est plutôt recommandé d’utiliser une taille de 1em pour le corps de texte et de 3em pour les titres.
Le contraste
La couleur d’un texte et celui de l’arrière-plan sont très importants pour le confort de lecture. Si le contraste est trop faible, l’oeil se fatiguera rapidement et il y a de grandes chances pour que le lecteur n’aille jamais au bout de la lecture ou ne capte pas les informations importantes.
Pour être sûr que votre choix de contraste est le bon, vous pouvez utiliser l’outil test de contraste de Coolors.
La graisse
Quand elle est bien utilisée, la graisse est une très bonne façon d’améliorer le rythme d’un texte. Le fait d’accentuer certains mots en augmentant leur graisse permet de casser la monotonie de la lecture et d’améliorer la rétention d’informations de certains éléments.
Mais la graisse peut aussi être mal utilisée. Comme par exemple quand le corps de texte a une graisse trop faible ou que la différence de graisse entre les titres et les corps de texte ne sont pas assez prononcés.
Comme je vous le disais un peu plus tôt, privilégiez les polices avec plusieurs styles pour pouvoir jouer avec les graisses et casser la monotonie de vos textes.
L’espacement
Un bon espacement est primordial pour rendre le contenu d’un site facile à lire.
Sur internet, on ne lit pas le contenu de la même manière qu’on pourrait lire un livre ou un magazine. Sur internet, on scan.
Notre oeil balaye très rapidement la page et essaye de trouver le plus rapidement possible les informations recherchées.
Alors quand un visiteur n’arrive pas à scanner rapidement le contenu d’un site, il ne se complique pas la vie et quitte la page en une fraction de seconde.
Ici on parle de trois types d’espacements :
- L’espacement entre les textes – C’est l’espace qu’il va y avoir entre les différents paragraphes
- L’espacement entre les lettres – L’espace sera ici horizontal et c’est celui qui se situe entre chaque lettre d’un mot
- Et l’espacement entre les lignes – Autrement appelé hauteur de ligne, qui est tout simplement l’espace entre les lignes d’un même paragraphe
Pour l’espacement entre les lettres, la valeur par défaut est généralement la bonne même si parfois un léger ajustement est nécessaire.
Pour l’espacement entre les lignes, s’il est trop proche ou trop éloigné il impactera le confort de lecture. Là encore la valeur par défaut est généralement la bonne, mais parfois l’augmenter peut améliorer la clarté générale du texte.
Pour finir, l’espacement entre les textes. Si on veut rendre un contenu plus digeste, une des premières choses à faire est de chercher à le faire respirer grâce à des espaces vides. Certains design basent même toute leur identité là-dessus (c’est ce qu’on a appelle le minimalisme)
Ici il faut simplement faire attention à ne pas trop espacer des éléments qui ont un lien logique entre eux. Par exemple, quand un texte est trop éloigné d’un corps de texte, le cerveau décompose la page et voit deux éléments plutôt qu’un seul. Ce qui perturbe le scan mental que nous faisons tous une fois arrivé sur une page.
La largeur des paragraphes
La largeur des paragraphes est le dernier élément à prendre en compte.
Quand nous lisons, notre oeil fait un mouvement en Z. On suit le tracé d’une ligne et une fois arrivé au bout, on balaye vers la gauche pour venir chercher le premier mot de la ligne suivante.
Un mouvement automatique qui ne demande pas beaucoup d’effort.
Mais quand il y a beaucoup de texte, comme c’est le cas ici, l’oeil peut vite se fatiguer si le mouvement est trop conséquent. Alors quand la largeur d’un paragraphe est trop grande, l’oeil perd de l’énergie à faire cette diagonale. À force, le lecteur finira par se fatiguer et ne pas retenir toutes les informations importantes.
À l’inverse, une petite largeur de paragraphe n’est pas idéale non plus. Puisque l’oeil devra très fréquemment refaire ce mouvement en diagonale et il sera fatiguera aussi rapidement.
Pour savoir la bonne largeur de paragraphes, rendez-vous sur l’un de vos sites d’information ou blog favoris et observez la taille des paragraphes des articles. Essayez ensuite de reproduire cette taille sur votre site.
