How To Recognize A Font? - A Mini Guide To Successful Font Recognition

[Varelse]

How To Recognize A Font?
A Mini Guide To Successful Font Recognition


ATTENTION!
This thread contains the font recognition tutorial and discussion regarding it and the methods used for recognizing the typefaces.
If you want to post your font identification request, please do it in this thread - Anyone recognize this font?


You have an image with some text on it - it can be a logo, screenshot, scan or a photo - and you have to find out the name of the font used.
How to proceed?
There are a few methods which can make it possible and easier.

1. Online Tools
• WhatTheFont
• Search By Sight: Identify A Font & Fonts.com & ITCFonts
• TypeNavigator

2. Other Methods
• Compare&Match (using font viewer and your font collection)
• SitePoint Graphics Forum
• WhatTheFont Forum

3. Software Tools
• FontMatch

4. Tips
• WTF: Preparing the image, choosing optimal letter set
• Font categories, font sources, font viewers and procedure for Compare&Match method

5. Case Study
• Simple 2 color image
• Complex image
• Small font
• Pixel font
• Ornamental font
• Web 2.0 logo font

[Varelse]

1. Online Tools


•
The first stop in font recognition procedure

Its high successful recognition ratio makes it the basic tool for your task.



1. Upload the image either from your hard drive, or enter its url.



2. Fill in the letters not recognized automatically, combine the multi element shapes ("i" is the example of the letter requiring merging of 2 shapes).



3. Program shows the list of the fonts similar to those on the uploaded image.
Look through the list and see if there's a 100% match.


• Search By Sight
"Identify a typeface by answering a series of simple questions about key features." (Identifont)

Identifont & Fonts.com & ITCFonts

All three sites offer the same Search By Sight tool.



Answer the questions about the key features of the specific characters.
After gathering the informations needed, the program will display the list of the fonts.


• TypeNavigator
" TypeNavigator: the world's first interactive visual font search system." (TypeNavigator / FontShop)



An online application similar to “Search By Sight”, but using slightly different approach.

You have to decide which style your sample font belongs to (there are icons with example letter to help you with this):
- Humanist
- Modern
- Slab Serif
- Sans Serif
- Handwritten
- Blackletter
- Geometric
- Amorphous
- Ironic
- Stamp

Then you define several glyph features: serif, width, proportions, angle, weight, contrast, axis, contour and tools.
After you have selected the features, TypeNavigator searches for the fonts and displays the results.
You can also click “Find Similar” on the result page, looking for the fonts similar to the one from the results of your initial font search.

Of course all the online tools are using limited resources (usually all the fonts available for sale via the website offering the font recognition tool).
And because of this the may properly recognize “commercial” fonts, but have problems with the free ones, as they are not considered when performing the search.

[Varelse]

2. Other Methods


• Compare&Match

A simple method that consists in comparing the image with a font collection you have.
This may sound as an extremely time-consuming way, as an average font collection may contain thousands of typefaces.
But when they're logically sorted into style categories, the task will be relatively easy.
Refer to the tips for this method explained further.




•

If other methods fail, you'll have to ask others for help.
SitePoint's Graphics and Multimedia forum can be a place to start.
Post the image containing the font you are looking for the name of, and you might find someone who can help you.


•

WhatTheFont forum where you can ask font experts for help in font recognition task.


•

DaFont forum where you can ask members for help with recognizing your font.

[Varelse]

3. Software Tools

• FontMatch

FontMatch

A desktop font identification solution that looks at the fonts on your computer, instead of comparing against every font available on the Internet.

You can ask FontMatch™ to “look” at a sample and compare it to each font on your computer. FontMatch™ compares positive and negative space in a manner very similar to the way your eyes do, matching patterns to determine the best “fit”. After examining each font, it displays two images side by side: the one you supplied, and FontMatch’s best answer. Or you can scroll through each of the answers, and see a percentage for each one that represents the closeness of the fit. Unlike the online font identification utilities, this program matches only to the fonts that you already have in your computer.

All you have to do is supply FontMatch™ with an image file (.jpg, .bmp, .gif, etc.) and then specify what character this image represents (for example, capital C.) FontMatch™ can search through the fonts loaded on your machine, or all of the fonts in a particular directory.

[Varelse]

4. Tips


• WhatTheFont

Preparing the image

There are several tips that help WhatTheFont in recognizing the font from provided image.
These are the following:
- increasing the contrast
- removal of obsolete, non-font elements
- increasing the letter spacing

Image that looks like this:



Would be a hard task for WhatTheFont to recognize the font and it would most likely fail.

After some work the image can be turned into this:



This correction will greatly increase the chances of success in finding the proper font match.

Choosing optimal letter set

If your font sample image contains more letters, you should consider choosing the optimal set for WhatTheFont.

