Vous êtes ici : ComnWeb Web Design Choisir et combiner vos typographies pour un impact maximal.
Web Design

Choisir et combiner vos typographies pour un impact maximal.

Une bonne typographie donne le ton de votre message et le renforce. Faire les bons choix est donc crucial. Découvrons tout cela ensemble.
Par Thibaut Brouard
Photo de Brett Jordan sur Unsplash

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 :

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.

Définissez les fonctions de vos typographies

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 ?

Pour trouver la typo de vos rêves, je vous recommande d’aller sur Google Fonts. Il y a un large choix, les typographies sont toutes gratuites et téléchargeables en 1 clic.

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 !

Trouver vos typographies sur Google Fonts

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.

Serif :

Exemple de bonnes typographies serif

Sans-serif :

Exemple de bonnes typographies sans-serif

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 :

TYPOGRAPHIE

Jouez sur les variations

Tous ces éléments sont écrits avec la même typo : Nunito. Mais en jouant sur des variations typographiques on apporte du contraste en conservant la cohérence de notre design.

Mais si 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, 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.

Un mauvais exemple de sur-utilisation des typographies

Dans cet exemple (un peu extrême !) il est difficile de retenir l’essence du message. Et je ne parle même pas de la cohérence. N’oubliez pas : la cohérence (avec la hiérarchie visuelle) est la pierre angulaire de tout design réussi.

É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 :

Des typos contrastées

Le titre est en Lora. Ce paragraphe est en Raleway. Pour trouver cette combinaison, je n’y suis pas allé au pif. J’ai utilisé FontJoy, un super outil que je vous présente juste après !

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) :

Merriweather

Et Merriweather Sans, admirez cette combinaison parfaite !

Roboto Slab

Et Roboto, et oui une Slab Serif pour changer un peu !

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) :

Un mauvais exemple de sur-utilisation des typographies

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 ? 🙂

Commentaires

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Share This