Comment voir quelle police un site Web utilise

Si vous avez déjà été complètement séduit par une police que vous avez vue sur un site Web, vous vous êtes peut-être demandé comment découvrir son nom pour pouvoir l'utiliser dans votre propre contenu. Une typographie de qualité peut améliorer les expériences de lecture de vos visiteurs, il peut donc valoir la peine de faire un effort pour la trouver. Quelle que soit la raison pour laquelle vous vérifiez quelle police est utilisée sur un site Web, de nombreux outils peuvent vous aider.

Dans cet article, nous expliquerons pourquoi vous pourriez vouloir voir quelle police un site Web utilise. Nous vous montrerons également comment procéder.

Commençons!

Abonnez-vous à notre chaîne Youtube

Pourquoi vous pourriez vouloir vérifier quelle police un site Web utilise

Comme nous l'avons déjà mentionné, des polices belles et lisibles peuvent améliorer l'expérience utilisateur (UX) et la lisibilité de votre site. Cela garantit également que les visiteurs peuvent interagir confortablement avec votre contenu sans avoir du mal à le déchiffrer. Si votre texte est élégant mais illisible, les lecteurs auront du mal à comprendre ou à apprécier votre matériel.

Les boutons d'appel à l'action (CTA) peuvent également s'avérer pratiquement inutiles si leur texte n'est pas lisible. C'est pourquoi vous trouverez peut-être pratique de conserver une liste de polices qui attirent votre attention car elles sont à la fois élégantes et lisibles. Vous pouvez ensuite les utiliser sur votre site ou pour un client à l'avenir.

Comment voir quelle police un site Web utilise (3 méthodes disponibles)

Il existe plusieurs méthodes que vous pouvez utiliser pour vérifier la police utilisée par un site Web. La fonction d'inspection de votre navigateur est une excellente solution, mais il existe des extensions qui peuvent produire des effets équivalents. Vous pouvez même trouver des polices à partir d'images à l'aide d'outils en ligne. Jetons un coup d'œil à chacune de ces options.

1. Identifier les polices à l'aide de l'outil Inspecteur du navigateur

L'outil d'inspection de votre navigateur est l'un des moyens les plus simples de vérifier la police utilisée par un site Web. Bien que nous allons travailler avec l'inspecteur Chrome dans cet exemple, il convient de noter que d'autres navigateurs ont des fonctionnalités équivalentes.

Tout d'abord, faites un clic droit sur la page Web contenant la police que vous souhaitez rechercher. Dans le menu résultant, sélectionnez Inspecter :

Si vous préférez utiliser un raccourci clavier, essayez Ctrl+Maj+I pour Windows ou Linux. Si vous utilisez un Mac, l'équivalent est Cmd+Shift+I.

Dans la fenêtre sur le côté droit de l'écran, recherchez le texte utilisant la police que vous souhaitez extraire. Il sera mis en surbrillance lorsque vous sélectionnerez l'élément HTML correspondant :

Ensuite, cliquez sur l'onglet Calculé et recherchez « famille de polices » :

Vous devriez voir le nom de la police et son style répertoriés ici.

Pour voir le CSS lié à la police, regardez sous l'onglet Styles . Vous pouvez faire défiler pour rechercher des valeurs liées à la police. Cependant, comme il peut y avoir des dérogations et des règles de style non pertinentes ici, l'onglet Calculé est généralement plus utile.

2. Rechercher des polices via une extension de navigateur

Les extensions de navigateur peuvent fournir un moyen plus simple de trouver les détails des polices sur un site Web, surtout si vous n'êtes pas à l'aise avec l'Inspecteur. De plus, ils peuvent généralement fournir la réponse que vous recherchez plus rapidement afin que vous puissiez revenir à la tâche à accomplir.

Certains de ces modules complémentaires incluent :

• Fontanello : Libre d'utilisation, cette extension vous permet de trouver le nom, l'épaisseur, le style d'une police, et plus simplement en la surlignant et en faisant un clic droit dessus pendant que vous naviguez.
• WhatFont : rationalisant encore plus la détection des polices, WhatFont vous permet d'afficher le nom d'une police simplement en survolant celle-ci.
• CSS Peeper : conçue pour les concepteurs de sites Web, cette extension est un peu plus robuste et peut vous fournir des détails supplémentaires à partir du code CSS de la page Web.

Cependant, chacune de ces extensions a un support de navigateur varié. WhatFont est disponible pour Firefox, Chrome, Safari et Internet Explorer. Fontanello, en revanche, n'est disponible que pour Firefox et Chrome. CSS Peeper est un outil spécifique à Chrome que vous ne pourrez utiliser avec aucune autre plate-forme.

Dans le but de trouver rapidement le nom d'une police spécifique, WhatFont est l'option la plus simple à utiliser. Comme il prend également en charge la plupart des navigateurs, nous l'utiliserons pour une démonstration rapide.

Une fois que vous avez installé WhatFont, vous pouvez vérifier quelle police un site Web utilise en l'activant dans la barre d'outils de votre navigateur et en survolant du texte :

Lorsque vous survolez le texte pour la première fois, vous ne verrez que le nom de la police. Cependant, en cliquant sur le nom, une fenêtre contextuelle étendue s'affichera avec plus de détails tels que la taille, le poids, la couleur et la hauteur de la ligne. Il peut également identifier si une police de caractères est disponible via Typekit ou Google Fonts.

Une fois que vous avez terminé de vérifier les détails de la police, vous pouvez quitter l'outil en utilisant le bouton Quitter WhatFont dans le coin supérieur droit de la fenêtre de votre navigateur.

3. Détecter les polices dans les images

Enfin, vous pouvez également essayer de visualiser les polices utilisées dans les images. Cela inclut les polices de caractères que vous avez vues dans les logos ou les infographies. D'après notre expérience avec les détecteurs de polices, WhatTheFont est l'outil en ligne le plus efficace pour ce travail.

Pour utiliser WhatTheFont, vous devez télécharger l'image en question et sélectionner la section avec la police appropriée :

Il renverra ensuite une page de résultats avec plusieurs polices qui sont similaires, voire des correspondances exactes, à celle que vous essayez d'identifier :

Votre taux de réussite ici peut varier en fonction de la source et de la popularité de la police. Si le nom exact de la police de caractères est très important pour vous, il peut être difficile de trouver un outil qui vous donnera ce que vous voulez.

Cependant, si vous êtes prêt à utiliser une police similaire à celle que vous avez trouvée dans une image, un détecteur en ligne devrait parfaitement répondre à vos besoins.

Conclusion

Des polices visuellement attrayantes et lisibles peuvent améliorer l'expérience de lecture pour les visiteurs de votre site Web. Cela peut vous inciter à rester à l'affût de nouvelles polices que vous pourriez utiliser sur votre site ou pour vos clients. Quelle que soit la raison pour laquelle vous souhaitez vérifier la police utilisée par un site Web, de nombreux outils peuvent vous aider.

Dans cet article, nous avons discuté de trois méthodes pour voir quelle police un site Web utilise :

1. Identifiez les polices à l'aide de l'outil d'inspection de votre navigateur.
2. Recherchez des polices à l'aide d'une extension de navigateur telle que WhatFont.
3. Détectez les polices dans les images à l'aide de WhatTheFont.

Avez-vous des questions sur la façon de vérifier quelle police est utilisée sur un site Web ? Faites-nous savoir dans la section commentaires ci-dessous!

Image de rudall30 / shutterstock.com