SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 54
  1. #1
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

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

    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
    Last edited by Varelse; Jul 10, 2008 at 16:22.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  2. #2
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 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 Varelse; Mar 10, 2007 at 06:05.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  3. #3
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 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.
    Last edited by Varelse; Sep 19, 2006 at 04:39.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  4. #4
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 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 Varelse; Sep 19, 2006 at 05:34.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  5. #5
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 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
    Last edited by Varelse; Mar 10, 2007 at 06:06.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  6. #6
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 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.
    Last edited by Varelse; Mar 26, 2007 at 17:26.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  7. #7
    SitePoint Member Jako's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thread Varelse, very useful and insightful.
    Soccer Surfer | Top 10 Soccer Players

  8. #8
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Wow Arthur, you are a beast! Thanks for the tips.

  9. #9
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  10. #10
    SitePoint Guru ckita's Avatar
    Join Date
    Nov 2004
    Location
    Truly Asia
    Posts
    733
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I had a strange feeling you were gonna do this..haha..good article Varelse!


  11. #11
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,263
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Nicely done. Thank you for taking the effort

  12. #12
    SitePoint Enthusiast ConceptualMind's Avatar
    Join Date
    Oct 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great guide! Thanks.

  13. #13
    SitePoint Zealot Digital Portrait's Avatar
    Join Date
    Dec 2005
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ConceptualMind
    Great guide! Thanks.
    I have been looking for a site like this. Thank you very much, your efforts are not wasted!
    Take the spot is no more

  14. #14
    SitePoint Addict smittenbite's Avatar
    Join Date
    Jul 2005
    Location
    Friendswood
    Posts
    397
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-)
    nothing.

  15. #15
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  16. #16
    SitePoint Evangelist spinmaster's Avatar
    Join Date
    Mar 2005
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great guide! Thx for your efforts!

  17. #17
    SitePoint Addict
    Join Date
    Jun 2005
    Location
    Copenhagen, Denmark
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great article, thanks!
    - Alexander Kinnunen

  18. #18
    SitePoint Zealot fenryr's Avatar
    Join Date
    Oct 2005
    Location
    germany
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice guide! Thanks for the effort!!

  19. #19
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just what I've been looking for for a long time

  20. #20
    SitePoint Member dpsites's Avatar
    Join Date
    Nov 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  21. #21
    SitePoint Evangelist sysice's Avatar
    Join Date
    Oct 2004
    Location
    Hackettstown, NJ
    Posts
    418
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  22. #22
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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!
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  23. #23
    SitePoint Zealot csmarshal's Avatar
    Join Date
    Jan 2005
    Location
    Munich
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is great! I have just been looking for something like that lately. Thanks!

  24. #24
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Very nice and useful Arthur I really like what you've done

  25. #25
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't belived I missed this thread when I most needed it.

    Really appreciate all the provided info.


Tags for this Thread

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
  •