Menus with Beauty and Brains 3: Production Graphics with Wendy Peck at webreference.com

Menus with Beauty and Brains 3: Small Fonts Continued

Your letters tell me what subjects are most popular. By that measure, the small fonts topic is very important to many of you. Readers sent in suggestions for other fonts. With great timing, small font discussions broke out on several discussion. I first included the topic as a mention, but with that type of interest, I am going to come back to it this time, and take a more exhaustive look at the subject. We will then move on to more tips on working with menu graphics and a few ideas for how to fit a lot of information into a small space.

The samples above show the effects of antialiasing on two fonts. The top samples are Sevenet 7, a font designed to be used without antialiasing at a specific size. The lower sample is Arial shown at the a small and large size. In both cases, the left sample has antialiasing turned off. The right sample has Photoshop's Crisp antialiasing command applied.

Antialiasing
One of the most important things to understand when we are talking about small text is antialiasing. Bear with me for a few paragraphs if you know all about this subject. antialiasing basics are so important to text, I want to make sure that everyone understands exactly how antialiasing works. Without this understanding, it is hard to follow any workarounds.

Antialiasing prevents jaggy edges. Since raster objects are created with pixels, which are square, diagonal lines or curves will look very rough in raw pixel format. To overcome this effect, antialiasing mixes the object color with the color behind the object to create pixels of mixed color where they meet. This effect tricks the eye into seeing smooth curves or lines, rather than square pixels. See the sample at the right which provides a magnified view of antialiasing at work. The top sample has no antialiasing and the bottom has Photoshop's Crisp antialiasing added. Note how the edge pixels have been combined with a shade of white. Make sure you compare this sample to the one at the left which shows the same characters at actual size.

Different color combinations react in different ways to antialiasing.

Every font behaves differently with different levels of antialiasing. To make the subject a little more challenging, the color of your text and background also affects the appearance of your antialiasing. Simply choose the settings that give you the best appearance. Make sure that you apply the same setting to text that is intended to match. You may wish to make a note of the settings you use for antialiasing on a large, multi-page project.

In the sample at the left, I have used different settings for antialiasing in each line, but the same settings for the black and brown type on each line. Note how the same settings deliver different results for each color combination. There are few rules, other than using what looks best, that can be applied to antialiasing. Common advice recommends that text under 10 pts should be used without antialiasing, but I have seen exceptions to this. I have also seen 14 pt type that looks best with no antialiasing.

Let's take a look at how several programs handle antialiasing.

Antialiasing Text in Photoshop
Photoshop offers four settings for antialiased text. Antialiasing is applied to each layer. If you have text that requires different settings of antialiasing, it must be placed on different layers.

None: Adds no antialiasing. Edges may be jagged, but this setting is almost always used for small type sizes.

Crisp: Adds minimal antialiasing to maintain a sharp edge. This setting is the least invasive antialiasing you can apply, and is the one that I use most often.

Strong: Adds antialiasing to create a thicker look to the characters. This can be used when the normal font is a little light, but the bold version is too heavy.

Smooth: This setting is designed to give you a very smooth edge, and is used most often for very large sized type. You will often find that there is little difference between this setting and the Crisp setting.

PaintShop Pro Antialiasing
Although Paint Shop Pro offers only one setting for antialiasing, it is a good one. I find that smaller fonts can antialiased in Paint Shop Pro than in other programs without the type becoming too fuzzy to use. On the other hand, I have had some poor results using fixed size screen fonts (we will discuss screen fonts later in this article).

The sample at the left shows the slight difference in antialiasing that Paint Shop pro offers. In each sample, the antialiased sample is shown first, with no antialiasing in the second. The samples with no antialiasing are almost identical, but note how the Paint Shop Pro antialiased sample is a tiny bit darker and more crisp. This tiny difference is often enough to create a great result from smaller text and makes up for the inconsistent results with screen fonts.

Wendy Peck is a working Web designer and writer living in NW Ontario, Canada. https://wpeck.com

Next page

Menus with Beauty and Brains 3: Tutorial Index

Small Fonts Continued
Fireworks and CorelDraw Antialiasing
Special Antialiasing for Flash
Creating Unified Menus
Finding the Fonts