Guide de jumelage de polices : choisir les meilleures combinaisons de polices pour votre site Web

Publié: 2020-11-02

En tant que concepteur de sites Web, vous avez de nombreuses décisions importantes à prendre pour chaque site Web que vous créez. Palettes de couleurs, interactions de l'interface utilisateur, disposition de la navigation, choix de la meilleure police pour votre site Web, et bien plus encore.

Un domaine de la conception Web auquel vous ne passez peut-être pas assez de temps à penser, cependant, est l'appariement des polices.

Choisir une police attrayante est une chose. Une fois que vous avez une bonne idée de la voix et du style de la marque, il devient beaucoup plus facile d'identifier les polices qui véhiculent une ambiance similaire.

Table des matières

  • Pourquoi avez-vous besoin d'un jumelage de polices ?​
  • Éléments à prendre en compte lors de l'association de polices
  • 4 règles pour associer des polices dans la conception Web
  • Règle n°1 : n'utilisez pas plus de trois polices sur votre site
  • Règle n°2 : la concorde et le contraste sont bons ; Le conflit est mauvais
  • Règle n°3 : n'ayez pas peur de l'appariement au sein de superfamilles de polices
  • Règle n°4 : Assurez-vous que vos polices sont correctement dimensionnées et formées
  • Les 30 meilleures combinaisons de polices pour la conception Web

Pourquoi avez-vous besoin d'un jumelage de polices ?

Les sites Web ont besoin de plus d'une police - pour établir une hiérarchie, pour maintenir l'intérêt des visiteurs avec beaucoup de texte et pour en dire plus sur la personnalité et l'approche de la marque.

Lorsque vous ajoutez cette couche supplémentaire de complexité au mélange, les choses peuvent devenir délicates. Non seulement vous associez des polices entre elles ; vous les associez également à votre conception Web.

Je suis sûr que vous avez rencontré des scénarios comme ceux-ci lors de vos voyages sur le Web :

  • Deux polices ennuyeuses rendent un long article de blog très difficile à lire et vous finissez par parcourir les en-têtes pour voir si vous pouvez reconstituer l'histoire de cette façon.
  • Une police cursive amusante et unique présente l'entreprise aux visiteurs, seulement pour une police de corps trop petite et super simple pour contredire cette première impression.
  • Le site Web affirme que l'entreprise adopte une approche jeune et innovante des affaires, c'est pourquoi les polices rétro semblent si déplacées.

Il y a trop de choses qui peuvent mal se passer dans l'appariement des polices si vous ne prenez pas le temps de comprendre comment les polices s'emboîtent.

Apprenez à ajouter des polices personnalisées à WordPress

Éléments à prendre en compte lors de l'association de polices

Dans notre guide des meilleures polices pour sites Web, nous avons résumé les principales caractéristiques à rechercher :

1. Lisibilité

L'une des raisons pour lesquelles les empattements sont fortement préférés dans la littérature et les journaux est la lisibilité. Les empattements (pieds) en haut et en bas des caractères permettent aux lecteurs de distinguer plus facilement les caractères similaires comme le « I » majuscule et le « l » minuscule, de sorte qu'il n'y a pas de ralentissement dû à des problèmes de compréhension.

Si vous concevez une page de plus de 600 mots, ce ne serait pas une mauvaise idée d'utiliser un empattement dans le corps du texte pour cette raison.

Cela dit, si vous trouvez un sans empattement avec des formes de lettres distinctes (même sans empattement), n'ayez pas peur d'expérimenter. Nous avons quelques exemples d'utilisation de sans empattement dans les emplacements de corps et d'en-tête ci-dessous.

2. Lisibilité

L'une des raisons pour lesquelles les empattements san ont longtemps été considérés comme un meilleur choix que les empattements pour le texte en ligne était leur grande lisibilité. Cependant, des études ont montré qu'il y a peu de différence dans la rapidité ou la facilité avec laquelle les gens peuvent lire les textes avec empattement par rapport aux textes sans empattement, du moins dans des tailles plus petites.

Comme les résolutions d'écran se sont considérablement améliorées au fil des ans, les typographes ont pu créer des polices dans les deux styles tout aussi lisibles. Comme l'explique le NNG :

« L'ancienne directive d'utilisation de la typographie en ligne était simple : s'en tenir aux polices sans empattement. Parce que les écrans d'ordinateur étaient trop moche pour rendre les empattements correctement, essayer de saisir des empattements à des tailles de corps de texte a entraîné des formes de lettres floues.

Alors que d'autres types de polices, comme les polices trop décoratives, peuvent être trop difficiles à lire en dehors d'un grand texte d'en-tête, les concepteurs disposent de nombreuses options pour styliser le texte d'une page avec des empattements et des empattements san.

Ce dont vous devriez donc être plus conscient, c'est plutôt la taille et l'espacement de vos caractères, car cela a un effet sur la lisibilité et la lisibilité.

3. Confort

Certains concepteurs de sites Web sont réticents à utiliser des polices de caractères comme Helvetica ou Times New Roman en raison de leur surutilisation. Cependant, la sélection et l'association des polices ne dépendent pas de ce que vous pensez de la typographie de votre site Web, mais de la façon dont vos visiteurs sont à l'aise pour la lire.

Donc, il n'y a pas de honte à choisir des classiques s'ils font le travail.

4. Style

Sélectionnez des types de polices et des polices avec des styles qui correspondent bien à votre marque. Par exemple, les polices serif semblent plus traditionnelles et sérieuses par opposition aux polices cursives qui ont tendance à être plus originales et amusantes.

Vous pouvez en dire beaucoup sur votre marque aux visiteurs simplement en choisissant les bons types de polices pour commencer.

Ne perdez pas de vue ces règles lorsque vous passez à l'étape suivante de la conception avec la typographie :