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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



4 commentaires pour “7 conseils pour mélanger plusieurs fontes dans votre design web”

  1. LKS dit :

    C’est pas une « craduction », c’est un résumé, et en Français !

  2. Jerome dit :

    Merci pour ces précieux conseil, il me seront très utile vu mes lacunes dans ce domaine:)

  3. [...] 7 conseils pour mélanger plusieurs fontes dans votre design web [...]

  4. Agence de creation web Dijon dit :

    Merci pour ces conseils qui m’ont bien aidés. J’utilise régulièrement 2 à 3 polices différentes dans mes documents web et ce n’est pas toujours facile d’harmoniser le tout ! Je trouve qu’au delà de 5-6 polices il n’y a plus aucune cohérence graphique.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site