Trouve la police de caractère parfaite pour ton site [Gratuit]

La typographie te semble une question mineure. Il s’agit juste de prendre une police au hasard et hop question réglée ?

Si je te dis non, es-tu vraiment surpris ?

Démonstration :

Voici un texte sans hiérarchisation avec une police unique

texte en arial

Le même texte avec un peu d’attention portée à la typographie :

exemple combinaison abril fatface montserrat lora

La typographie impacte fortement l’attractivité de ton site. Elle doit s’incorporer naturellement dans ton univers graphique et correspondre à ta cible.

comparaison avec une typographie adaptée

Aucune 4 des versions n’est irrecevable mais les deux du bas s’alignent mieux avec l’univers de l’entreprise.

Ce que tu vas apprendre dans cet article :

J’ai réduit la théorie au minimum pour rentrer le plus vite possible dans le vif du sujet.

Les grandes familles de polices

Serif

Ce sont des polices à empattement. Il s’agit des extensions aux extrémités des lettres.

empattement

Elles transmettent un positionnement classique et élégant.

exemples de polices serif

Sans Serif

Cette catégorie regroupe les polices sans empattement. Le rendu est moderne et épuré.

exemple de polices sans serif

Manuscrite

Les polices manuscrites reproduisent l’écriture manuelle. Elles sont principalement utilisées dans des univers féminins ou artisanaux.

exemples de polices manuscrites

Choisir sa police de titres

Nous allons utiliser Google Fonts. Ce service gratuit répertorie des polices sans restriction d’usage et compatibles avec le web.

Je te propose une sélection personnelle sur les 800 répertoriées.

Si une te convient pour tes titres, tu cliques sur le nom de la police. Tu arriveras directement aux propositions d’associations avec d’autres polices pour le texte.

Serif

Abril fatface

Abril fatface

Libre Baskerville

Libre Baskerville

Lora

Lora

Playfair Display

Playfair Display

Droid Serif

Droid Serif

Merriweather

Merriweather

Noto Serif

Noto Serif

PT Serif

police de caractère pt serif

Cardo

police de caractère cardo

Lustria

police de caractère lustria

Bitter

typographie bitter

Sans Serif

Josefin Sans

Josefin Sans

Lato

Lato

Roboto

Roboto

Montserrat

Montserrat

Open Sans

Open Sans

Oswald

Oswald

Archivo Black

Archivo Black

Raleway

Raleway

Source Sans Pro

Source-Sans-Pro

Ubuntu

Ubuntu

Quicksand

Quicksand

Manuscrite

Pacifico

Pacifico

Yellowtail

Yellowtail

Lobster

police de caractère lobster

Cookie

police de caractère cookie

Amatic SC

police de caractère amatic sc

Fredericka the Great

typographie fredericka the great

Sacramento

typographie sacramento

Grand Hotel

typographie grand hotel

Shadows into light 2

typographie shadows into light 2

Pour avoir un aperçu rapide de ce que ce donne une police en situation, Typewonder te permet d’appliquer la police que tu envisages sur n’importe quel site.

typewonder interface

  • Rentrer l’adresse à tester, par exemple Le Monde

typewonder sélection police

  • Cliquer sur la police trouvée grâce à la recherche
  • Bouton Use

Le rendu prend 1 ou 2 minutes à s’afficher

home site le monde changement de police

Trouver une police sur Google Fonts

Si tu le souhaites, tu peux effectuer une recherche directement sur le site Google Fonts

google fonts interface

Les critères de sélection

Sur la droite, tu trouves les critères qui permettent de filtrer les polices.

google fonts criteres

  • Search : Moteur de recherche
  • Catégories :
    • Serif
    • Sans Serif
    • Display regroupe les polices destinées aux titres
    • Handwriting correspond à manuscrite
    • Monospace est une sous-catégorie de police disposant d’une même largeur pour l’ensemble des caractères (effet machine à écrire).
  • Sorting permet d’ordonner les polices par :
    • Trending : tendance
    • Popular : populaire
    • Date Added : date d’ajout
    • Alphabetical : ordre alphabétique

