La typographie joue un rôle essentiel dans l’identité visuelle des sites web, mais il est souvent difficile de connaître la police utilisée. Plusieurs techniques astucieuses et accessibles permettent de déterminer la typographie d’une page. Cet article explore ces différentes méthodes, offrant des solutions pratiques pour les amateurs de design et de développement web.
Dans ce guide, je t’explique quels sont les différents moyens que tu as à ta disposition pour identifier la typographie d’un site web
Dans ce guide, je vais te présenter quelques astuces qui te permettront de savoir quelle typographie a une page web. Tous ces moyens sont totalement gratuits et très simples à réaliser. Que tu souhaites découvrir les meilleures polices pour les sites que tu rencontres en naviguant ou que tu veuilles les utiliser pour changer la typographie sur Android ou un autre système, reste avec moi jusqu’à la fin. Ce que je vais expliquer ici t’intéresse énormément.
Connaître la typographie d’un site depuis le navigateur
La méthode la plus simple, du moins si tu navigues depuis un ordinateur, est d’utiliser les outils de développement de ton navigateur. Ce sont de petites utilités destinées aux concepteurs de pages web, mais elles peuvent t’aider à localiser une typographie. Tu dois savoir que tant le code que les styles des sites web sont complètement exposés à l’utilisateur, du moins en ce qui concerne le contenu chargé par le navigateur. C’est pourquoi il est assez facile de savoir quelle est la taille d’un élément, quelle couleur exacte est configurée ou quelle police est utilisée.
Si tu utilises Google Chrome, les étapes pour découvrir les polices sont très simples. La première chose à faire est d’ouvrir le site où tu as vu la typographie qui te plaît. Ensuite, fais un clic droit dessus et sélectionne l’option Inspecter.
Cette commande te fournit toutes les informations du code source d’un site
Ensuite, les outils de développement s’ouvriront. Dans ces outils, le paragraphe en question sera sélectionné, bien que tu puisses le changer pour un autre en cliquant à nouveau sur la commande Inspecter. L’essentiel est que tu dois faire attention à la section Styles, qui est là où tu vas trouver la police utilisée dans le texte.
La section Styles des outils de développeur est celle que tu dois consulter
Il existe plusieurs possibilités. Il se peut qu’immédiatement après avoir sélectionné un texte, tu vois déjà l’attribut font-family. Cela se produira parce qu’une police a été définie pour ce texte ou seulement pour les paragraphes. Cependant, si la police a été configurée au niveau général, il est normal qu’elle soit associée à l’étiquette HTML body. C’est ce qui se passe dans l’exemple montré dans l’image suivante :
C’est l’attribut qui te révèle la police d’un site ou d’un bloc de texte
Sur Netcost-security.fr, la police Inter est utilisée. Elle a été mise en œuvre sur tout le site en modifiant les styles généraux de l’étiquette body. Il est possible que d’autres éléments aient leur propre police configurée.
Tu peux tester d’autres polices sur un site, bien que les changements ne seront pas enregistrés
Au fait, quelque chose d’intéressant est que tu peux modifier ces attributs. Les développeurs utilisent cet outil pour appliquer des modifications aux styles et voir les résultats en temps réel, sans avoir besoin de télécharger les changements sur le serveur. Ainsi, d’un coup, ils appliquent les modifications finales dans le fichier CSS du site. Comme on peut le voir dans la capture d’écran ci-dessus, si on désactive l’attribut font-family, le site de NETCOST n’utilise plus la police Inter, mais la police par défaut du navigateur.
Enfin, tu dois savoir que les options de développement sont présentes dans tous les navigateurs. À moins que tu doives les activer expressément, comme c’est le cas dans Safari, tous les navigateurs te permettent d’inspecter les éléments et de connaître les styles appliqués depuis le menu contextuel.
Découvrir la typographie d’un site avec des extensions
Une autre façon facile de connaître les typographies utilisées sur un site est avec une extension spécialisée dans l’extraction de polices. Voici quelques-unes qui fonctionnent vraiment bien.
Fontanello
Fontanello est génial pour voir le type de police d’un site
Fontanello est une extension pour Chrome qui fonctionne à merveille. Elle s’intègre dans le menu contextuel. Il suffit donc de faire un clic droit sur un morceau de texte, puis de placer le curseur sur Fontanello. Dans le menu contextuel qui s’ouvrira, toutes les informations sur la police apparaissent. En plus du nom, tu pourras connaître la taille et les couleurs utilisées.
Chercher police
Une autre extension pour localiser la police d’un site
Nous ne pouvons pas dire que Chercher police soit l’extension avec le nom le plus énigmatique. Cela dit, malgré le manque d’imagination de son créateur, elle remplit parfaitement son rôle. Tout comme Fontanello, avec cet outil, un bouton est ajouté au menu contextuel de Chrome qui te permet d’identifier rapidement la police utilisée dans un paragraphe. Ensuite, un sélecteur apparaît qui te permet de sélectionner le morceau de texte en question, ainsi qu’un avertissement en haut où l’on t’informe de la police utilisée.
Demander à ChatGPT quelle est la police d’un site
L’omniscient ChatGPT est également capable de identifier des polices, du moins les plus populaires. Je dois dire qu’après avoir fait quelques tests, j’en suis venu à la conclusion que ce n’est pas la méthode la plus fiable. Cependant, si tu aimes expérimenter avec le chatbot d’OpenAI, il te suffit de faire une capture d’écran de la typographie, de la coller dans la zone de texte et de lui demander quelque chose comme « Quelle typographie est-ce ? ».
ChatGPT identifiant de manière partiellement correcte plusieurs typographies à partir de captures d’écran
Dans l’image ci-dessus, il a correctement identifié le premier (comme lui faire un reproche, c’était Comic Sans). Cependant, pour le second, il s’est trompé et a confondu Clarendon avec Times New Roman. Enfin, il a encore correctement identifié Helvetica. Résultat : 2 réponses correctes sur 3 demandes. Ce n’est pas mal.
Sans aucun doute, c’est un autre des trucs pour ChatGPT que tu devrais noter dans ta liste. N’oublie pas que tu peux également télécharger des images sur Microsoft Copilot, donc c’est un autre outil alternatif.
Utilise un moteur de recherche de typographies web
Un moteur de recherche de typographies dans des logos
La dernière solution que je te propose est d’utiliser un moteur de recherche spécialisé dans les polices. Il y en a beaucoup sur le marché, bien que je te recommande trois qui sont très bons :
- What The Font. Moteur de recherche lancé par le site spécialisé dans les typographies MyFonts. Il permet de coller une URL ou de télécharger une image pour détecter le type de police.
- Font in logo. Un moteur de recherche qui se concentre sur l’identification des polices des logos les plus connus. Dans l’image ci-dessus, tu peux voir que la police du logo de Netflix est Bebas Neue, une typographie assez populaire et totalement gratuite.
- Fontspring’s Font Finder. Cet outil t’aide à localiser des typographies sur des sites web et des captures d’écran.