Aide S'inscrire

Comment bien utiliser les polices Google Web Fonts

Il existe des milliers de polices de caractère - et des milliers de personnes qui aiment explorer leurs subtiles différences et qui ont une opinion bien tranchée sur le sujet. Si vous faites partie de ces gens, vous avez de la chance car l'art de la typographie a de beaux jours devant elle : de nombreux sites Internet et groupes Pinterest sont d'ailleurs dédiés aux amateurs de polices de caractère.

 

Pour tous les autres, vous vous demandez peut-être simplement comment choisir de jolies polices de caractère lisibles pour votre site web ? Nous avons rassemblé dans cet article toutes les informations dont vous avez besoin en matière de polices.


Les différents types de polices de caractère et quand les utiliser

Il existe de nombreuses manières de catégoriser les polices de caractère. Mais dans l'optique de créer un site Internet, cela suffit si vous connaissez ces trois catégories : les polices serif, sans- serif, et décoratives.

Quelles polices pouvez-vous utiliser ? Sur les sites Jimdo, vous pouvez utiliser toutes les polices Google web font gratuitement. Il en existe des centaines - rendez-vous sur l'annuaire des polices Google pour choisir vos préférées.

Le terme serif signifie "empattement" : c'est la petite extension qui forme la terminaison des caractères dans certaines polices d'écriture. Il y a donc les polices avec empattement et celles sans.

Police avec serif à gauche et sans serif à droite.
Police avec serif à gauche et sans serif à droite.

Polices serif (avec empattement)

Les empattements sont répandus dans le domaine de la presse papier car ils sont plus faciles à lire, surtout si on a affaire à des blocs écrits en tout petit. Vous trouverez des polices serif dans les magazines, les livres, les journaux, etc.

Quelques polices serif classiques : VollkornMerriweatherEB Garamond, et Libre Baskerville.

Polices sans serif (sans empattement)

Quand les gens ont commencé à lire davanatage sur les écrans d'ordinateur, les polices sans serif ont été créées. Les fioritures ont été abandonnées pour laisser la place à des polices plus modernes et simples - et qui s'affichent plus distinctement.

Quelques polices sans serif connues : Open SansRobotoLato, et Ubuntu

Polices décoratives

Et puis il y a les polices décoratives ou "fantaisie". Il s'agit d'une catégorie très large, incluant des polices plus artistiques. Ces polices ont plus de personnalité mais doivent être utilisées avec parcimonie. 

 

De nombreuses polices décoratives ont été créées pour leur attrait graphique et non pour être bien lisible sous forme de paragraphe. Elles sont donc parfaites pour les titres et les phrases courtes mais pas pour le corps du texte. En d'autres termes, si vous insérez un paragraphe entier en écriture cursive sur votre site, vos visiteurs auront probablement du mal à le lire jusqu'au bout.

 

 

Voici quelques exemples de différents sites Jimdo avec les polices utilisées :

Où utiliser différentes polices sur votre site Internet

Nous recommandons en général de sélectionner uniquement deux ou trois polices de caractère pour votre site : 

  • Une pour le corps du texte/vos paragraphes : vous ne pouvez pas vous tromper avec une police sans serif lisible pour vos éléments Texte, particulièrement si la taille de la police est petite. Évitez l'écriture cursive ou les polices tout en majuscule, difficiles à lire s'il s'agit d'un texte un peu long.
  • Une pour vos titres : vous pouvez utiliser une police plus décorative, car vous ne l'utiliserez que pour des textes courts. Vous pouvez aussi utiliser une police tout en majuscule. Une police de caractère originale vous permettra d'ajouter de la personnalité à votre site.
  • Une pour votre navigation et vos boutons : vous pouvez utiliser une des deux polices déjà utilisées sur votre site, ou bien choisir une troisième police complémentaire.  N'oubliez pas que votre navigation et vos boutons doivent être très lisibles. Nous vous conseillons donc d'éviter une écriture cursive ou trop stylisée. Comme pour vos titres, vous pouvez utiliser une police tout en majuscule.
Ce site exemple utilise la police sans serif Raleway pour la navigation et le corps du texte, et la police décorative Sacramento pour les titres.
Ce site exemple utilise la police sans serif Raleway pour la navigation et le corps du texte, et la police décorative Sacramento pour les titres.