Popular permet de faire ressortir facilement les meilleures polices.

  • Number of styles : le nombre de déclinaisons (styles d’une police) peut être un bon filtre. En général, les polices avec des déclinaisons tendent à être de meilleure qualité.
  • Thickness : l’épaisseur du trait de la police
  • Slant : l’inclinaison de la police
  • Width : l’emplacement (largeur) occupé par la police

L’aperçu

En dessous du nom de la police, tu vois le nombre de déclinaisons disponibles.

google fonts nombre déclinaisons

Quand tu passes au-dessus d’une police des options apparaissent.

google fonts options de visualisation

Tu peux visualiser des textes avec des formats spécifiques :

  • Sentence : phrase prédéfinie (par défaut)
  • Paragraph : simule un paragraphe de texte
  • Alphabet : te donne l’alphabet complet (vérifier la présence des accents)
  • Numerals : nombres (toutes les polices n’en possèdent pas)

Tu peux également écrire ce que tu souhaites directement dans l’encadré.

  • Si plusieurs déclinaisons sont disponibles, tu peux les visualiser directement.
  • Le dernier item permet de faire varier la taille de la police.
  • Le plus permet de mettre une police dans ton panier.

Le détail de la police

Quand tu cliques sur la police, tu découvres une fiche détaillée.

google fonts fiche detaillee

Tu visualises :

  • les caractères disponibles
  • le designer de la police
  • un petit descriptif
  • les déclinaisons
  • les propositions d’associations de police avec la visualisation. Nous abordons ce sujet immédiatement dans le prochain paragraphe.
  • la fréquence d’usage et la répartition dans le monde
  • la visualisation directement dans TypeCast : Try it out in TypeCast. Cette fonctionnalité est cachée tout en bas mais est un vrai plus pour bien appréhender le résultat.

google fonts typecast

google fonts typecast visualisation

