Which software is best?  Photoshop, Fireworks, Illustrator - for making sharp fonts in images?

Posted on 2004-11-04
Last Modified: 2013-12-25
My client has selected the Frutiger 45 Light Font at 12 px (or one very similiar) as the font for identifying products in web images.

Please see the first image here:

How can I improve the sharpness of this font (without spending days on each word) and make JPG images.  

I can save the images at 80% to 90% quality.

I have access to Adobe Photoshop CS, Adobe Illustrator CS and Macromedia Fireworks MX 2004 (which has a custom anti-alias feature which I've never been able to figure out).

Thanks for your help.  This has been driving me crazy.

Question by:aprillougheed
    LVL 17

    Accepted Solution

    Hi April,

    when it comes to raster images, text sharpness depends on size, as you may know; and when it comes to displaying rasterized text in a webpage, the bigger the better... unless you use pixel fonts as you've done in the second and third images. Problem is, traditional fonts like Frutiger were created for print purposes, not for display. The emphasis of those designs is that they'll look good when printed and page layout artists learned to make do with fuzzy display knowing that they'll look great when printed. These fonts were never intended to look sharp and great at small sizes in a computer monitor. That's why page layout programs like QuarkXPress and InDesign have a Greeking option where, if text is lower than a set size (in points) it'll display as a grey bar.

    Okay....  so what do we do? Fortunately there are many foundries that are addressing that need by releasing pixel fonts designed to look great on a monitor when used in a webpage or on a raster image, as is your case. I would suggest your client to take a look at other options among pixel fonts that will look great and very professional. Judging by your second and third images, you know well how to use them; but if you're not sure what to use, I'd go with Photoshop with antialiasing disabled on the text layers. Here are a few links to great pixels I researched a while ago, I'm sure you'll find a few that you can use for this project:

    Cal Henderson's grerat designs include a few freebies. This site also has a Hot To Make Pixel Fonts tutorial if you want to venture into creating your own typefaces (which would be great if you ever want to try your hand at a pixel version of Frutiger):

    Fonts For Flash has also a few freebies and trial fonts that are worth getting. Hit the Freebies link in the page:

    The Font Kitchen is not really a foundry but a bunch of people in Germany who have fun creating fonts. Some of their designs are free to download. Check theirt catalogue and scroll down to Pixel and Flashfonts:

    The Pixel Plant has this deal where, if you include a link to their website in yours they'll send you a bunch of free fonts. They don't say or show which fonts they'll send you, tho; whixh I think makes the deal more exciting:

    Finally, two of the best foundries dedicated exclusively to pixel fonts have a few free samples. Take a look at Pixietype's website at:

    and Minifonts free samples:

    That should have you covered, I hope.

    Good Vibes!


    Author Comment

    Dear Lobo - thank you so much for your wonderful answer.

    It is SO frustrating; but my client insists on an Arial type font and will not let me use pixel fonts.  I've been fighting this with them since April 2004.

    Drives me crazy as I really dislike fuzzy fonts and they look so unprofessional.

    I'll certainly use pixel fonts for my other projects.  Thank you for the links in your answer.  I've purchased several bundles from MiniFonts.

    Clarification - in your answer you said "I'd go with Photoshop with antialiasing disabled on the text layers" -- you meant when using Pixel fonts?  correct?

    I'm wondering if I should use Arial at 10 or 12 pixels with antialiasing disabled in Photoshop.  Do you think that gives better results than crisp antialiasing?

    Thanks so much.  This has been a huge issue for me.

    LVL 17

    Expert Comment

    Hi Aptril,

    >>"I'd go with Photoshop with antialiasing disabled on the text layers"

    Yes, that was meant when using pixel fonts. The reason is that aliasing is not required for them to look good; applying aliasing will make them fuzzy and you'll lose the dvantage of their special design. If you use conventional fonts then aliasing is a must or they'll look pixelated when the text layer is flattened.

    >>Do you think that gives better results than crisp antialiasing?

    I'd say that generally crisp antialiasing works better on fonts because it preserves as much of their sharpness as it can and the sharper they are the more readable, right?

    One more thing to consider that I forgot to mention last night is JPG compression. The more compression you apply, the more artifacts there'll be around your text. We may not be able to pick them one by one at 100% display but zooming into an image in Photoshop shows clouds of artifacts around text when it's been compressed too much; and at 100% display they contribute to make the text look fuzzy. How much to compress? It'll depend on the quality of the source. As a general rule, I never compress a JPG to anything lower than level 10 in the Photoshop JPG compression slider unless I'm creating a mockup, in which case the lower quality acts as a deterrent for any rogue client that may want to grab the mockup and disappear *L* (yes they exist)

    Run a couple tests with different size/compression level settings until you get a combo you feel happy with and then remember those settings (I keep a Notepad TXT file with random data like that) so that next time you do a similar job for the same client or a new one you have these settings at hand. Keeping consistency makes your clients look more professional and you get the credit (and the account.)

    If there's anything else I can help with, please keep asking. I don't mind adding more input. Call it Customer Service ;o)

    Good Vibes!



    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    This video teaches users how to migrate an existing Wordpress website to a new domain.
    The viewer will learn how to count occurrences of each item in an array.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now