L'important c'est de trouver un bon équilibre. Comme le dit Ian Yates de Tuts+, “Pensez à vos polices de caractère comme à vos tables d'invités lors d'un mariage ; une personne qui met l'ambiance est généralement suffisante, car trop de personnes à forte personnalité peuvent rendre l''ambiance un peu lourde .”

 

Vous voulez utiliser moins de polices de caractère ? Pas de problème. Il n'y a rien de mal à utiliser seulement une police sur l'ensemble de votre site : vous pouvez différencier vos titres et vos textes grâce à différentes tailles et couleurs. 

 

Vous souhaitez au contraire en utiliser davantage ? Cela risque d'être un peu plus compliqué. Les polices créent de la constance et de la hiérarchie sur votre site. Si vous utilisez beaucoup de polices, c'est comme si vous aviez plein de panneaux de signalisation à une intersection. Votre site risque alors de perdre en efficacité.

La psychologie des différentes polices

Les gens réagissent différemment en fonction des couleurs ; il en va de même pour les polices. Si une police ne correspond pas au message ou à la marque du site, les visiteurs vont trouver cela bizarre. Par exemple, imaginez le site Internet d'un bureau de comptables qui utiliserait la police Amatic SC (voir ci-dessous) au style plutôt décontracté, écrit à la main. Ce n'est pas le genre que vous attendez d'un bureau de comptables.

Autre exemple, si un studio d'art pour enfants utilise une police traditionnelle et sérieuse comme Libre Baskerville...

... ou plutôt une police qui correspondrait un peu mieux à la personnalité de la marque, comme Londrina Sketch. 

N'oubliez pas que le choix d'une police s'apparente plus à un art qu'à une science. Si vous avez un bon feeling par rapport à une police, sans savoir si c'est vraiment celle qu'il faut pour votre site, vous avez certainement raison. 

Choisir des polices qui vont ensemble

L'important quand on choisit des polices de caractère, c'est d'arriver à allier harmonie et diversité.

 

En d'autres termes, il faut veiller à ce que vos polices de caractère ne se ressemblent pas trop (sinon on perd l'intérêt d'utiliser plusieurs polices). Mais il ne faut pas non plus que vos polices soient à l'opposé les unes des autres.

 

 

Voici différents critères pour accorder vos polices :

Contraste

Si vous choisissez une police très décorative pour vos titres, il serait bon d'équilibrer avec une police simple sans serif qui n'attirera pas trop l'attention :

Contraste : les polices Pacifico et Roboto
Contraste : les polices Pacifico et Roboto

Personnalité

Les polices peuvent être modernes, simples, chics, enjouées ; et ces "personnalités" de police doivent refléter la personnalité de votre marque. Si vous choisissez un look disons un peu féminin pour votre site, vous devriez sélectionner deux polices qui partagent aussi cette personnalité, même si elles sont différentes :

Personnalité : Dancing Script & Josefin Sans
Personnalité : Dancing Script & Josefin Sans

Époque

De nombreuses polices ont des références historiques. Si vous voulez évoquer une certaine époque, pourquoi ne pas choisir deux polices un peu rétro :

Époque : Vollkorn & Quattrocento
Époque : Vollkorn & Quattrocento

Harmonie

Pour accorder deux polices de caractère, choissisez des polices aux proportions ou aux formes de lettres similaires. Les polices appartenant à la même famille (comme par exemple Roboto et Roboto Slab) auront des caractéristiques similaires :

Harmonie : Droid Serif & Droid Sans
Harmonie : Droid Serif & Droid Sans

Où trouver les bonnes combinaisons de polices Google

De nombreux sites web recommandent des combinaisons de polices afin que vous n'ayez pas à les créer vous-même

  • Google Web Fonts Directory : Avec un filtre et de bons exemples, l'annuaire des polices Google propose des suggestions de polices populaires pour chaque police dans une colonne sur le côté gauche.
  • Fontpair : Ce site a une bonne liste de couples de polices de caractère à vous recommander, classés par catégorie (serif/sans serif, cursive/serif). Encore mieux, vous pouvez entrer votre texte sur leur site web et voir ainsi directement le rendu. 
  • TypeConnection : Il s'agit d'un outil sympa à utiliser puisque il est présenté un peu comme un site de rencontre pour polices de caractère. 