Les critères de choix d’une police

  • Lisible
  • Disponibilité de tous les caractères dont tu auras besoin au quotidien : les lettres accentuées, les chiffres, les caractères spéciaux (@, #…)
  • Les déclinaisons proposées : italique, graisse… les déclinaisons facilitent énormément la hiérarchisation

Associer les polices

Le plus simple est d’utiliser une police unique sur l’ensemble de ses documents. Dans ce cas, pourquoi multiplier les polices ? Il s’agit d’un raffinement non obligatoire mais qui fait partie des critères qui donnent un aspect professionnel au site. Cela permet de dynamiser le texte et de donner un supplément d’âme.

Voici le même texte décliné avec

1 seule police : Monserrat

texte avec police Montserrat

3 polices : Montserrat, Over the Rainbow et Crimson Text

exexemple de texte avec les polices Montserrat, Over the Rainbow et Crimson Text

Combiner les polices

Toutes les polices sont loin de fonctionner harmonieusement.

Abril fatface et PT Sans narrow fonctionnent en harmonie

combinaison réussie polices abril fat face et pt sans

Abril fatface dissone avec Prosto One

combinaison ratée de polices abril fatface prosto one

Je te propose des combinaisons des polices dans cet article.

L’exercice est complexe et pas franchement accessible au non graphistes. Faut-il pour autant se priver de cet atout ? Non, fort heureusement, de nombreux sites réalisent ce travail avec brio.

Les sites spécialisés dans les associations de polices

Google Fonts présente 5 paires populaires.

google fonts combinaisons de polices

Il est possible d’afficher les déclinaisons éventuelles et d’inverser la police utilisée pour le titre et celle pour le paragraphe avec la double flèche.

 

Font Pair réalise des associations de Google Fonts et présente un petit texte d’illustration avec un titre. Les paires sont classées par catégories : serif/sans serif, serif/serif…

fontpair interface

Le moteur de recherche facilite la tâche mais il faut connaître la police pour être efficace. Il n’est pas mis en valeur.

Font Pair moteur de recherche

Canva propose 30 propositions d’associations de polices. Le résultat est très réussi avec de belles illustrations et des mises en situation. L’article est en anglais mais cela n’empêche pas de visualiser les exemples. Toutes les polices ne sont pas des polices Google Fonts mais une majorité.

Typ.io illustre les associations de polices avec des exemples réels d’utilisation. Toutes les polices présentées sur le site ne sont pas issues de la librairie Google Fonts et ne sont pas gratuites.

Typ.io interface

Dans le détail (accessible en cliquant sur le visuel), tu trouves où les polices sont disponibles.

Typ.io détail provenance des polices

Les seules sources gratuites sont Font Squirrel et Google Web Fonts.

Canva Font Combinations trouve la paire d’une police de départ et donne des exemples concrets d’utilisation. Malheureusement, toutes les polices ne sont pas disponibles. De plus, les polices présentées sur le site ne sont pas toutes issues de la librairie Google Fonts.

canva font combinations interface

  • Choisir la police dans le menu déroulant

canva font combinations resultat

Les polices utilisées sont indiquées en bas ou en passant au-dessus du texte d’illustration.

Si tu souhaites aller plus loin, je te renvoie à l’article de Ian Yates : Guide du débutant pour associer vos polices de caractères qui explique parfaitement les principes liés à la combinaison des polices.

 

Je te propose maintenant de réaliser une visualisation rapide du résultat avec typeanything avant d’aller plus loin.

typeanything interface

  • Modifier les éléments suivants :
    • H1 : police du titre principal
    • H2 et H3 : police de titres
    • Paragraph : police du texte

Si la désignation de la police comporte deux noms, tu utilises le premier pour H1, H2 et H3 et le deuxième pour le texte des paragraphes.

Si la désignation de la police comporte trois noms, tu utilises le premier pour H1, le deuxième pour H2 et H3 et le dernier pour le texte des paragraphes.

typeanything element

  • Sélectionner la police que tu as choisie pour les titres et le texte

typeanything police

Si le résultat te semble probant, note bien les polices utilisées.

Chaque police est différente et la lisibilité varie énormément. Il est important d’adapter la taille du texte pour assurer une lisibilité optimale.

  • Valider la taille du texte en testant les tailles

typeanything taille police

Sur le web, 16 px est une taille standard. C’est nettement plus grand que pour un texte imprimé.

Deux raisons principales :

  • la lecture est plus difficile sur écran et doit être facilitée
  • nous nous tenons plus éloignés d’un écran que pour une lecture sur papier

La hiérarchisation

La hiérarchisation va guider tes utilisateurs au travers de tes pages en leur offrant un contenu compréhensible immédiatement. Il s’agit de différencier les éléments, d’indiquer comment consommer le contenu, de permettre la lecture en diagonale et surtout de rendre l’expérience plaisante et fluide.

Définir les tailles de polices

Nous cherchons à avoir un résultat harmonieux entre les différentes tailles de polices. Le plus simple pour y arriver est d’utiliser un ratio et d’appliquer quelques règles simples.

J’ai tout synthétisé dans un fichier de calcul que tu peux ouvrir à l’aide de Google Drive qui est lié avec ton adresse Gmail, Libre Office ou sous Excel.

Télécharger le fichier

Tu vas sélectionner un ratio avec Modularscale qui permet de visualiser les ratios les plus usités.

modular scale

  • Entrer la taille choisie pour le texte des paragraphes suivi de px SANS ESPACE : 16px par exemple

modular scale taille police de base

  • Visualiser les différents ratios

modular scale ratios

  • Choisir son ratio et le noter (ne pas fermer la page, nous allons en avoir besoin dans une minute)

Je te suggère de privilégier une progression graduelle par exemple Major Third par ex.

Une progression forte simplifie le choix mais les petites tailles peuvent vite devenir illisibles (le nombre d’or, Golden ratio en anglais, par ex.).

  • Trouver son ratio dans le fichier
  • Reporter le chiffre indiqué à droite dans ratio choisi

ratio choisi

  • Indiquer la taille de la police dans le texte (par défaut laisser 16 px)

taille police paragraphe

  • Choisir 5 tailles à l’aide de Modular Scale
    • Très grand : utilisé exceptionnellement par exemple dans les pages de vente pour un titre ou les tarifs
    • Grand : pour le titre principal
    • Moyen : pour les titres secondaires
    • Standard : texte (déjà déterminé)
    • Petit : pour les lignes juridiques obligatoires par exemple – celui immédiatement sous la taille des paragraphes si inférieur à 16 px

modular scale choix 5 polices

  • Reporter les tailles dans le tableau

taille polices utilisees

Les hauteurs de ligne se calculent automatiquement

  • Copier coller les tailles de polices et les hauteurs de ligne et les arrondir au chiffre entier supérieur

arrondir tailles polices

Les bonnes pratiques

  • Utiliser un texte au minimum de 16 px pour les textes des paragraphes
  • La police doit être lisible sans aucun effort ni fatigue
  • Se limiter à 3 polices dans une page et éviter ainsi l’effet sapin de noël
  • Une bonne aération entre les éléments facilite la lecture en diagonale
  • La visibilité doit être en liaison directe avec l’importance de l’élément
  • Toujours utiliser les mêmes règles

Tu disposes désormais d’un panel de polices et de tailles que tu attribueras pour les éléments de ton site. Il sera plus facile de réaliser l’exercice directement avec les outils de création web pour régler les couleurs et les espacements.

Quelle police pour mon logo ?

Classiquement le logo reprend la police des titres. Mais pourquoi ne pas lui offrir le luxe d’une police unique ?

Le logo ressortira dans les créations et prendra une place à part.

Étant donné que le logo sera traité comme une image, les critères de sélections sont plus ouverts et ouvrent des options créatives infinies.

Attention : pour utiliser une police non conventionnelle, il faudra utiliser un logiciel professionnel : Inkscape. Il est gratuit mais nécessite d’y consacrer plus de temps. Le résultat sera évidemment de meilleure facture.

Il faut vérifier la compatibilité avec les polices de texte. A moins que le résultat jure de manière flagrante, il y a moins de risque que pour les polices de texte car le logo est souvent isolé et rarement juxtaposé avec des blocs de texte.

Dans le cas d’un slogan intégré directement dans le logo, il faudra demander l’avis de proches ou se contenter des polices proposées en paires.

Où trouver des polices gratuites ?

Font Squirel étend sa sélection de police gratuites au-delà de celles répertoriées par Google Fonts. Le classement par Hottest Web Fonts permet de trouver rapidement un candidat.

La fonctionnalité Test drive dans la fiche de la police permet de tester directement ce que donne le texte du logo.

fontsquirel test du texte en direct

J’aime beaucoup la sélection de polices gratuites réalisée par Jonathan Menet sur son blog. Attention cependant à bien lire le descriptif et à ne prendre que celles qui sont utilisables pour un usage commercial.

La section de polices gratuites de Pixel Budha est de très bonne qualité.

Cas concret

Je cherche les polices pour MotoZuKa notre réparateur de motos à domicile.

Archivo Black me semble une bonne option. Elle est puissante et carrée.

Le test sur le site du Monde est concluant.

archivo black testée sur le site du monde

Je vais directement voir les propositions d’associations.

Archivo-black Archivo-narrow arial
L’association black et narrow fonctionne bien pour les titres. Arial est trop fade à mon goût.

Je regarde les propositions de Google fonts pour Archivo narrow et non Archivo black car ce sont les titres secondaires qui seront à proximité du texte.

Oswald, Lato et Fjalla One méritent un test.

Je n’ai pas trouvé de proposition pour cette police ailleurs.

Les résultats dans typeanything.

Archivo-black Archivo-narrow Oswald

Archivo-black Archivo-narrow oswald

Archivo-black Archivo-narrow Lato

Archivo-black Archivo-narrow lato

Archivo-black Archivo-narrow Fjalla One

Archivo-black Archivo-narrow fjalla

Les trois fonctionnent mais je vais partir sur Lato qui est plus facile à lire.

Le test de taille

16 pixels : peut être un peu petit

lato en 16px

17 pixels : équilibré

lato 17px

18 pixels : un peu grand

lato 18px

Je choisis le ratio Major Third dans Modular Scale.

modular scale présentation ratio major third

Je reporte 0;80.

sélection du ratio major third

Je complète 17 dans la taille du texte des paragraphes.

tailles police exemple motozuka

Je prends les tailles suivantes :

  • petite : 13.6 px (juste en dessous de 17 px)
  • moyen : 21.25 px
  • grand : 33.203 px, je saute un niveau pour faire ressortir le titre principal
  • très grand 41.504, cette taille est très visible pas besoin de monter encore d’un niveau

Je reporte dans le tableau puis copie les tailles de polices et de hauteur de lignes.

tailles des polices et des hauteurs de ligne

J’arrondis à l’entier supérieur.

tailles polices hauteurs de ligne arrondi

Maintenant, je vais chercher une police spécifique pour mon logo. Je penche pour une police lisible, forte et puissante.

J’ai trouvé mon bonheur sur Font Squirel.

Nexa

police Nexa

Bebas

police bebas

Je choisis Bebas qui me fera j’en suis certain un beau logo. J’ai regardé avec les polices de texte, cela ne jure pas. Je conserve l’option Nexa en réserve.

Conclusion

Encore une bonne étape de réalisée. Ta marque est maintenant soutenue par une (des) police(s) qui renforce(nt) son identité. Ton site n’en sera que plus attractif.

La typographie est une matière complexe. Des personnes y consacrent leurs carrières. J’ai pris le parti d’axer sur la pratique et de n’évoquer que les notions nécessaires au choix d’une police adaptée à ton site.

Quelle(s) police(s) as-tu sélectionné pour ta marque ? Quels ont été tes critères de choix ?

Découvre comment choisir les polices de ton site.

 

Si tu ne l’as pas encore fait, tu peux découvrir des combinaisons de polices qui fonctionnent.

Tu disposes désormais de tous les éléments pour créer un logo qui symbolisera ta marque.

Ressources

Cet article de David Carton sur Les polices de caractères définit les termes techniques et approfondit les différentes catégories de polices et leurs associations.

Un article de La Cascade sur les bonnes pratiques en typographie : Do’s & Don’ts de la Typographie.

Les articles qui peuvent t’intéresser :

Retrouve tous les tutoriels pour Créer ta marque

bannière de la newsletter pour pas un rond

polices image pinteret

Résumé
Trouve la police de caractère parfaite pour ton site [Gratuit]
Article
Trouve la police de caractère parfaite pour ton site [Gratuit]
Description
Personnalise ton site avec ces fonts gratuites. Je te présente une sélection des meilleures polices Google Fonts idéales pour le web.
Auteur
Publié par
pour pas un rond
Logo

2 réponses sur “Trouve la police de caractère parfaite pour ton site [Gratuit]”

    1. Bonjour,

      Je te remercie de ces encouragements.

      Je vois que tu es au départ de l’aventure. Veux-tu, s’il te plaît, m’adresser un message quand tu auras avancé sur ton site.
      Je suis impatient de voir le résultat.

      A bientôt,
      Jean

Laisser un commentaire

You have to agree to the comment policy.