Design & UX
By Alex Walker

Use a Ninja to Analyze Web Fonts

By Alex Walker

Good typography always been a delicate balance of art and science. Sure, mathematics and grids will get you a long way. But great type — like painting or poetry — also often has an innate, hard-to-define beauty that usually only comes from craft and hard-won experience.

In other words, you need to look at a lot of type — and know what you are looking at — to really understand it.

FontFace Ninja Logo


A few weeks ago we talked about a great little tool for type fanciers called Type Sample. This week I came across another cool little tool — Fontface Ninja.

Fontface Ninja puts typographical information on font, size and line-height literally at your ‘cursor-tip’. Simply punch the ninja button, point at some type and all is instantly revealed.

Animation: Fontface Ninja in action

Clicking on any text element copies that text style to a panel at the top of your screen, where you can then try your sample font at different sizes.

Of course, there’s no information here that you couldn’t find out by picking through a Firebug or Chrome Dev Tools panel.

But sometimes the real trick is making something so easy that it becomes almost unconscious. Even if you’re only the tiniest bit curious about some nice type design, Fontface Ninja does a great job at making it trivial to notice.

At the moment Font Ninja is available as an extension of Chrome and Safari, or as a bookmarklet on other browsers.

Check it out.

Originally published in the SitePoint Design newsletter.

  • Is there a way to use it on firefox ? It seems that we can only use it on chrome or safari…

    • Alex Walker

      The bookmarklet version SHOULD let you run the same functionality from your Firefox bookmarks bar — but strangely, it’s grayed out for me. Possibly in the middle of a bugfix?

      • It was grayed 4 days ago…

        Wait & see

  • alexxkidd

    Is there something like this for css?

  • Bruno Seixas

    Great addon for the browser =)

  • Alex Walker

    @alexxkidd:disqus CSSViewer isn’t quite as showy, but does pretty much what you’re asking for –

  • Antoine Chevreau

    Maybe you could also take a look at WhatFont :
    It gives even more information on the police like the hex color code used.

  • Angel Mor

    A great expert helped me to find what font I used in my logo long time ago. Now it’s available as Fiverr gig, but it’s totally worth it if you want to really know the exact font that appears in the image (costs at least 5$ in the moment, see bottom of linked page):–2

Get the latest in Design, once a week, for free.