You could say that I’m fairly obsessed with typefaces that websites use. I recently found a font finder extension that I love!
I don’t know why, exactly, but typefaces have always fascinated me. So I was happy to discover that there’s a font finder extension for browsers that identify typefaces websites you visit are using!
My dad is an artist and has done graphic design . One of the things I remember as a kid was going through a catalog of typefaces that he had. A company called Letraset made the catalog. This was the 1970s, long before word processors and fancy printers. Back then, much of the work that graphic designers did when it came to typefaces involved dry-transfer lettering.
You can read about it at this link on Wikipedia. But essentially, the lettering was on clear plastic sheets and to add a font, you would line up each letter on the medium — paper, card stock. etc. You would then hold the transfer paper in place and rub the letter with some pressure. The letter would then transfer from the clear sheet to the medium.
My dad had Letraset catalogs where I’d browse typefaces. (OK, maybe I was a weird child.) But I found it interesting how a typeface could invoke a mood or a memory.
This was before the days of home computers and word processors (and inkjet printers) that allowed you to print in any typeface that might tickle your fancy.
I’m sure I still have a couple of those old Letraset catalogs somewhere in my old room at my parents’ house.
My fascination with fonts grew with the internet
Whenever I browse a website, I can’t help but notice the typefaces it uses. When I come upon a website that has a font that really stands out — particularly for unique style or particular readability — I always wonder which font it’s using.
Some websites are easier on the eyes than others, of course. But I really believe that the typeface a site uses can make a big difference for readers.
From time to time, I change the fonts on this site. I experiment with different typefaces when I find one that I think might read a little easier.
But with so many websites and so many typefaces — some easy to acquire and others outrageously expensive — it can be a challenge to find the right inspiration.
Sometimes, I might go to a website that uses a typeface I particularly like. But if it’s not a font I immediately recognize, it can be difficult to figure out which font it is.
This site uses Google Fonts, a free collection of typefaces. Google Fonts offers a wide variety. But sometimes the typeface you really like doesn’t seem to be available on Google Fonts.
One of my all-time favorite typefaces is called Gotham. It’s particularly easy to read in large and small sizes. It looks good in print and on the screen. Some websites suggest fonts that are similar to a given font. Some, like SimilarFont.io, suggest Google Font equivalents for different typefaces. That site listed three alternatives that Google Font users might try. Of the three, Montserrat is the only one that would look close enough for me to try.
Even so, to find “similar” fonts on a service like Google Fonts, you have to know what font you want to emulate. Google Chrome allows you to “inspect” websites, but I’ve found that identifying a typeface isn’t always easy even that way.
That’s where the font finder extension comes in
I recently found a browser extension called Fonts Ninja. The idea behind it is that it quickly identifies the font. You load a website, click the browser extension icon and simply hover over the typeface you want to identify.
When you do, it displays a popup window identifying the name of the typeface.
The headline font I’m using (at the moment) is, in fact, Montserrat. The body font I’m currently using is Roboto, which I think reads a little easier (to my own surprise) than Montserrat for the smaller size.
The extension gives you a second browser that even allows you to type something to see a sample of the typeface in your specific message. That way, if there’s a particular character you’re concerned about, you can see how that font handles it.
For example, some sans serif fonts display a lowercase L as a straight line like a capital I. Other more contemporary fonts display a lowercase L as a straight line with a slight tail that curves to the lower right.
So you can see how different typefaces display different characters, no matter which characters are displayed on the actual website you check out.
If Fonts Ninja has more detailed information on the font — or at least its source — you can click an “Info” button at the bottom of that window and it will take you to the typeface’s homepage.
That way, you can more quickly discover whether the typeface is free to use or must be licensed for use. (Other than Google Fonts, you may end up having to pay to license the typeface on your site.)
With Fonts Ninja, you can finally determine which fonts website you visit every day actually use.
For example, the body text at CBSNews.com, which I find easy to read, is a serif font that’s part of the Publico family by Commercial Type. NPR.org uses for its headlines a custom typeface called “NPR Sans.” But on this page, for example, you can see an example of the little tails on the Ls. Over at NBCNews.com, they use Founders Grotesk Condensed for their headlines, which you can find at the Klim Type Foundry.
The Washington Post uses three different typefaces in a typical article. For its headline, it uses a traditional-looking newspaper serif font called PostoniWide. For its summary line, it switches to a sans serif called ITC Franklin, a dependable, easy-to-read font that has been around for a long time. But the story body returns to a serif font, like you’d expect in a physical newspaper, called Georgia.
With a font finder extension like Fonts Ninja, whenever I find a typeface that wows me, I can usually find the typeface’s name. Then I can look for fonts that are similar enough to simulate that look if I want to.
There will always be some fonts (like Gotham) that are priced out of reach. But there will usually be fonts like Montserrat that get somewhat close. Those fonts might just offer enough of an alternative to be attractive for your blog’s readers.
I suspect an extension like that might save me a little time that I can invest in the writing here as well!
I have all the major web browsers on on my laptop because each browser handle font differently and I created a webpage with the different fonts to see how they are displayed in the different browsers.
Unfortunately I couldn’t send you the link in “Contact Me”