Guide pratique : Trouve la typographie parfaite pour ton site et ton logo

/

article guide typographie logo site

Cet article prend environ 8 minutes à lire.

L Les polices de caractères influencent l’attractivité de ta marque et de ton site.

Elles s’intègrent naturellement dans ton identité graphique et expriment une personnalité cohérente.

Découvre comment sélectionner la typographie parfaite pour ta marque avec les 10 outils pratiques de ce guide concret.

Tu te demandes si ce n’est pas du temps perdu sur un détail que personne ne remarque ? 

Pourquoi se préoccuper de personnaliser tes typographies ?

Pourquoi personnaliser tes typographies ?

Rares sont les passants qui s’arrêtent devant une affiche en s’extasiant devant le choix audacieux des typographies. Cela ne veut cependant pas dire qu’ils ne sont pas sensibles à l’esthétique ni à l’ambiance évoquée.

Ils décodent, par exemple, que cette nouvelle marque doit être luxueuse, à destination des enfants ou discount sur des indices, même s’ils sont incapables de l’expliquer.

Tes polices d’écriture procurent une personnalité propre à tes créations. Elles favorisent l’identification de ta marque au même titre que tes couleurs. Tu te distingues visuellement de tes concurrents avec une identité de marque cohérente.

La typographie communique un message différent dans les trois versions de ce logo.

impression typographie logo

Le choix de tes typographies joue également sur la lisibilité des textes et l’attractivité de ta mise en page.

Pourquoi choisir tes polices dans Google Fonts ?

Elles sont gratuites avec un choix impressionnant.
Ai-je besoin d’autres arguments ?

Tu retrouves les plus populaires dans la majorité des outils de création graphique en ligne comme Canva ou pour tes vidéos.

De plus, leur popularité facilite les suggestions d’utilisations ou les exemples de sites qui les utilisent. Les graphistes savent réaliser des associations harmonieuses, mais c’est une autre paire de manches pour les néophytes. L’aide est appréciable.

Comment ne pas se perdre parmi les 1442 familles proposées par Google Fonts ?

Choisis le type de police de ton logo et de tes titres

Choisis le type de police de ton logo et de tes titres

Google Fonts propose 5 grandes catégories pour filtrer :

Serif

Les polices Serif sont les polices traditionnelles des supports imprimés (livres, journaux…). Elles se reconnaissent aux empattements présents aux extrémités des lettres. Elles facilitent la lecture des textes les plus longs en marquant bien la forme des caractères.

La police PT en version avec et sans Serif.

comparaison serif sans serif

Leur nature classique évoque le domaine de l’écrit et confère un aspect formel et respectable.

merriweather
lora

Sans Serif

Ce style est prédominant aujourd’hui sur les sites. Il fut favorisé aux débuts de l’informatique. La résolution des premiers écrans ne permettait pas d’afficher correctement les empattements.

Ces polices sont minimalistes, modernes et élégantes. Elles sont naturellement associées au web.

open-sans
lato

Affichage (Display)

Ces polices de caractères sont conçues pour attirer l’œil pour des affiches, mais aussi des logos, des titres pour les sites ou les couvertures des magazines. Elles ne sont pas utilisables pour les textes : la lecture est souvent difficile à taille réduite.

Elles présentent une personnalité affirmée.

bebas-neue
abril fatface

Manuscrite (Handwriting)

Ces polices de caractères imitent l’écriture manuelle ou la calligraphie. Elles sont à utiliser par petites touches du fait de leur faible lisibilité.

Elles procurent un effet brut, artisanal et plus personnel.

pacifico
arizonia

Monospace

La largeur occupée par chaque lettre est constante. Elles reproduisent le style des machines à écrire et des premiers codes informatiques.

Voici la police Fira en version Mono et Sans Serif.

comparaison sans serif mono

Elles apportent un aspect design, carré et organisé.
Que celui qui a dit psychorigide se dénonce.

inconsolata
space-mono

Trouve la police qui convient à ton logo et à tes titres

Trouve la police qui convient à ton logo et à tes titres

Si tu souhaites une typographie différente pour ton logo et tes titres, tu utiliseras les règles des combinaisons que nous verrons ensuite.

Nous commençons par les titres qui personnalisent ta marque. Ces polices peuvent être plus fantaisistes sans tomber dans l’illisible.

Tu prévisualises l’ensemble des polices d’une catégorie avec Ultrazone.

Tu sélectionnes ta catégorie de polices. Tu inscris ton nom d’entreprise. Tu choisis un poids de police (font weight) entre 100 (très fin) à 900 (très gras).

Tu personnalises la couleur de ton texte et de l’arrière-plan, l’espacement entre les lettres et la taille.

ultrazone prévisualisation google fonts

Tu disposes d’un aperçu immédiat du résultat que tu obtiendras. Tu trouves rapidement des polices qui communiquent le message que tu souhaites.

visualisation polices google

Tu imagines immédiatement le rendu avec Mixfont.

lancer generateur mixfont

Tu fais défiler les polices avec la touche espace.

mixfont

Tu bloques une typographie en cliquant dessus.

bloquer une police

Tu disposes de nombreux exemples d’utilisations.

typographiessite

Tu as vite fait d’y passer des heures.

Tu peux aussi partir d’exemples réels que tu apprécies (en dehors de tes concurrents).

Comment identifier la police d’écriture utilisée sur un site ou une image ?

Tu disposes d’informations détaillées pour un site, mais souvent des propositions de polices payantes à partir d’une photo.

Sur un site

Via l’inspecteur

Tu cliques droit sur une zone de texte dans Chrome (ou Firefox) et tu fais Inspecter.

inspecter page

