Choisir ses typographies : faire simple, cohérent et lisible

Choisir les typographies d’un site fait partie des moments que j’aime beaucoup.

On ouvre une bibliothèque de polices, on teste, on compare et on tombe sur une typographie magnifique. Puis une deuxième. Puis une troisième qui serait parfaite juste pour les petits sous-titres…

Et vingt minutes plus tard, on essaie de justifier pourquoi le site aurait besoin de quatre familles typographiques différentes. 🙃

Avec le temps, ma façon de faire est devenue beaucoup plus simple. Je ne cherche plus d’abord une belle typographie, mais une famille qui correspond au projet, fonctionne dans de vraies conditions et permet de construire tout le site sans avoir à lutter contre elle.

Avant d’en ajouter une deuxième, je commence donc toujours par une question :

Une seule ne suffirait-elle pas ?

Très souvent, la réponse est oui.

Commencez par le projet, pas par Google Fonts

La tentation est grande d’ouvrir directement une bibliothèque de typographies et de commencer à faire défiler les résultats. Je le fais encore, évidemment : c’est la partie amusante.

Mais avant cela, j’essaie de comprendre ce que la typographie doit raconter.

Un cabinet d’avocats, un restaurant, une galerie d’art et une entreprise industrielle n’ont pas besoin de transmettre la même chose. Selon le projet, le site pourra chercher à paraître :

• sobre ;
• chaleureux ;
• institutionnel ;
• technique ;
• élégant ;
• accessible ;
• créatif.

La typographie participe immédiatement à cette perception. Elle ne fait évidemment pas tout : les couleurs, les images, les espacements et l’ensemble de la direction artistique travaillent avec elle.

Mais une famille très expressive utilisée sur un projet qui demande beaucoup de sobriété peut rapidement donner l’impression que quelque chose ne colle pas. À l’inverse, une typographie parfaitement neutre ne sera pas toujours le meilleur choix pour une identité qui cherche justement à affirmer une forte personnalité.

Avant de me demander quelle typographie utiliser, je commence donc par une autre question :

Quel caractère le site doit-il avoir ?

La recherche devient immédiatement plus simple.

Une belle typographie n’est pas forcément la bonne

C’est probablement le piège numéro un : vous découvrez une famille superbe, sa présentation est magnifique et le grand « Aa » affiché sur sa fiche vous donne immédiatement envie de refaire tout votre site autour.

Très bien. Maintenant, essayez de l’utiliser dans de vraies conditions :

• un titre principal sur deux lignes ;
• un paragraphe de 150 mots ;
• un bouton ;
• un élément de menu ;
• des chiffres ;
• des caractères accentués ;
• une adresse email ;
• puis une version mobile.

C’est déjà un peu moins glamour.

Une typographie destinée à un site doit fonctionner dans les situations réelles du projet.

Regardez-là en grand...

Les titres permettent généralement d’exprimer davantage de caractère. Une typographie assez expressive peut très bien fonctionner en grande taille, surtout lorsqu’elle est utilisée avec parcimonie.

Mais même dans ce contexte, quelques vérifications s’imposent :

• Un titre un peu long reste-t-il agréable à lire ?
• Les caractères très larges ne rendent-ils pas chaque titre gigantesque ?
• Les graisses les plus épaisses fonctionnent-elles correctement ?
• Les lettres conservent-elles leur personnalité lorsqu’on s’éloigne du joli mot choisi pour la présentation ?

Une typographie ne doit pas uniquement séduire sur quelques lettres soigneusement sélectionnées. Elle doit pouvoir accueillir les vrais titres du site.

... mais surtout en petit

Le corps de texte est beaucoup moins indulgent. Lorsqu’une personne doit lire plusieurs paragraphes, la lisibilité passe avant l’effet waouh.

Certaines typographies sont magnifiques dans un titre et deviennent franchement pénibles à lire sur vingt lignes. C’est l’une des raisons pour lesquelles je préfère les tester rapidement dans une vraie composition plutôt que de les juger uniquement dans une galerie.

Une typographie ne doit pas seulement être jolie. Elle doit faire son travail.

Vérifiez ce que contient réellement la famille

Toutes les familles typographiques n’offrent pas les mêmes possibilités. Certaines disposent de nombreuses graisses et de véritables italiques ; d’autres ne proposent qu’un Regular et un Bold.

Certaines sont également variables et permettent d’ajuster beaucoup plus finement leur apparence.

Et puis il y a celles qui semblent magnifiques… jusqu’au moment où vous réalisez qu’elles ne contiennent que deux styles...

Ce n’est pas forcément rédhibitoire : tout dépend des besoins du projet.

Mais si vous souhaitez construire toute l’interface autour d’une seule famille, disposer de plusieurs graisses et variantes devient particulièrement intéressant.