WTF has some limits:
- number of components - max. 35
- maximum image size - around 360 x 275 pixels*ʾ
*ʾ With the smaller image height, the width can be bigger.

While the number of components is usually not a problem, the image size limit may result in fewer characters given for font recognition, thus - smaller chances of success.

There's no use in uploading the image with the same letter occuring several times.
Repeating characters can be removed and replaced with the unique ones.
Remember that WhatTheFont is not the OCR (Optical Character Recognition) tool.
It doesn't make a difference if the letters you upload make any sense, they're sample characters only.

Example:

Instead of "mass stress passes", it's better to remove all the repeated letters (leaving only "mas tre p") and add several unique letters.

The more variety of the characters provided, the bigger the chance of successful font recognition.


• Compare&Match

Font categories

Sort your font collection into logical style categories (gothic, script, pixel/bitmap, etc.)
If you don’t know how to sort them, use the categories as listed on DaFont or similar free font site.
This will greatly help you when looking for a specific font style.

Font sources

To be able to use the Compare&Match method successfully, your font collection must be large.
You can download fonts from numerous free font sites – check the Definitive List of Wortwhile Font Sites.

Font viewers

If you don’t already have a font viewer or manager, you’ll have to download and install one.
There are a few free or shareware ones:

• FontHit
• FontView
• Font Xplorer Lite
• X-fonter

There are also commercial programs, but any of these mentioned should be enough for this task.

Once you find the font you were looking for, you can confirm the match by entering the text into “custom preview” field on the font site, like for example www.dafont.com.




Procedure

• decide which style category the font belongs to
• run the font viewing program
• enter the same letters (as the sample text), as these on the image with unidentified font
• slowly browse through the font category, comparing the sample text with the image

[Varelse]

5. Case Study


• Simple font, 2 color image



The easiest possible. To recognize the font used, upload the image to WhatTheFont.


• Complex image



Prepare the image (contrast correction, obsolete element removal, increase letter spacing) and upload to WhatTheFont.


• Small font



WhatTheFont usually doesn’t recognize the small text font, so use the Compare&Match method.


• Pixel Font



Don’t upload such a small sample text to WhatTheFont – it’ll fail in recognizing it.
Before uploading, prepare the image – resize it 4x or 8x times (if you are using Photoshop, select the “Nearest Neighbour” method instead of “Bicubic”).
This simple trick will raise the chances of positive font recognition by WTF.



Results before resizing the sample image – none of the matches is close to the font used.



Results after the image resizing – most of the matches found are either similar or even exact match.


• Ornamental font



WhatTheFont will fail in most such cases and if it does, use the Compare&Match method.


• Web 2.0 logo



If you’d like to know what font is used in one of the popular "Web 2.0" logo designs, you can check it here - The Logos of Web 2.0


▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼


After you’ve tried recognizing the font yourself and failed, upload your image and ask on the forums: SitePoint or WhatTheFont.

[Jako]

Great thread Varelse, very useful and insightful.

[Egor]

Wow Arthur, you are a beast! Thanks for the tips.

[Tijmen]

Very useful post Varelse! It can be really hard to recognize a font, and i'm sure this guide will be useful when i need to find out what kind of font it is.

[ckita]

I had a strange feeling you were gonna do this..haha..good article Varelse!

[molona]

Nicely done. Thank you for taking the effort

[ConceptualMind]

Great guide! Thanks.

[Digital Portrait]

Great guide! Thanks.

I have been looking for a site like this. Thank you very much, your efforts are not wasted!

[smittenbite]

wow thanks a LOT!! i had this exact problem the other day, glad to know this will be here the next time i need to find the name of a font :-)

[Varelse]

Thanks for your opinions.
I hope that this guide will be helpful and make the whole process easier for people looking for the font name. If so - I am happy.

[spinmaster]

Great guide! Thx for your efforts!

[Fara0^]

Great article, thanks!

[fenryr]

Nice guide! Thanks for the effort!!

[marbly]

Just what I've been looking for for a long time

[dpsites]

Wow, the amount of times ive had to do this myself and not known where to start. "WTF" is certainly an eye opener.

Very nice thread matey

[sysice]

I just needed to look up a font from a low resolution DVD cover. Did about 2 minutes of photoshop work, then uploaded it using WhatTheFont and it identified it perfectly!

Thanks for the great tips!

[Varelse]

Sysice - I'm glad that this guide was helpful in a real life situation.
That's what it's been written for
Thanks for feedback!

[csmarshal]

This is great! I have just been looking for something like that lately. Thanks!

[Dark Tranquility]

Very nice and useful Arthur I really like what you've done

[Pedro Monteiro]

Can't belived I missed this thread when I most needed it.

Really appreciate all the provided info.