7 conseils pour mélanger plusieurs fontes dans votre design web

La typographie peut devenir la partie la plus créative de votre design ou la plus frustrante. Travailler avec ne serait-ce qu’une police de caractère peut déjà devenir un défi insurmontable pour de nombreux webdesigners ; alors imaginez ceux qui utilisent jusqu’à sept fontes ou plus dans leur design ! Voici un résumé de l’article 7 Rules for Mixing Multiple Fonts in Good Web Design qui passe en revue les éléments à prendre en considération pour utiliser plusieurs polices de caractère dans votre site web.

1. Echelle et proportion

Pour mélanger harmonieusement plusieurs polices de caractère dans la même page, assurez-vous qu’elles ont des proportions et une échelle en commun. Ainsi, Georgia et Verdana ont des formes similaires bien que l’une est avec serif et l’autre sans-serif. C’est pareil pour Times New Roman et Arial Narrow.

Observez les caractères de chaque fonte séparément, par mot ou par phrase pour dégager leurs points communs. L’idéal est de superposer les fontes les unes sur les autres dans votre logiciel graphique préféré.

2. Harmoniser vos polices à l’aide de la couleur et des styles

Placer six fontes de style et de couleurs différents n’est pas une bonne idée. Lorsque vous avez trouvé deux couleurs qui vont bien ensemble, essayez de les assembler en jouant sur la teinte et la saturation. En ce qui concerne les styles, il faut surtout s’assurer qu’ils s’adaptent à la graisse et à l’emphase des polices : certaines supportent mal l’italique et/ou la mise en gras, par exemple.

3. Priorité et emphase

Certaines polices de caractère ont plus de personnalité que d’autres. C’est un point à vérifier lorsque vous mélangez plusieurs familles de polices sur la même page. Certaines fontes seront trop présentes, d’autres pas assez. Ajuster la taille est une bonne option, mais n’oubliez pas de jouer avec les balises `strong`, `em`, ou les propriétés CSS comme `italic`, `oblique`, `small-caps`, etc. pour augmenter ou diminuer l’impact en fonction de votre objectif.

La couleur peut jouer un rôle central pour hiérarchiser l’information véhiculée par telle ou telle fonte. Si l’une d’entre elles est trop présente, il sera possible d’atténuer son impact visuel avec une couleur plus claire ou moins saturée.

4. Eviter les polices trop similaires

L’utilisation rapprochée de Georgia et de Garamond peut donner l’impression que l’une des deux polices n’est pas à sa place. Par ailleurs, une des raisons qui pousse à utiliser plusieurs familles de caractère dans la même page est de donner du rythme. Les famille de caractères trop proches ne sont donc pas une bonne idée !

5. Assurez la lisibilité des textes

Les fontes un peu funky peuvent trouver leur place dans la navigation, les titres ou les textes courts en général. Dès qu’il y a beaucoup de texte à lire, il est préférable de s’en tenir à une seule police de caractère en privilégiant la sobriété et la simplicité.

6. N’oubliez pas les styles

Voici un moyen simple pour ne pas se tromper dans le choix des polices de caractères de votre site web : utilisez une seule police et variez les styles, les tailles, les couleurs, les fonds. Vous aurez la diversité, le rythme, tout en évitant les mariages malheureux entre des polices disparates.

7. Faites confiance à votre instinct

Pour finir, voici probablement le conseil le plus important de cette liste : prenez du recul sur votre travail et si quelque chose ne semble pas à sa place, changez-le ou supprimez-le !

Note personnelle

J’ai pompeusement classé cet article dans Traduction, mais il s’agit plutôt d’une «craduction». Je ne saurais trop vous conseiller de lire l’article original qui contient par ailleurs de nombreux exemples illustrant visuellement chacun des points abordés, avec pour finir, une galerie de sites d’une grande qualité typographique pour développer votre imagination créative.