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.
Sommaire
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 ?
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.
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
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.
Leur nature classique évoque le domaine de l’écrit et confère un aspect formel et respectable.
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.
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.
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.
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.
Elles apportent un aspect design, carré et organisé.
Que celui qui a dit psychorigide se dénonce.
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.
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.
Tu imagines immédiatement le rendu avec Mixfont.
Tu fais défiler les polices avec la touche espace.
Tu bloques une typographie en cliquant dessus.
Tu disposes de nombreux exemples d’utilisations.
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.
Tu regardes dans Style pour trouver Font-Family.
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.
Tu cliques sur l’icône. Les éléments que tu peux inspecter apparaissent en bleuté.
Tu découvres immédiatement toutes les informations concernant les polices : nom, taille, couleur, hauteur de ligne…
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.
Tu sélectionnes le texte à analyser et complètes les lettres du mot.
Tu retrouves des suggestions.
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
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.
La version Regular (400) sera parfaite pour tes textes
et la Black (900) pour tes titres.
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.
PT comporte 6 familles, mais moins de poids disponibles.
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.
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.
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.
Tu génères les combinaisons. Tu ajustes le degré de similarité souhaité avec la réglette (fort contraste à gauche).
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
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.
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
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.
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.
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.
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.
Les articles pour créer une marque forte :
Retrouve tous les tutoriels pour Créer ta marque
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