an All Creative World site
JimD's picture
2626 pencils

Fix blurry text in web graphics

PS KerningWhen using small text in web graphics in either Photoshop or ImageReady, you may notice that your text looks blurry at small point sizes (usually, anything below 12 to 14 points). Running a sharpening filter over rasterized text only serves to make it look worse.

To clean up the blurry text, try increasing the tracking (kerning)amount of the text using the Character palette. By increasing the tracking amount it lowers the effects of anti-aliasing, thus making the letters appear sharper/cleaner.

Visit The Graphic Mac for graphics and Mac OS tips, reviews, tutorials and discussion.

Commenting on this Blog entry is closed.

Anonymous's picture

Thanks for the tip Jim. That's one I hadn't heard of.
It's also good to see a fellow creative using Siro. :)

- Shane Rebenschied

Ivan's picture

this is so true. thanks!
however, i prefer to use pixel fonts for small sizes, but i realize that sometimes they destroy the layout and most of them are hard to read.

Jim's picture

SIRO is "da bomb!"

Not only does it look good, but it's a nice neutral theme, perfect for designers who are constantly color correcting photos!

Anonymous's picture

Um, so for those of us not in the know, whats is Siro? :-)

Ivan's picture
Anonymous's picture

Holy smoke - I must have been living under a rock! Thanks for the link. These look great :-)

charlie don't surf's picture

Unsharp Mask does a great job enhancing small antialiased type. But you've got to be really good at unsharp mask settings.

soosy's picture

There is, like everything in PS, several approaches to solving this problem. Don't forget the anti-alias settings, depending on the font they can make a big difference or not much of a difference, but "crisp" can sometimes do the trick.

Another method that many don't seem to know is to:
1. Zoom in quite a bit on your text.
2. Click on it to get into editing mode (where you can type in text).
3. Hold down COMMAND to get the arrow tool. You can now move the type across what I call the "pixel grid" and you'll be able to control the anti-aliasing precisely. The more you zoom in, the finer control you'll have.

This especially works great to get underlines to be a single pixel instead of a blurry 2 pixels.

Good luck!

Creativebits is a blog about Creativity, Graphic Design, Adobe, Apple and other related subjects.

Do you need a great new logo?

Pick a pre-made design from a collection of 50,000+ logos that will be customized to your business name for free.