Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

make fonts to render "nice" with antialiasing

Posted on 2002-03-09
10
Medium Priority
?
527 Views
Last Modified: 2013-12-03
Hi

I'm interested in any hints on how to make good looking small sized text as GIF in Photoshop.

Using the different kinds of antialiasing is OK, but often the result on small fonts are not very good. I even tryed to use double layers with a copy of the text above... the the text get a bit more "saturation" but still often sort of jigged. Changing the transparency on the top layer gives a bit better result, but i'm still not really satisfyed.

I have seen sites where the GIF-Text is extremely sharp and still very_very small.

Any hints, any links to fonts that are especially good for this purpose? I have the Adobe webTypes - but would be glad to find something "new"!

Kind regards
Joergen Astroem
0
Comment
Question by:jastroem
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 30

Accepted Solution

by:
weed earned 200 total points
ID: 6853092
The smallest you can get text and still have it readable 5 point. That allows for enough vertical pixels to describe "E". If you add anti-aliasing to that, it will be fuzzy and probably unreadable. The usual solution is to turn anti-aliasing off since its irrelevant for such a small size anyway.
0
 
LVL 3

Expert Comment

by:DCS092999
ID: 6855750
Ditto to what Weed said, plus you may want to check out the Sevenet font, which was designed for this purpose.

Try http://www.fountain.nu/, go to "Free Fonts" in the drop down menu, then Sevenet from the next menu.  They give you tips too.
0
 
LVL 3

Expert Comment

by:DCS092999
ID: 6855752
Somehow the comma got caught in the above link, sorry.  This should work below:

http://www.fountain.nu/
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Expert Comment

by:reider
ID: 6878153
try using the save for web command in the file menu. Use your regular antialiasing method goto save for web and make the background the same as your webpage backgroung color. I've done it a few times and it works really good. Don't forget to save the photoshoop file so you can change the backdrop easily
0
 

Author Comment

by:jastroem
ID: 6878231
Hi

Thank you for all hints!

What i'm looking for is not the fonts like seven net or other similar fonts - like silk screen or roto  - that are done for use without anti aliasing, they look good and can be used very small. Also, the save for web is off course something that I always use in this case.

What I hope to find is any font that renders e s p e c i a l l y good using small sizes in combination with anti aliasing. Or any "trick" to get the textImages more "saturated".

=> weed
You're right about the min. 5pix, but what if I'd like to use someting like any of the standard adobe fonts in PS with a size like 10, 11 or so pix - they look terrible...

/ joergen
0
 
LVL 3

Expert Comment

by:DCS092999
ID: 6878275
Joergen,

For a size of 10 pts or so with anti-aliasing on a GIF, my biggest hint for you is a very simple one.  Use a sans-sarif font (such as arial or helvetica) and don't be afraid to make it bold.

A lot of places where one would never even consider using bold text for a print product are, on a GIF for the Web, simply more legible when bold text is used.  

Here's an example.  Compare the legibility of the small text on this GIF map which uses an anti-aliased bold sans-serif font:
http://gis.co.mo.md.us/gis/images/gallery/zip_service.jpg

with the anti-aliased regular, serifed font used on this map:
http://gis.co.mo.md.us/gis/images/gallery/agpres.gif

Hope this was helpful,
DCS
0
 
LVL 30

Expert Comment

by:weed
ID: 6878281
Normal fonts at 10 or 11 should render fine with anti-aliasing on but make sure you have the render method set appropriately. PS allows several methods for anti-aliasing text and can be found in the Info bar.
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 6936713
Fonts I have found renders quite well in small sizes are Verdana, Lucida Console, Tahoma.

You could also try to work at double size, then use Layer->Flatten Image and Image->Image Size, or Save For Web - Image Size, to half the image when you save it. Using "strong" anti-aliasing with this produces readable text even down to 4 pixels high.
0
 
LVL 17

Expert Comment

by:Lobo042399
ID: 11453507
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I will leave the following recommendation for this question in the Cleanup topic area:
Accept - Weed

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

Lobo
EE Cleanup Volunteer
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
In this tutorial viewers will learn how to create a vector texture to apply a non-rasterized texture to vector images, using Photoshop and Illustrator Open a textured image such as a scanned-in piece of cardboard in Photoshop: Convert the texture to…
In this tutorial viewers will learn how to select a color range in Photoshop and how to easily apply them to multiple projects. Open an image for editing in Photoshop: Open the select Color Range Selection tool by going to Select > Color Range: Sele…
Suggested Courses

730 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