Choisir et combiner vos typographies pour un impact maximal.

La typographie est un élément clé en web design. Imaginez si tous les sites web affichaient leur contenu en Arial… quelle tristesse ! La typographie est également un des éléments les plus simples pour mettre en place une hiérarchie visuelle efficace.

Cependant, le choix de bonnes typographies pour votre projet peut être un exercice délicat. Lesquelles choisir ? Sur quels critères se baser ? Où les trouver ? Comment les combiner ? Et enfin, comment ne pas ruiner votre design à cause de mauvaises pratiques ?

Le but de cet article est de vous aider à appréhender la typographie de manière pragmatique et efficace… tout en vous faisant plaisir ! Car oui, chercher, tester et enfin choisir ses typos, quand on a les bonnes méthodes, est un exercice créatif particulièrement amusant 🙂

Voici ce que nous allons voir :

• Comment bien choisir vos typographies ?
• Avez-vous vraiment besoin de plusieurs typos ?
• Combiner vos typos comme un pro !

C’est parti !

Comment bien choisir vos typographies ?

Dans cette première partie, nous allons voir quelques bonnes pratiques pour bien choisir vos typographies. Le but : vous faire gagner du temps en faisant les bons choix.

Les fonctions de vos typos

Avant de foncer tête baissée sur Google Fonts, il est important de poser les bases. La clé ici, c’est de réfléchir aux fonctions de vos typographies.

En web design, on en dénombre 3 :

• Les titres
• Les paragraphes
• Les textes fonctionnels

Les titres de vos pages seront affichés en plus grand (au moins 20 pixels). Leur but sera de capter l’attention de vos lecteurs, la typographie choisie peut dont être accrocheuse, voire extravagante.

Les paragraphes (le corps de vos pages), seront normalement des textes plus longs. La typo doit être plus petite que les titres (16 pixels par exemple) et « passe-partout », elle doit laisser le contenu s’exprimer, et ne pas prendre le dessus. La règle d’or ici c’est la lisibilité.

Les textes fonctionnels représentent tout le reste : la navigation, les citations, les légendes etc. Ces textes sont souvent plus petits que le corps (entre 10 et 14 pixels), et doivent donc être parfaitement lisibles.

Typos serif et sans-serif, vos meilleures alliées

Il existe 6 grandes familles de typographies :

• Serif
• Sans-serif
• Slab-serif
• Script
• Handwritten
• Display Fonts

Mais dans cet article, je vais me focaliser sur les deux premières. Pourquoi ? Car se sont les familles les plus répandues sur le web. Elles peuvent être utilisées pour tout type de texte. Enfin, elles sont lisibles, franches et élégantes.

Les quatre autres sont un peu plus « marquées » et sujettes à débat. Par exemple, la famille Slab Serif a un côté un peu Far West alors que la famille Handwritten est illisible pour certaines personnes. Ces typos sont en général plus adaptées pour les titres.

Comment trouver vos typos ?

En plus, vous pouvez filtrer votre recherche, et c’est là que ça devient intéressant. En effet, je vous recommande d’axer votre recherche sur 2 critères :

• La popularité de la typo
• Son nombre de variations

La popularité : c’est un principe très simple, mais si une typo a été téléchargée de nombreuses fois, c’est qu’elle a fait ses preuves. Certes, vous risquez de la croiser sur d’autres sites, mais n’est-ce pas mieux que de faire un mauvais choix ? À vous de voir.

Le nombre de variations : c’est un point très important car pour apporter une touche professionnelle à votre design vous aurez besoin d’utiliser des variations typographiques (nous en parlerons dans la prochaine partie). Même si vos titres peuvent se contenter d’une seule variation, votre corps de texte aura besoin de plusieurs variations (italique, plusieurs niveaux de gras etc.)

Voici mes conseils pour mener une recherche efficace (voir la capture ci-dessous) :

• Écrivez vos mots clés principaux (1) : c’est plus facile pour se projeter dans la typographie
• Ne mettez pas une taille trop grande, personnellement je mets 30px pour que les typos soient bien lisibles (2)
• « Langage » : sélectionnez « Latin Extended », ça vous évitera les caractères exotiques (3)
• « Number of styles » : 5+, le fameux nombre de variations (4)
• « Sort by »  : Most Popular (5)

Vous n’avez plus qu’à faire votre choix !

Un dernier point sur ce sujet : si une typo vous tape dans l’oeil sur un autre site web, vous pourrez la retrouver en utilisant l’extension WhatFont (disponible sur Chrome et Firefox).

Quelques exemples de bonnes typos Google Fonts

