TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Anti-Aliasing Tweaks

December 02, 2004

Horizontal kerning is pretty easy in Photoshop: use the Alt or Cmd + arrow key combination, adjust at will, repeat as necessary. But what about vertical kerning?

The problem is this: it’s relatively easy to match kerning between words in Photoshop by using the built-in kerning controls. Adjusting anti-aliasing requires a bit more effort, but it remains completely do-able.

However, there seems to be a built-in dependency on where you set type on the canvas which I can only describe as a vertical anti-aliasing starting point. It appears that the fine adjustment of horizontal letter-spacing isn’t enough control, as baselines can either fall on a precise pixel, or on a percentage point somewhere between two pixels.

Examples of normal and fuzzy type

In the first image to the left, the two lines of type have been kerned equally. The top example is crisper, whereas the bottom example is fuzzy, particularly around the bottom of each letterform.

Close-ups of the e letterform

In the second image to the left, the two “e” letterforms have been scaled up a few hundred percent, and in the bottom row a white grid has been overlaid. This close-up shows that the left “e” has a more solid letterform, especially on the horizontal strokes (the crossbar, the stroke under the bottom counter). The right “e” has much heavier horizontal strokes, anti-aliased across two pixels, and looks more blurry and wispy.

The main difference between these type examples is where they were set on the canvas with the type tool. What appears to be happening is that the starting point can either be an integer pixel value — and thus render closer to the pixel grid, as in the first example — or a fractional pixel value, which throws the entire letterform slightly off the pixel grid.

So the problem then, is how to control this? Once type is set, horizontal adjustment is possible in sub-pixel values thanks to the kerning tools. But vertical adjustment only appears to be possible with the Move tool, which operates on whole-pixel values.

The only solution I can see is to keep re-setting with the Type tool, and hope that through trial and error it’ll eventually set properly. Someone tell me there’s an easier way.

Addendum: And there is an easier way. The answer comes from Scott Gould:

You can move text vertically in sub-pixels, as long as you’re editing the text in question (i.e. text is highlighted or there’s a text cursor flashing away), by using the Ctrl/Apple key temporary move tool. For reasons that sorta, kinda make sense, this won’t work on “Sharp” or “Crisp” antialiasing. With “Strong” or “Smooth”, you’re all set.

Works great, thanks Scott.


Reader Comments

Jim Royal says:
December 02, 01h

I ran in similar issues some years ago. My solution has been twofold:

First, I make my web page comps in Illustrator, not Photoshop. I prefer the increased freedom to move and resize text blocks, and the superior typography tools (although, with CS, this advantage has lessened). Nonetheless, I still find it more flexible.

Second, when I bring my comps into Photoshop, I do so at 288 DPI — exactly 400% of normal size. I work at that resolution until done, and then sample down to 72 DPI. I never have any problem with irregularly fuzzy text.

2
Bryant Cutler says:
December 02, 03h

Not exactly a solution for your Photoshop problem, but I’m pretty sure that Fireworks (at least MX 2004) snaps objects, including text, to whole pixels… magnification of all text I’ve create results in exactly the same pixel pattern for a given letterform (assuming the same kerning).

December 02, 04h

I’m so glad you said something about this!

All I’ve been able to do to is magnify the text enough to see the quality of anti-aliasing, and then make very small adjustments to the font size, tracking and kerning. And although it never occurred to me until I read your post, making small adjustments to the baseline shift would probably satisfy the need to adjust the text vertically without having to change the font size (which primarily adjusts the upper edge of the type, but also changes the lower edge enough to be useful at times).

Unfortunately, it’s all just a kludgy workaround until we get a tool that can do this for us.

4
Hunox says:
December 02, 06h

Heh, how’d known… I’ve was wondering about that myself for a while, but couldn’t even imagine where to start looking for solution, so I never looked. Thank you for that clarification.

December 02, 06h

Wow Dave I love the mini-redesign! Excellent. I too am glad to hear about this and that I am not the only one. I don’t use photoshop, but I get pretty much the same problem in Paint Shop Pro.

cam c. says:
December 02, 07h

Dave, try messing with the character height percentages… depending on the font, if you go up to about 103-104%, it can fix this problem, but it won’t be enough to make the text look stretched or elongated at small pixel sizes…

