Découvrez comment la typographie renforce la cohérence visuelle des marques et comment WhatFont permet d’identifier en un clic la police de n’importe quel site web. Guide complet pour designers, développeurs et webmasters soucieux de leur charte graphique.
Vous êtes-vous déjà demandé comment les marques assurent une cohérence visuelle à travers leurs différentes plateformes ? La typographie en est l’un des piliers majeurs. Dans cet article, nous explorons comment identifier les polices d’un site web grâce à WhatFont, et comment appliquer cette connaissance pour renforcer votre identité visuelle.
Pourquoi connaître la typographie d’un site web ?
La typographie joue un rôle crucial dans la création d’une identité visuelle forte et reconnaissable. Choisir la bonne police d’écriture n’est pas qu’une question d’esthétique : c’est aussi une question de communication efficace des valeurs et du message de la marque. Une typographie mal calibrée peut nuire à la lisibilité et dégrader l’expérience utilisateur, tandis qu’une typographie maîtrisée renforce l’image de marque et engage les visiteurs.
Pour les designers et les développeurs web, savoir identifier rapidement la police utilisée sur un site est essentiel : pour s’inspirer, vérifier une charte graphique, reproduire un rendu, ou comparer des choix typographiques concurrents.
WhatFont : l’extension de référence pour identifier une police web
Qu’est-ce que WhatFont ?
WhatFont est une extension de navigateur gratuite développée par Chengyin Liu, qui permet d’identifier en un clic la police utilisée sur n’importe quel site web. Compatible avec Google Chrome et Safari (disponible sur le Mac App Store), elle prend en charge à la fois les polices Google Fonts et celles servies via Adobe Typekit.
Une fois l’extension activée, il suffit de survoler ou de cliquer sur un texte pour obtenir :
- Le nom de la famille de police (par exemple : Helvetica Neue, Roboto, Open Sans)
- La taille de la police en pixels ou em
- La graisse (regular, bold, light…) et le style (italique, condensé)
- La couleur du texte au format hexadécimal
- La hauteur de ligne (line-height) et la position
Comment installer et utiliser WhatFont sur Chrome
- Rendez-vous sur le Chrome Web Store et recherchez WhatFont
- Cliquez sur Ajouter à Chrome pour installer l’extension
- Activez l’icône WhatFont depuis la barre d’extensions
- Survolez n’importe quel texte d’une page web pour voir apparaître les informations typographiques
- Cliquez sur un texte pour obtenir le détail complet (famille, taille, graisse, couleur)
Les autres outils pour identifier une police d’écriture
Font Finder pour Firefox
Les utilisateurs de Firefox peuvent utiliser Font Finder, une extension similaire à WhatFont qui affiche les propriétés CSS complètes d’un texte sélectionné, particulièrement utile pour les développeurs qui veulent copier les déclarations CSS en un clic.
Les outils développeur natifs des navigateurs
Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) intègrent des outils développeur accessibles via clic droit puis Inspecter. L’onglet Computed (ou Calculé) révèle l’ensemble des styles appliqués à un élément, dont la famille de police, la taille et la graisse. Cette méthode ne nécessite aucune installation et offre une précision parfaite.
WhatFontIs : identifier une police depuis une image
Pour identifier une police présente dans un logo, une affiche ou une capture d’écran, WhatFontIs (whatfontis.com) propose un service basé sur l’intelligence artificielle. Il analyse l’image et propose la police probable accompagnée de plus de 60 alternatives similaires. C’est le complément idéal de WhatFont, qui se limite au texte HTML.
WhatTheFont : la reconnaissance par IA de MyFonts
WhatTheFont, édité par MyFonts, est une autre référence pour identifier une police depuis une image. Particulièrement efficace sur les typographies commerciales et les logos, il propose un téléchargement direct des polices identifiées (souvent payantes).
FontsinPDF pour les documents PDF
Pour analyser les polices intégrées dans un fichier PDF, FontsinPDF est l’outil de référence. Il liste toutes les familles utilisées dans le document, ce qui est précieux pour les projets de refonte de chartes graphiques ou la conformité d’impression.
Cohérence visuelle et gestion de l’identité de marque
Respecter la charte graphique
Identifier les polices d’un site web est essentiel pour respecter ou auditer une charte graphique. Celle-ci définit la palette de couleurs, les polices, les styles et les éléments visuels qui composent l’identité de marque. Une bonne gestion garantit que tous les supports — site web, application mobile, brochures, réseaux sociaux — restent harmonieusement alignés.
Création de typographies personnalisées
De nombreuses marques de premier plan font développer leur propre typographie sur mesure (custom font) pour garantir un contrôle total de leur identité visuelle. Cette approche permet de se démarquer durablement de la concurrence et d’assurer une reconnaissance immédiate de la marque, quel que soit le support. Des marques comme Netflix Sans, YouTube Sans ou Spotify Circular illustrent cette tendance.
Bien choisir une police d’écriture pour son site web
Les critères de sélection
Une police d’écriture efficace pour un site web doit répondre à plusieurs critères :
- Lisibilité sur tous les supports (desktop, mobile, tablette) et toutes les tailles
- Cohérence avec le ton, les valeurs et le positionnement de la marque
- Performance : poids du fichier optimisé pour ne pas ralentir le chargement
- Compatibilité avec tous les navigateurs modernes
- Licence claire (open source via Google Fonts ou licence commerciale via Adobe Fonts, MyFonts, etc.)
Les principales catégories de polices
- Serif : ces polices possèdent de petites extensions (empattements) à l’extrémité des lettres, leur conférant un aspect classique et traditionnel. Idéales pour les textes longs et les contextes formels (presse, édition, finance).
- Sans Serif : sans empattements, ces polices offrent un rendu moderne et épuré. Elles sont privilégiées sur les interfaces numériques et la lecture à l’écran (Roboto, Open Sans, Inter, Helvetica).
- Cursives : imitant l’écriture manuscrite, elles apportent élégance et personnalisation, souvent réservées aux logos ou aux titres décoratifs.
- Fantaisie : décoratives et expressives, elles ajoutent du caractère mais doivent être utilisées avec parcimonie pour préserver la lisibilité.
- Monospace : largement utilisées pour afficher du code, chaque caractère occupe la même largeur (Courier, Fira Code, JetBrains Mono).
Intégrer une typographie sur son site web
Google Fonts et autres bibliothèques en ligne
Google Fonts propose plus de 1 500 familles de polices libres et gratuites, intégrables en quelques lignes de code via une simple balise <link> ou un import CSS. Adobe Fonts (anciennement Typekit) offre une alternative premium incluse dans la Creative Cloud, avec des typographies professionnelles haut de gamme.
La directive CSS @font-face
Pour un contrôle maximal et une indépendance vis-à -vis des services externes (vitesse de chargement, RGPD, autonomie), la directive CSS @font-face permet d’héberger directement les fichiers de polices sur votre propre serveur :
@font-face {
font-family: 'MaPolice';
src: url('/fonts/mapolice.woff2') format('woff2'),
url('/fonts/mapolice.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}L’attribut font-display: swap est essentiel pour les Core Web Vitals : il garantit que le texte reste lisible pendant le chargement de la police.
Foire aux questions sur l’identification de polices
WhatFont est-il gratuit ?
Oui, WhatFont est entièrement gratuit, disponible sans abonnement ni achat intégré sur le Chrome Web Store et sur le Mac App Store pour Safari.
WhatFont fonctionne-t-il sur tous les sites web ?
WhatFont fonctionne sur la grande majorité des sites web modernes. Il identifie les polices déclarées en CSS dans le code source de la page. En revanche, il peut ne pas reconnaître les polices encodées en SVG, les images contenant du texte rasterisé ou les polices obscurcies volontairement.
Peut-on identifier une police présente dans une image avec WhatFont ?
Non. WhatFont identifie uniquement les polices appliquées à du texte HTML. Pour reconnaître une police dans un logo, une affiche ou une capture d’écran, utilisez WhatFontIs ou WhatTheFont, deux outils basés sur l’intelligence artificielle qui analysent l’image directement.
Quelle alternative à WhatFont sur Firefox ?
Sur Firefox, l’extension Font Finder remplit le même rôle que WhatFont, avec des fonctionnalités équivalentes et une interface adaptée au navigateur de Mozilla.
Comment identifier la police d’un PDF ?
Pour les documents PDF, l’outil FontsinPDF est le plus efficace. Il extrait la liste complète des familles de polices intégrées au document, utile pour les projets de refonte graphique ou de pré-presse.
Est-il légal d’utiliser une police identifiée sur un site web ?
Identifier une police est légal. Son utilisation, en revanche, dépend de la licence associée : les polices Google Fonts sont libres d’usage, tandis que les polices commerciales (Adobe Fonts, MyFonts, fonderies indépendantes) nécessitent une licence d’utilisation appropriée selon le contexte (web, print, broadcast).
Besoin d’expertise pour votre identité visuelle web ?
DualMedia, agence digitale parisienne fondée en 2000, accompagne ses clients dans le développement de sites web et d’applications mobiles avec une attention particulière portée à la cohérence typographique et à la charte graphique. De la conception UI/UX à l’intégration technique des polices personnalisées, nos équipes garantissent une identité visuelle forte et performante.