Making Text Look Sharper On Your Webpage

There are a few little tricks that will help your text look a bit sharper on your webpages, especially at smaller sizes.

Resizing
When resampling blocks of text, there is an option that you may not have noticed, that will help you achieve sharper results. This is particularly useful when you have scanned in blocks of text or line art.

When we go to resize the image, Bicubic resampling is the default option. This works best for most images.

Here is the result on our text.

Try it again, this time choose bilinear resampling

Notice how much sharper the text is?

The second trick is for small text and is tracking, or kerning. This means the spacing between letters. Here is a line of text with standard tracking.

In the tracking box, increase the amount to 20

See how much more legible the text is. Look at a road sign and you will notice that the tracking is set very wide. That is why you can read them from a distance.

Here is a line of text with the crisp anti-alising, kind of blurry.

Photoshop 7 ships with a new level called Sharp, notice the difference?

I hope these little tips will help you to produce webpages with sharper, easier to read text.

Happy 4th of July all.

Until next week, see you at the cafe www.photoshopcafe.com

Spread the word:

1 Comment

Navneet Shetty said on — June 25, 2008 @ 5:07 am

Thanks dude,
Very NIce…

RSS feed for comments on this post. TrackBack URI

Photoshop Tutorials

Design Effects
Corey shows how to use the luminosity of an image to create a cool design effect and spice up your simple photos.
Stylized Comic Book Effect
Using this effect, you can transform anyone into a comic book character with a halftone, saturated look.
Text Shape Layers
Converting text into shapes allows you to distort the text as you like while retaining straight, clean edges.

3D Design

Using 3D tools in Photoshop CS4 Extended to create a logo element.
Bullet Hole Brushes

Here we will uses a series of custom shapes to create a bullet hole on a brush.
Displaced Effects

Here is a quick and easy way to use displacement maps to create a cool grunge look.
More Fun With Brushes

Here we will explore another aspect of custom brushes to create a cool background effect.

Create Smart Contact Sheets in Adobe InDesign
Adobe Bridge CS3 and InDesign have this secret relationship that allows you to do some really cool things with automating image placement and metadata
Creating Rain in After Effects
Tom Green opens up a picture of the Swiss Alps, re-sizes the image in Fireworks, and creates a rain simulation in After Effects
Creating Rain in After Effects, Part 2
Tom Green exports the rain effect out of After Effects and adds it to the still image in Flash to create an animated Flash video
Exposure Blending in Photoshop
Digital cameras make very easy is blending more than one exposure together for contrast control, increased dynamic range, or creative purposes

Document Your Happy Accidents

Sometimes our best creations happen by pure experimentation and accident. Sitting in front of a Photoshop file, you are 40 History States in, and then it happens—magic! You really want to be able to get back to that moment. To do so, make sure that you turn on the History Log checkbox in the General Preferences (Photoshop>Preferences>General [PC: Edit>Preferences>General]). You can save the information as metadata, as a separate text file, or both!

Photoshop Tutorials, Tips, and News | Planet Photoshop

Making Text Look Sharper On Your Webpage

1 Comment

Leave a comment

Photoshop Tutorials

Document Your Happy Accidents