Sarah, a lovely subscriber of the Pimp my Type Newsletter, sent me a question about how to identify fonts:
I have just read this article and really like the font here, just because I found it pleasing on the eye and easy to read. Is there a way of easily finding out what the font is called? Like putting it through a font finder or font forensic machine?!
There is, Sarah! The font used on this site is Inter, a sans-serif that falls into the category of San Francisco or Roboto, and gained huge popularity in the recent years (with rank 24 in popularity of 1284 fonts in total). But how did I find that out?
I use three ways to identify a font on a website, pick the one that works better for you or the given situation.
1. Fonts Ninja or Fontanello browser extension
I use the Fonts Ninja browser extension which is available for Firefox, Safari, and Chrome. It makes it easy to identify a typeface just by hovering over it.
You can bookmark it, and get additional info. Like the designer, if it’s free or how much a license is. You can also test it with your own text and even install it, if you use the Fonts Ninja app. But even when not using the app or paid service (which I don’t), it will still provide you with useful data. So this is super cool.
However, there are obviously privacy concerns, so maybe Fontanello is a better alternative. Also, if you want to know which fonts are used on your iPhone or iPad, Fontanello is a free tool you can install on iOS. It also works as browser extension for Chrome, Safari and Firefox, where I use it myself happily ever since.
2. Your browser’s dev tools
Any browser comes with dev tools to inspect a website. Open them up by right-clicking “inspect“ on the site. I’m a big fan and user of Firefox and their developer tools also have a dedicated section for typography. Safari has something similar, Chrome does not (but it also provides the information, just a little less focused).
3. Use image recognition software
The first two methods only work with actual text on a website. If the text is inside a graphic, illustration or logo, you have to use image recognition tools. Since my times at design school back in 2005, I’m a fan of What the Font by MyFonts. Upload the image in good quality, select the text and then browser the results.
You will have to look very closely and train your eye to spot every single detail, and in some cases it does not find a suited result, because it only can browser the typefaces inside MyFont’s catalogue. For the header image of the bespoke article with the words “Click me” in it, I could not find out which typeface it was. But for many common fonts it worked fine for me in the recent years.
If you have a question as well, happy to read in the comments below or just shoot me an email!