I run into this even worse doing design in Japanese; kanji are pretty much unreadable aliased below 11px and antialiased below 9-10px, so sometimes a little height tweaking makes a huge difference.

7
Rahul says:
December 02, 07h

Do you set your type with zoom more than 100%? If you’re at 100%, a screen pixel is an image pixel, and I’d guess your mouse can only move one screen pixel at a time, right? So you probably won’t be able to click at fractional pixel values in the first place.

I can’t seem to replicate the problem on my Photoshop 7.0 though. At 100%, I get consistent horizontal and vertical positioning wherever I click. At higher zoom, horizontal positioning varies, but vertically it’s still pixel-crisp. Indeed, I just can’t get the baseline to shift.

Could it be a CS-only thing? Though that doesn’t explain Ben’s comment above…

Pete says:
December 02, 07h

I have this same problem when using the underline text feature. Sometimes perfect, othertimes the underline is touching the baseline/letterforms.

When you say vertical kerning, I think your refering to leading? If so, you can adjust the leading to fractional units. ie: 12.5 points, pixels etc. this should fix it. However, I really like the snap to pixel grid solution from cyomega in comment 1.

Kyle says:
December 02, 09h

I feel like I’ve seen the answer to this before… I know you can adjust the baseline for a given character/string in a text zone (Shft+Alt+up/down) however this seems to go up/down 1px - not the 2pt/px that it claims to do. I’ll keep searching… but I swear there’s an answer, and I swear I’ve seen it before =/

10
cyomega says:
December 02, 11h

Theoretically, you could turn on “snap to grid”, set the snap distance to 1px, and then grab and drop the text. This should align the type with the pixel grid, after which you can nudge with the Move tool to get perfect positioning. I know it sounds a bit kludgy (it is), but it’s the only way I can think of at the moment.

Dustin says:
December 02, 11h

I generally try to stay away from the kerning and just go with ‘none’ in the anti-alias box. But that’s just my preference of design. I could see how the soft anti-alias would be nice when you’re going to be needing some solid transparency on any given background color.

When someone figures this out I’d be interested in knowing.

ben says:
December 02, 11h

If it’s any consolation -

Photoshop user since 1997 -

Same problem -

Same solution.

…Not for lack of wanting.

13
Steve says:
December 02, 12h

Right up front I’m going to apologize for the pedantic nature of my post. And I *know* you know this already, but there are others that may not. So with that out of the way…

Kerning refers to the process of adjusting the spacing between letter pairs.

Tracking refers to the process of adjusting the spacing between all the letters on a line or in a block of type.

Word Spacing refers to the process of adjusting the spacing between words.

Photoshop CS offers adjustment menus for Tracking and Kerning on the Character palette. In order to adjust Word Spacing you have to choose Justification from the Paragraph palette menu.

Thanks for everything you do :)
- Steve

December 02, 12h

I’ve often noticed the difference in anti-aliasing between multiple settings of the exact same type, but have always been too lazy to figure out why. Glad to see that someone else did the work for me. :)

As for solutions, I certainly don’t have anything between that cyomega’s suggestion…

BTW - Love the holiday header.

December 03, 01h

You can solve the problem.
The text have to be created inside a ‘text-area’ eg: by click dragging a text-area as opposed to just single clicking anywhere inside a document.

In a text-area, you can when in text-editing mode, hold your mouse over one of the handles of the textarea (eg upper handle) and you can then move this handle with subpixel precision, thus moving the text slightly up and down.

This results in a better anti-alias. screenshot:
http://www.s82.nl/temp/vertkern.gif

Can anyone confirm this is a solution, as I was not aware of the problem before :) (tested in photoshop 7/win)

December 03, 02h

You can move text vertically in sub-pixels, as long as you’re editing the text in question (i.e. text is highlighted or there’s a text cursor flashing away), by using the Ctrl/Apple key temporary move tool. For reasons that sorta, kinda make sense, this won’t work on “Sharp” or “Crisp” antialiasing. With “Strong” or “Smooth”, you’re all set.

pete says:
December 03, 03h

Scotts Answer is awesome. This also fixes my underline problem. Nice one. Thanks.

December 03, 05h

Try turning off “Fractional Widths” in the Palette options (the “(>)” in the upper-right corner of PS7 for Mac). It seems to make things much better.

I also love the new header.

19
Jay says:
December 03, 07h

I’ve encountered the same problem with Flash MX 2004 and I’ve yet to find a way to find the right positioning on the canvas to avoid the fractional pixel problem. It seems to rear its head with sIFR and fonts that have thin portions of the glyph, but becomes unnoticeable with larger fonts. I hear Macromedia is working on it though for the next release.

chuck says:
December 03, 07h

I don’t know about Photoshop, but I haven’t noticed that problem in Fireworks.

I do know that when you’re working with pixel fonts in Flash, the text box needs to be plaed on an even numbered x,y coordinate. If not, then the text is fuzzy.

Perhaps there could be a similar issue in Photoshop?

December 03, 08h

I have experienced this in about Version 4 for the first time (and remember setting text again and again to avoid it).
Thanks Scott for posting this simple solution. It works great. Unfortunately the Help-File doesn’t mention how Anti-Aliasing works, but my guess is that “Sharp” and “Crisp” settings don’t apply any vertical anti-aliasing at all and therefore cannot cause this problem.
You can even repair a blurred baseline by changing the setting from Strong/Smooth to Sharp/Crisp

22
Hero A says:
December 03, 12h

I’ve used a simplified process similar to Jim Royal’s (post#6) for quite some time.

If I’ve got isolated web text to create or update, I’ve always set them in ILLUSTRATOR, bypassing the frustrating shortcomings in Photoshop.

This process has never failed to produce text with crisp baselines for me since IllustratorV6. I’ve never played with PhotoshopCS, so I can’t say if it has the same kind of control.

The keys in my technique are:

* create an RGB mode document (I recommend turning colour management settings OFF for this)

* setting up a bounding box (no stroke; invisible or chosen matte RGB colour fill) with the top left corner point snapped to an inch/72pt grid

* positioning/snapping the first text baseline to a distance in whole number/non-decimal points from the top of the bounding box

* using whole number/non-decimal point leading on multiple lines

* adjust the bounding box to fit the text using only the bottom right corner

* at 72ppi anti-aliased, either export it to your raster format of choice for futher editing or just “Save for Web…” (which is a good preview as well)

If you export as a PSD with an invisible bounding box, you can place the text in it’s own layer in a more complex layout. Obviously, the text won’t be editable. You could, however, always use text layers for position only, and set your final text in illustrator.

Since I don’t own AdobeCS, I’ve used InDesign to set text the same way with “visual kerning” when I’m too lazy to manually kern; then export as EPS, and import/rasterize in Photoshop at 72ppi.

Whoa. Been over a year since I last posted here:
http://www.mezzoblue.com/archives/2003/11/14/methodology/comments/#c002388

December 03, 12h

My immediate thought was that baseline shift could handle this, and sure enough it can.

The trick is not to use the keyboard shortcuts Kyle mentioned, because they adjust the baseline by 1pt (not 1px) at a time, which is pretty coarse for adjusting anti-aliasing.

Instead, open the character palette and type in your adjustments. The character palette is inherited from InDesign, so it has DTP-level precision - you can adjust baseline shift in one-hundredth-of-a-point increments if you wish.

I just tried it with some 3pt, 10pt and 30pt Arial Regular, and in each case shifting in one-tenth-of-a-point increments produced a noticable shift in anti-aliasing.

December 04, 07h

Vertical Kerning? I think you’re talking about leading if you’re speaking of the relative space between lines. Kerning by definition is a horizontal concept.

The issue here is more one not of spacing but of finding a way to create clean smaller type.

The method I use is to set my type at the desired size - say 10 point. I then blow it up quite large to examine my horizontal strokes, both the caps and lower case. If there’s an extra fuzzy pixel (or several) on top of the letter “E” I increase or decrease my point size randomly by tenths or hundredths of a point. Finding the right size that’s clean is paramount.

While I’m doing this I’ve got a second window open in Photoshop showing me my art at 100%. I stare at that while kerning in the large window, minutely manipulating my horizontal spacing (kerning) for maximum cleanliness, especially of the letter “l” and any characters with absolute horizontals or verticals. Back and forth over and over, including spaces between words. It’s a pain and makes you miss print, but fuzzy type is hard on the eyes and looks unprofessional.

In some typefaces one can find the perfect size for lower case but upper won’t come clean. Or vice versa. In such cases I just pick a different face. Some just don’t draw well at all below 14 point or so.

Dave S. says:
December 04, 12h

Though I’ve posted an addendum in the body of the article, I’ll reply here too — the issue isn’t leading, as some have suspected. Leading is the space between lines, whereas we’re only talking about a single line of type. The issue is that vertically, the type doesn’t sit quite on the pixel grid and its anti-aliasing is too blurry as a result.

The best solution has been suggested by Scott Gould; use Cmd (or Ctrl) and the mouse to move the type around the canvas in units below a single pixel to better align it with the pixel grid.

Other solutions suggested, including baseline adjustment, micro leading adjustment, and changing the font size by fractions of a pixel will probably work as well, but Scott’s suggestion seems like the method Adobe intended for addressing this problem. It’s what I’ll use from now on.

December 06, 01h

For me, the most convenient is to adjust the height of the characters, exactly as “cam c.” suggested.

cam c. says:
December 06, 11h

I think Dave found the best answer with the CTRL/Apple key trick, but the percent adjustment I mentioned is useful when, for example, one part of a letter is on the pixels, and another is between pixels… it works horizontally too.

I mentioned it primarily for Japanese kanji… when you have a character that potentially could have 5 or 6 parallel horizontal or vertical lines, at anything below about 14-15 pixels, some height adjustment can make a huge difference.

December 07, 02h

I found that Scott Gould’s solution doesn’t work for me (Photoshop 7, Windows) - it just moves the carat to the start of the text (or end, depending on whether you pressed up or down).

However, further to Sander van Dragt’s suggestion, it is possible to move the text (even if it wasn’t created using a dragged-out textbox) at a sub-pixel level provided you have the anti-aliasing method set to strong or smooth. Simply press Control-T (or Command-T) to transform the text layer, then assuming you are zoomed in at more than 100%, nudge the text layer using the cursor keys. You should then see the text anti-aliasing change.

29
George Orthwein says:
December 07, 07h

An important detail to note is that if you create the text while the document is at 100% then the text will anti-alias the same every time. If you create some text while zoomed in and others while zoomed out, then you definitely start to notice a difference.

Also, when moving the text over the “pixel grid” it is necessary to zoom in a few steps (and much easier to see what’s going on). This is probably somewhat obvious but should be mentioned.

As for Ben Darlow’s comment that it doesn’t work on Windows… I think he is trying to use the arrow keys while editing the text… that doesn’t work, you just have to use control/apple to temporarily get the move tool and drag by hand. Zooming in and using Free Transform is a good method to use if you want to use the arrow keys to nudge.

And yes those pesky underlines drove me crazy until I figured this out!!

30
George Orthwein says:
December 07, 07h

Oh, and as for Flash… just make sure the text object is sitting at an even pixel value (and make sure the info palette is showing you the location from the UPPER LEFT of the object). By even pixel value I mean an integer like 8.0, 16.0.

If the text is embedded in movieclips, do the same for every movieclip in the heirarchy. Also Centered text will always have a problem because it doesn’t have a consistent x,y in the upper left.

Still anti-aliasing is finicky in Flash… especially when you want to be compatible with Flash Player 6, but this should help in most cases.

Aegir says:
December 08, 02h

There’s another simple solution, similar to Scott Gould’s, which works for shifting text in sub pixel values. It can be used to sort out the problem of underlines sticking to the bottom of text (rather than having a gap).

Zoom in, press Ctrl+T (Splat+T on mac) and use the cursor keys to move the text sub-pixel increments.

Works every time.

do0g says:
December 08, 05h

Beat me to it Aegir, that’s the method I use as well. CTRL + T, arrow keys to position, then Enter to commit. Easy!

33
cyomega says:
December 08, 12h

ROTFLMAO @ “Splat + T”

That is by far the best interpretation of the Command character I have ever seen.

Aegir gets an A+

kadavy says:
December 18, 07h

I would argue that any text that is so small that this is an issue on, shouldn’t be anti-aliased at all! This is a problem (that I have managed to get over) that I had with Quartz text-smoothing on its inception. The limitations of the screen simply don’t permit such small text to be anti-aliased.