[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2004-11-04
3
Medium Priority
?
840 Views
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:
http://www.netafim-usa-agriculture.com/Agriculture/images/temp/temp.html


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.

April
0
Comment
Question by:aprillougheed
  • 2
3 Comments
 
LVL 17

Accepted Solution

by:
Lobo042399 earned 2000 total points
ID: 12500031
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):

http://www.iamcal.com/misc/fonts/

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

http://www.fontsforflash.com/

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:

http://www.fontkitchen.com/index2.html

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:

http://www.thepixelplant.net/npp/free.asp

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

http://www.pixietype.com/free.html

and Minifonts free samples:

http://minifonts.com/samples.html

That should have you covered, I hope.

Good Vibes!

Lobo
0
 

Author Comment

by:aprillougheed
ID: 12505471
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.

April
0
 
LVL 17

Expert Comment

by:Lobo042399
ID: 12509996
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!

Lobo

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses
Course of the Month20 days, 12 hours left to enroll

865 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