Webdesign

Comment reconnaitre une police dans une image

Le 7 décembre 2013, mis à jour le 27 mars 2020 — 9 commentaires - typographie

Sur Internet il y a des millions de polices différentes, parfois vous tombez sur un Site, et vous avez sous les yeux une police qui vous plait, mais vous ne connaissez pas son nom !

Heureusement, la technologie nous vient à la rescousse.

Dans cet article je liste quelques-uns des outils d’identification de police que j’utilise quand je suis coincé, et qui m’aident à reconnaitre une police que je trouve sympa pour mes Sites.

 

Cliquez ici si vous voulez en savoir plus sur les polices et les règles typographiques de base

Pour reconnaitre une police dans une image

J’ai testé ces outils afin d’évaluer leur efficacité. Pour que le test soit représentatif, j’ai sélectionné trois polices différentes prises chez Dafont.com (site indépendant des outils testés), et j’en ai fait trois images PNG.

123 Marker Medium

C’est celle de notre logo !

Reconnaitre une police, identifier une police | creer son propre site internet

A bit Sketchy

Reconnaitre une police, identifier une police, creer son site internet

Champagne et Limousines

Reconnaitre une police, identifier une police | creer son site internet facilement

 

J’ai ensuite tout simplement soumis ces images aux outils ci-dessous, en voici les résultats :

 

1 – What The Font (MyFonts)

Reconnaitre une police, identifier une police | creer son site internetUne fois l’image PNG téléchargée, l’identification se fait en deux étapes :

  1. Identification automatique des caractères à partir de l’image : si certains caractères ne sont identifiés, il faut saisir à la main (ici les ‘i’ n’ont pas été reconnus)
  2. Identification de la police correspondante ou se reprochant de celle de l’image

Résultats du test

  • La police 123 Marker Medium n’a pas pu être identifiée, ni aucune police se rapprochant
  • La police A Bit Sketchy n’a pas du tout été identifiée
  • La police Champagne et Limousines n’a pas été directement identifiée, mais 3 polices très proches ont été proposées par l’outil : Damian Light, Drescher Grotesk BT Light, Lightbox-Light

2 – What Font Is

Reconnaitre une police, identifier une police | creer son site internet

Ici le principe est le même que What The Font, sauf qu’à l’étape d’identification des caractères, il faut systématiquement saisir manuellement tous les caractères correspondants.

Par contre l‘identification est bien meilleure ! regardez le résultat.

Résultats du test

  • La police 123 Marker Medium a été bien identifiée au 6ème rang de la liste des suggestions de polices correspondantes
  • La police A Bit Sketchy n’a pas pu être identifiée, même pas l’extraction des caractères
  • La police Champagne et Limousines a également été identifiée en 8ème position

3 – Identifont

Reconnaitre une police, identifier une police | creer son site internetAvec cet outil, la technique est complètement différente. Il ne s’agit pas d’importer une image, mais l’identification se fait par une série de questions relative aux caractéristiques de la police recherchée.(avec ou sans serif, quel est la forme du A…)

Plus vous répondez aux questions et plus la liste des suggestions se réduit, et donc vous affinez ainsi votre recherche.

Résultats des test

Pour mes tests je n’ai pas eu beaucoup de succès, après une douzaine de questions l’outil na pas réussi à identifier mes 3 polices de test.

Par contre je retiens tout de même deux points intéressant pour Identifont :

  • Un intérêt pédagogique : en répondant aux questions, vous vous habituez à reconnaitre les caractéristiques générales des polices
  • Il peut vous aider à trouver des idées de polices en fonction de caractéristiques que vous recherchez.

 

Extension Firefox Font Finder

Reconnaitre et identifier une police CSS, creer son site internet en ligne

Font Finder est une extension qui sert à identifier une police directement dans votre navigateur Firefox. Attention, je ne parle pas ici des images, mais des Fonts utilisées dans le contenue texte d’une page web.

Une fois installé, à partir de n’importe quelle page sur le Web, il vous suffit de sélectionner le texte à analyser, de faire un clic droit -> FontFinder -> Analyze selection

creer son site internet facilement en ligne, firefox fontfinder, typographie

Une boite de dialogue s’ouvre, et vous indique la police utilisée et toutes ses autre caractéristiques CSS.

Creer son site internet facilement en ligne, reconnaitre et identifier une police

Conclusion

Il n’y a pas d’outil parfaitement capable d’identifier n’importe quelle police à partir d’une image. Il y a des milliers de Font qui existent et certaines ont été développée spécifiquement pour un seul Site Web.

Les Fonts font partie intégrante du design de votre Site et il est nécessaire d’y porter une grande attention, au même titre que les couleurs, la mise en page et l’ergonomie de votre Site.

Pour finir je vous recommande vivement cette lecture : 5 conseils pratiques pour la typographie de votre site web

 

Connaissez-vous d’autres outils d’identification de police ?

A vous, quelles sont vos outils typographiques préférés ? Comment faites-vous pour reconnaitre une police qui vous plait ?

 

Répondez et partagez votre expérience dans les commentaires ci-dessous. Merci

Youcef Kébaïli

Consultant en référencement, chef de projet Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Avec ce blog, ma mission est d'aider les entrepreneurs, qui ne sont pas spécialistes du web, à réussir leur propre site, et qu'il soit surtout visible !

Commentaires

Le 5 août 2015 à 5:04 , Bourgeon créatif a dit :

Merci pour cette liste d'outils bien utiles et complémentaires.

Votre réponse sera révisée par les administrateurs si besoin.

Le 16 octobre 2015 à 1:46 , Nono Bobo a dit :

Super arcticle :)
Merci beaucoup !

Votre réponse sera révisée par les administrateurs si besoin.

Le 1 décembre 2015 à 4:27 , Byothe a dit :

Un super outil que j'ai découvert il y quelques jours et qui arche au top pour l'identification des polices : http://www.byothe.fr/2015/12/identifier-une-police-de-caracteres-sur-une-page-web-grace-a-fount/

Votre réponse sera révisée par les administrateurs si besoin.

Le 1 décembre 2015 à 4:31 , Youcef a dit :

Cool merci pour le tuto :-)

Votre réponse sera révisée par les administrateurs si besoin.

Le 11 décembre 2015 à 2:44 , Jean-Claude a dit :

Matcherator par font Squirrel
http://www.fontsquirrel.com/matcherator

Votre réponse sera révisée par les administrateurs si besoin.

Le 24 mai 2016 à 3:36 , Guillaume a dit :

Il y a aussi le forum de dafont qui permet de demander aux utilisateurs l'identification d'une police, parfois il ne faut pas être pressé, mais c'est le plus précis que j'ai trouvé !

Votre réponse sera révisée par les administrateurs si besoin.

Le 8 septembre 2017 à 10:24 , Meligrane a dit :

ENORME merci pour cet article. Pour ma part c'est What Font Is qui a fonctionné !
Enjoy :)

Votre réponse sera révisée par les administrateurs si besoin.

Le 12 octobre 2017 à 12:57 , Caro a dit :

merci pour l'appli Font Finder, c'est génial ! trop fort !!

Votre réponse sera révisée par les administrateurs si besoin.

Le 9 mai 2018 à 12:19 , Bruno a dit :

What Font is a identifié la police de mon image du premier coup, avec seulement la 1ere lettre majuscule

Votre réponse sera révisée par les administrateurs si besoin.

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.