C’est l’une des raisons pour lesquelles je vérifie toujours ce que contient une famille avant de la sélectionner.

Avez-vous vraiment besoin de deux typographies ?

Pendant longtemps, j’ai utilisé une typographie pour les titres et une autre pour le corps de texte. C’est une combinaison classique qui peut très bien fonctionner, mais elle n’est absolument pas obligatoire.

Aujourd’hui, mon premier réflexe consiste plutôt à me demander :

Une seule famille peut-elle faire tout le travail ?

Avec une famille suffisamment polyvalente, vous pouvez utiliser :

• une graisse forte et une taille importante pour le titre principal ;
• une graisse intermédiaire pour les petits titres ;
• une version normale pour les paragraphes ;
• éventuellement un peu d’italique.

Cela suffit déjà à construire une hiérarchie très riche sans introduire une seconde famille. Et la cohérence vient presque naturellement.

C’est simple. Donc forcément, ça me plaît. 🙂

Une seule famille ne veut pas dire un design monotone

C’est une confusion assez fréquente : utiliser une seule famille ne signifie pas que tous les textes doivent se ressembler.

Regardez tout ce que vous pouvez déjà faire avec elle :

Très grand et très gras.

Petit et léger.

Italique.

MAJUSCULES.

Couleur différente.

Espacement différent.

Dans beaucoup de projets, ces possibilités sont largement suffisantes.

Le choix de la famille n’est d’ailleurs que la première étape. Il faut ensuite définir ses tailles, ses graisses, ses proportions, ses hauteurs de ligne et toutes les règles qui permettront de l’utiliser de manière cohérente.

C’est précisément ce que je développe dans Design des textes : rendre vos contenus plus lisibles et agréables à lire.

Autrement dit :

Choisir une typographie est une décision de direction artistique. Bien l’utiliser devient ensuite une décision de système.

Nunito : une typo populaire que j'aime beaucoup.

Et si une deuxième typographie apporte vraiment quelque chose ?

Alors très bien : je ne suis pas devenu membre de la police des polices. 🫣

Deux familles peuvent donner beaucoup de caractère à une identité visuelle. Une serif expressive pour les grands titres, associée à une sans-serif plus neutre pour les textes, peut par exemple créer une très belle tension.

Mais si j’ajoute aujourd’hui une deuxième typographie, ce n’est pas simplement parce que « celle-ci est jolie aussi ». Elle doit apporter quelque chose que la première ne permet pas d’obtenir aussi facilement :

• davantage de contraste ;
• un caractère différent ;
• un changement de ton ;
• une fonction très précise.

Autrement dit, elle doit mériter sa place.

Oui, on y revient souvent.

Si vous combinez deux typographies, évitez l'entre-deux

Il existe énormément de belles associations. Je me méfie surtout d’une chose : deux typographies presque identiques.

Imaginez deux sans-serif très neutres, avec des proportions similaires et quasiment le même caractère. Le visiteur ne va probablement pas se dire :

« Quelle subtile association typographique. »

Il risque plutôt de percevoir une légère incohérence sans vraiment comprendre pourquoi.

Si deux familles se ressemblent énormément, je préfère généralement n’en conserver qu’une. À l’inverse, lorsque j’en utilise deux, j’aime que leur rôle soit immédiatement compréhensible :

• une serif expressive pour les titres et une sans-serif sobre pour les contenus ;
• ou une famille très géométrique pour certains éléments éditoriaux, associée à une typographie plus neutre pour la lecture.

Pas besoin d’en faire davantage. Il faut simplement une différence suffisamment claire pour que le choix paraisse intentionnel.

C’est le même principe que pour beaucoup d’autres éléments du design : une différence trop faible ressemble souvent davantage à une erreur qu’à une décision.

Donnez un rôle à chaque typographie

Si vous utilisez plusieurs familles, décidez également où chacune doit intervenir.

Par exemple :

Typographie A
Titre principal, titres secondaires et grands éléments éditoriaux.

Typographie B
Paragraphes, petits textes, navigation et boutons.

Ce n’est qu’un exemple : le système peut être complètement différent. Ce qui m’intéresse, c’est surtout qu’il existe une règle claire.

Si le titre principal utilise la famille A, le titre suivant la B, le troisième revient à la A et une citation en introduit encore une autre parce que « ça rendait bien ici »… la cohérence commence doucement à prendre ses affaires et à quitter la pièce.

Une fois les rôles définis, je préfère ne plus avoir à y réfléchir pendant la construction.

Encore une décision en moins.

Testez l’association dans une vraie page

C’est probablement le conseil le plus pratique de cet article : ne choisissez pas définitivement une association à partir de deux fiches de présentation.

Construisez quelque chose, même très rapidement. Une petite Hero suffit :

• un surtitre ;
• un titre principal ;
• un paragraphe ;
• un bouton.