Si vous voulez en savoir plus sur les couples de  polices, rendez-vous sur le site Typeconnection : il est présenté comme un site de rencontres pour polices.
Si vous voulez en savoir plus sur les couples de polices, rendez-vous sur le site Typeconnection : il est présenté comme un site de rencontres pour polices.

Identifier les polices d'autres sites web

Vous êtes en train de naviguer sur un site Internet et la police de caractère utilisée vous plaît beaucoup, mais vous ne savez pas de quelle police il s'agit ? Il est en fait très simple de les identifier.

 

Chrome et Firefox proposent des modules d'extension (plugins) qui vous diront exactement quelles polices vous voyez. WhatFont et Fontface Ninja sont de bonnes solutions. Mettez en marche le plugin et cliquez sur le texte avec la police qui vous plaît. Le nom de la police ainsi que la taille et l'espacement utilisés s'afficheront alors !

Vous aimez le style d'une police en particulier ? Font Face Ninja pourra vous dire son nom, sa taille et l'espacement utilisé.
Vous aimez le style d'une police en particulier ? Font Face Ninja pourra vous dire son nom, sa taille et l'espacement utilisé.

Un dernier conseil : la visibilité l'emporte toujours sur le design

Google propose des centaines de polices, mais cela ne veut pas dire qu'elles sont toutes adaptées à un site web. Si vous aimez beaucoup une police mais que vous avez des doutes sur sa lisibilité, vous devriez en choisir une autre.

 

N'oubliez pas qu'en matière de polices, la taille a son importance. Pour le corps du texte, la taille de votre police devrait être de 16px. Mais cette règle dépend vraiment de la police sélectionnée. En effet, certaines polices paraissent beaucoup plus petites que d'autres, même si elles ont la même taille.

 

Consultez votre site Internet depuis des écrans de différentes tailles pour vous assurer que vos visiteurs pourront lire facilement vos textes. Par exemple les polices décoratives auront besoin d'être plus grandes afin d'être lisibles.

Fonts BenchNine, sur la gauche, et Ubuntu, sur la droite, toutes les deux en 16px mais avec des résultats complètement différents.
Fonts BenchNine, sur la gauche, et Ubuntu, sur la droite, toutes les deux en 16px mais avec des résultats complètement différents.

Comme dans la vraie vie, il n'y a pas de police de caractère parfaite ou de combinaison parfaite. Si vous trouvez une police ou une combinaison qui vous plaît, et que celle-ci est bien lisible, alors foncez ! 

Mathilde Kurtz

Rédactrice web


Écrire commentaire

Commentaires : 4
  • #1

    MARIE.A (samedi, 26 novembre 2016 02:28)

    Bonjour .
    Je viens de lire votre article concernant les polices Google .
    Mais je ne comprends pas comment je peux modifier la police de notre site à partir de Google.
    Je sais faire à partir de l'interface et le menu jimdo mais pas autrement
    SVP pouvez vous m'expliquer
    Merci et bon week end.
    Marie.A

  • #2

    Séb.L. (samedi, 26 novembre 2016 09:15)

    Bonjour, article très intéressant mais comme pour le commentaire précédent, je m'attendais plus à découvrir un petit texte "technique" sur le "Comment changer sa police pour les titres, sous-titres, etc...".
    Car même après installation d'une police dans nos fichiers, aucune méthode pour l'intégration de disponible !
    Merci à vous et bon week-end.

  • #3

    Annie Noëlle GARAND (samedi, 26 novembre 2016 11:09)

    Je trouve l'article très intéressant et les remarques judicieuses. Cependant, comme les autres, j'ai beaucoup de mal à modifier le style de mes textes, surtout du point de vue alignement.
    Avez-vous changé quelque chose sur le choix de la police des textes ?? Merci et bon week-end

  • #4

    Vincent Dubourg (samedi, 03 décembre 2016 09:55)

    idem, je n'ai jamais trouvé la façon de personnaliser le blog concernant la police.
    Un tutoriel serait le bienvenu.