Fonts Ninja

Surfing around, you’ll come across sites with some interesting fonts in use. To easily identify what those fonts are, the free Chrome extension Fonts Ninja does the trick.

But maybe you’re like me, where you’re less concerned about identifying fonts than learning the specifications of how the font is actually implemented on the site. Fonts Ninja is really useful for that as well! Along with identifying the font, Fonts Ninja gives you the CSS details of how it’s deployed on the site.

Go to any Toolbox post, for example. Activate Fonts Ninja, hover over the body text, and a popup will tell you that for that I use the standard Georgia font, part of the Google Fonts collection of open source fonts (aka free). More importantly, though, that popup also tells you the body text is sized at 18px, has a line height of 27px, has 0px letter spacing, and a hex color code of #000000 (which is black). Hover over the title instead, and see all those specs change instantly.

Neat!

Share the love