Si vous n’avez ni le temps ou l’envie de chercher une typo pour votre projet, voici une sélection. Celle-ci n’est pas exhaustive (loin de là !), mais les typos présentées fonctionnent pour tout type de texte, possèdent plusieurs poids (weights) et sont disponibles en italique.

Avez-vous vraiment besoin de plusieurs typos ?

Si vous lisez des articles sur le web design, on vous conseillera souvent d’utiliser 2 typographies : une pour vos titres, une pour vos textes. C’est la tendance.

Mais sachez que vous pouvez très bien n’utiliser qu’une seule typographie. Prenez le site d’Apple par exemple. Il n’utilise qu’une seule typographie : « SF Pro Text » et le rendu est plutôt pas mal non ?

Avec une seule typo, vous réduisez drastiquement le risque de casser la cohérence de votre design. Votre message peut également en sortir renforcé.

Plutôt que plusieurs typos, utilisez des variations de la même font (taille, poids, majuscule et couleur) pour créer une hiérarchie visuelle forte :

Si vous souhaitez apprendre à renforcer la lisibilité et l’impact de vos contenus, mon article sur le design des textes devrait vous plaire !

Vous vous sentez quand même l’âme d’un « mixeur typographique » ? Voyons ensemble les bonnes pratiques pour combiner les typos.

Combinez vos typos comme un pro

Combiner des typographies, c’est un peu comme combiner des fringues. Il n’y a pas de règles absolues (la plupart sont des tendances) mais il existe quand même quelques bonnes pratiques.

N’utilisez pas plus de 3 typos

Si vous vous baladez sur Google Fonts, vous verrez que l’offre est pléthorique et que des belles fonts… il y en a beaucoup. Nous pouvons alors être tentés d’en utiliser plusieurs sur notre site en se disant « Oh ça va, je vais glisser celle-là juste pour ce petit texte là, elle est tellement belle ! ».

Mais en typographie (comme en design en général), il ne faut pas abuser des bonnes choses et savoir se contenter du strict minimum.

Et pour savoir ce qu’il se cache derrière ce concept étrange de hiérarchie visuelle. Allez jeter un oeil à mon article sur le sujet.

Poursuivons 🙂

Évitez les typos trop similaires

Pour apporter du contraste et du caractère à votre design, essayez de combiner des typos très différentes. Essayer par exemple de mettre vos titres en Serif, et vos textes en Sans-serif :

Si vos typos sont trop similaires, n’en utilisez qu’une seule.

C’est d’ailleurs le choix que j’ai fait récemment : mes titres étaient en Ubuntu, et mes textes en Source Sans Pro. Ces deux typos étant assez similaires, j’ai supprimé Ubuntu pour ne conserver qu’une seule typographie.

Utilisez les super-familles

Si vous voulez combiner deux typographies de manière efficace, rapide et sans risque pour votre design, alors les super-familles sont faites pour vous ! Ce sont souvent des paires Serif/Sans-Serif qui ont été conçues pour fonctionner ensemble en parfaite harmonie.

Voici deux exemples (vous pouvez les trouver sur Google fonts) :

FontJoy : un super outil pour vous aider

Pour finir sur la combinaison typographique, j’aimerais vous présenter un outil qui vous fera gagner beaucoup de temps : FontJoy.

C’est un générateur de combinaison de typos Google Fonts basé sur le contraste.

Par exemple, si vous avez jeté votre dévolu sur la typo Playfair Display pour vos titres, l’outil vous aidera à choisir une typo pour vos textes en fonction du degré de contraste que vous souhaitez (de high contrast à very similar) :

Dans cet exemple, j’ai d’abord recherché Playfair Display (1) puis verouillé mon choix (2). J’ai ensuite calibré le contraste (3) et l’outil se charge du reste. Comme sur Google Fonts, vous pouvez personnaliser le texte à afficher. Pratique !

J’aimerais terminer cet article sur un point important : faites confiance à vos yeux et faites-vous plaisir ! Car même si nous avons vu beaucoup de bonnes pratiques, le choix de vos typos se fera souvent sur le feeling.

Alors, sur quelle(s) typo(s) avez-vous jeté votre dévolu ? 🙂

Newsletter mensuelle sur le Web Design

PAR THIBAUT BROUARD

Pour apprendre à concevoir des pages web simples, élégantes et efficaces. En vous inscrivant, vous recevrez en cadeau de bienvenue mon guide du site Internet performant (PDF de 42 pages).

Le respect de votre vie privée est une priorité : votre email est en sécurité et ne sera jamais cédé à des tiers. Vous pourrez vous désincrire à tout moment en un clic. Consultez ma politique de confidentialité.