Tu regardes dans Style pour trouver Font-Family.

police utilisée

Tu retrouveras également toutes les CSS appliquées un peu disséminées.

Avec l’extension Font Finder

Tu installes l’extension Font Finder sur Chrome si tu souhaites disposer de tous les éléments en deux clics.

extension font finder

Tu cliques sur l’icône. Les éléments que tu peux inspecter apparaissent en bleuté.

font finder selectionne élément

Tu découvres immédiatement toutes les informations concernant les polices : nom, taille, couleur, hauteur de ligne…

informations typographie font finder

Dans une image

Je ne trouve pas ces services vraiment pertinents. C’est plus un jouet pour essayer de te vendre des polices.

Le seul qui est ressorti dans mes tests est WhatFontis. Tu charges ton image.

charge image

Tu sélectionnes le texte à analyser et complètes les lettres du mot.

selection texte à analyser
reconnaissance lettres

Tu retrouves des suggestions.

suggestion polices image

J’ai chargé un texte avec une Google Font qui n’apparaît pas dans les résultats.

Je te propose d’apporter un peu de relief à tes textes.

Enrichis ton identité de marque avec une combinaison de polices

Enrichis ton identité de marque avec une combinaison de polices

Tu as sélectionné une police (ou des polices à tester) pour ton logo et de tes titres. Tu passes aux textes.

Tu animes ta mise en page sans commettre d’impair en conservant la même famille.

La solution de facilité

Tu utilises une variante plus légère de ta police pour tes paragraphes si ta police convient aussi bien aux titres qu’aux textes plus petits. Tu identifies ces polices à leur grand nombre de styles disponibles.

La police Lato comporte 10 styles.

styles lato

La version Regular (400) sera parfaite pour tes textes

lato regular

et la Black (900) pour tes titres.

lato black 900

Une option simple sera de combiner des polices identiques dans des catégories différentes.

Roboto existe ainsi en 6 versions différentes avec de nombreux styles.

familles roboto

PT comporte 6 familles, mais moins de poids disponibles.

declinaison police pt

J’ai recensé les combinaisons des principales Google Fonts dans cet article pour gagner du temps.

Tu t’inspires de créations

Tu observes comment des designers ont associé la police que tu envisages dans Typ.io.

Tu cherches ta police.

recherche police caractère

Tu retrouves les polices utilisées sur le côté. Ce ne sont pas toujours des polices Google Fonts, mais les exemples qui les utilisent sont nombreux.

exemple combinaisons polices

Tu utilises un générateur

FontJoy est mon outil préféré pour trouver des combinaisons de polices. Tu indiques ta police de titre avant de la verrouiller.

choix police titre fontjoy

Tu génères les combinaisons. Tu ajustes le degré de similarité souhaité avec la réglette (fort contraste à gauche).

Génération combinaison polices

Tu trouves les combinaisons suggérées avec une recherche

Une des meilleures sources pour trouver des combinaisons parfaites pour ta police sera de rechercher ton nom de police avec “pairing” dans Google.

J’apprécie de disposer d’une idée du rendu des polices que j’envisage.

Teste tes polices

Teste tes polices

Nous retrouvons Mixfont. Cette fois-ci, tu complètes tes polices dans l’url pour disposer d’un aperçu avec l’association de polices.

mixfont change polices
Aperçu fonts

Tu valides ensuite les points suivants :

  • Tes polices sont présentes dans tes outils de création favoris (ou peuvent être intégrées) : Canva, ton logiciel de montage…
  • Le rendu correspond à la personnalité de ta marque et s’intègre harmonieusement dans ton identité globale.
  • Tes typographies sont parfaitement lisibles, en particulier celle qui servira pour tes paragraphes.
  • Tes polices disposent de toutes les lettres accentuées.
  • Tu as validé que la présentation des chiffres te convient.
  • Des déclinaisons de poids sont disponibles pour offrir une hiérarchie marquée à tes niveaux de titres.

Tu définis maintenant les tailles de polices d’écriture de ton site.

Crée la feuille de style complète de ton site

Crée la feuille de style complète de ton site

Une échelle de progression assure l’harmonie entre les différents éléments de ton texte.

Type Scale facilite le travail. Tu complètes la taille de la police de tes paragraphes, la police et le poids de tes titres.

type scale réglages titres

L’échelle (scale) fait varier la progression plus ou moins rapide de la taille de tes titres. Major Third est un bon point de départ.

Tu retrouves ainsi tes tailles de titres sur 5 niveaux. Il est judicieux de ne pas prendre en compte le plus haut, car tu utilises rarement la hiérarchisation au-delà du H4.

tailles titres

Tu dévoiles la partie texte en cliquant sur la flèche à droite de l’écran. Tu indiques la police de caractères, son poids et la hauteur de ligne pour tes paragraphes. Tu changes la couleur du texte et du fond si tu le souhaites.

réglages paragraphes
Hiérarchie des textes site

Tu notes les tailles qui te conviennent.

Tu reportes ces indications directement dans le thème de ton site WordPress s’il dispose de cette option, d’une extension comme Easy Google Fonts ou directement dans les CSS.

Je te conseille également le plugin WP Google Fonts pour charger tes polices sur ton serveur et gagner en vitesse.

Conclusion

Une sélection soigneuse de tes polices de caractères apporte une personnalité distincte à tes créations et te distingue des autres marques de ton secteur.

Tu intègres tes polices dans ton moodboard avant de te lancer dans la création de ton logo.

signature de Jean du site pour pas un rond

Les articles pour créer une marque forte :

Retrouve tous les tutoriels pour Créer ta marque

bannière pour l'inscription à la newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean