We have gone over some elegant looking free fonts here ready to be used in any of your projects, but many new fonts are born every so often thanks to talented artists. You can spot them in new web app logos, magazines, food packages, etc.
How do you find out what font these texts are so you can use them? Here are a few services that can help you identify the particular web page font you’re looking at and make the process more automated than anything and less painful.
For Web Designers/Developers: Firebug
Firebug started as a Firefox addon that bundles many web development tools and lets you debug and edit CSS, HTML, and JavaScript in any webpage. Back in March of 2009, it was still a Firefox-exclusive tool. We had published an article on how to install Firebug on IE, Safari, Chrome and Opera, but with the rave reviews Firebug received, this great tool is now available for other browsers as a bookmarklet called Firebug Lite and also a Chrome extension.
While not a complete substitute for the Firefox addon, this Lite bookmarklet has replicated many of the functionalities available on the addon. Even the physical appearance bears resemblances that you almost can’t tell you’re not using Firefox. But since Firebug Lite isn’t exactly the same thing, the author’s website does recommend to use the bookmarklet in conjunction with Chrome Developer Tools if you’re using Google Chrome.
Anyhow, once you have the bookmarklet or the Chrome extension and you see text with an unknown font you love, you can highlight the words, press on the bookmarklet link, head to the HTML tab on the main left pane, and then the Computed tab on the right column to see the font name, family, size, weight, etc.
While Firebug is nice and dandy for web developers, if you’re not a web designer, there’s a simpler way to quickly find the font family of some text.
Quick & Neat Way For Any Typography Enthusiast: WhatFont
WhatFont consists of a neat bookmarklet that, once activated, you can hover over any text and immediately get a very nice-looking overlay which pops up with the name of the font. Once you click it, you’ll see additional details about the font. To go back to regular surfing mode without the overlays, just click on the top right corner that says Exit WhatFont.
Just like Firebug Lite, WhatFont understandably cannot make out the font from images, but at least it notifies you when it might be inaccurate.
If you’re not a web developer or designer, but just a casual typography enthusiast, WhatFont is a perfect, neat and quick way to get font details.
Identifying Fonts In Images: WhatTheFont & WhatFontIs
You can always ask in typography expert forums for help identifying a web page font, but you should only try that if you’ve used WhatTheFont as it’s really easy to use. Just get a PNG screenshot of some text in the font you adore with the least white space possible and upload the image or paste the image URL. Now just type or correct the letters that WhatTheFont highlights in the next screen, leaving any incomplete characters’ text boxes blank, and that’s it.
You may not always get the same exact font, but usually there are many closely related fonts that WhatTheFont will present for you. In my tests, the one font that WhatTheFont couldn’t exactly find, an expert in the very helpful forum identified it in less than 24 hours.
WhatFontIs, formerly known as IdentifyFonts, is similar to WhatTheFont in that you it helps you identify fonts from an image. On this site, you also upload an image, identify highlighted characters, and get a list of fonts resembling the ones in your image. One difference is that during the character selection step, you can choose to see all results, only commercial fonts or just free ones. You also get the license detail in the results list to save you time.
Web Designer Depot has a list of font-identifying tools, but the ones on here require the least manual work. You can always learn typography altogether, or also train your eyes to identify properties of fonts with FontTrainer to not have to rely on these tools.
Instead of identifying web page fonts made by other people, you can also make your very own fonts with these free tools.
Did we miss any super easy ways to identify fonts? Let us know in the comments!
Image credit: JoanaCroft at Stock.Xchng
Hey Facebookers, make sure to join MakeUseOf on Facebook and get access to some exclusve stuff. Over 105,000 fans already!
Read comments: Loved it? Hated it? Join discussion here ...
No tags for this post.
Similar articles:
- No related posts.
No comments:
Post a Comment
[Please do not advertise, or post irrelevant links. Thank you for your cooperation.]