Vous pouvez éventuellement ajouter une carte ou un second niveau de titre. Puis observez le résultat :

• La relation entre les deux familles fonctionne-t-elle ?
• Le titre attire-t-il excessivement l’attention ?
• Le corps de texte semble-t-il appartenir au même univers ?
• Les boutons restent-ils lisibles ?
• Que se passe-t-il lorsque le titre occupe trois lignes ?
• L’ensemble fonctionne-t-il encore sur un écran étroit ?

Ce test vous en apprendra davantage que vingt minutes passées à regarder des présentations parfaitement composées.

Surtout, utilisez le véritable contenu du projet chaque fois que vous le pouvez : le nom du client, ses vrais titres et ses propres mots.

Une typographie qui fonctionne merveilleusement bien avec :

The quick brown fox jumps over the lazy dog

peut avoir beaucoup moins de charme lorsqu’elle doit afficher :

Cabinet d’expertise comptable et de conseil aux entreprises

La vie est injuste. 😂

Deux familles, deux rôles distincts : l’une donne du caractère aux titres, l’autre reste sobre et lisible dans les contenus.

Ne confondez pas originalité et pertinence

Il existe tellement de typographies qu’on peut rapidement avoir peur d’utiliser quelque chose de trop connu.

« Celle-là, tout le monde l’utilise. »

Peut-être. Mais je préfère largement utiliser correctement une excellente typographie assez répandue plutôt que choisir une famille obscure uniquement pour pouvoir dire que personne d’autre ne l’a.

L’identité d’un site ne repose de toute façon jamais sur sa typographie seule. La manière dont vous l’utilisez, les proportions, les couleurs, les images, les espacements et toute la composition lui donneront un caractère différent.

À l’inverse, choisir quelque chose de très original uniquement pour se démarquer peut facilement vous compliquer la vie.

Original ne signifie pas forcément pertinent.

Et sobre ne signifie pas ennuyeux.

Pensez aussi à ce que vous devrez maintenir

Il existe un autre critère auquel je pense beaucoup plus aujourd’hui qu’à mes débuts :

Ce choix sera-t-il encore pratique dans deux ans ?

Le site va évoluer. De nouvelles pages et de nouveaux contenus vont apparaître. Peut-être qu’une autre personne devra un jour l’administrer.

Une typographie simple à utiliser, issue d’une famille suffisamment complète et encadrée par des règles claires, facilite toutes ces évolutions.

C’est une réflexion assez proche de celle que j’applique au reste du site : je ne cherche pas seulement une solution qui fonctionne aujourd’hui, mais quelque chose qui restera facile à utiliser demain.

Le choix n'est que le début

Une fois vos typographies sélectionnées, il reste encore beaucoup de décisions à prendre :

• Quelle taille utiliser pour le corps de texte ?
• Quelle progression établir entre les titres ?
• Quelle hauteur de ligne choisir ?
• Quelle largeur donner aux paragraphes ?
• Quelles graisses utiliser ?
• Comment introduire la couleur ?
• Comment tout cela doit-il évoluer sur les petits écrans ?

C’est là que le travail typographique devient réellement un travail de système.

Nous quittons alors le choix des familles pour entrer dans leur mise en forme et leur rôle au sein de la page.

Commencez simple

Si je devais résumer ma façon de choisir des typographies aujourd’hui, ce serait probablement ainsi :

1. Commencez par comprendre le projet.
2. Choisissez une famille qui correspond à son caractère et reste agréable dans de vraies conditions.
3. Essayez d’abord de construire avec elle seule.
4. Ajoutez-en une deuxième uniquement si elle apporte quelque chose d’utile au système.

Pas parce qu’une règle affirme qu’un site doit utiliser deux typographies. Pas simplement parce que vous venez d’en découvrir une autre très jolie.

Au fond, c’est la même logique que pour beaucoup de décisions de design :

Commencez simple. Puis ajoutez seulement si vous avez une bonne raison de le faire.

Pour aller plus loin

Une fois les typographies choisies, il reste à construire le système visuel dans lequel elles prendront place. Ces trois articles prolongent naturellement le sujet :

Design des textes : rendre vos contenus plus lisibles et agréables à lire
Pour transformer vos typographies en un véritable système de lecture.

Hiérarchie visuelle : guider le regard et clarifier vos pages
Pour comprendre comment la taille, le contraste, l’espace et la position travaillent ensemble.

Choisir les couleurs d’un site web : une méthode simple pour construire une palette cohérente
Pour compléter ce système avec des couleurs choisies et utilisées selon leur rôle.

Et maintenant ?

Cet article fait partie des principes que j'utilise quotidiennement pour concevoir mes sites.

Vous voulez continuer à apprendre.

Découvrez mon guide gratuit pour préparer, concevoir et faire durer un site professionnel.