SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)

    How to Recognize a Font - a mini-guide to Successful Font Recognition

    Edit:

    This series of posts was originally done by Varelse. This is a reposting of the thread with all the sludge removed


    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
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    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.
    Last edited by ScallioXTX; May 8, 2011 at 08:58.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    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.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    3. Software Tools

    • FontMatch

    FontMatch



    Quote Originally Posted by 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.
    Last edited by spikeZ; Apr 17, 2011 at 07:51.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  5. #5
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    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
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    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.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •