Breadcrumbs

Handling Pixel Fonts

Getting tired of pixel fonts that never work, become messy, and are unreadable? Here's a quick tutorial that will teach you how to properly handle pixel fonts.

First, let's take a look at two horrible examples:

In the above image, the text uses fourteen points for the font size with the anti-aliasing method set to sharp.

This image uses the same settings as the previous image, but contains a one pixel border along with a bevel and emboss.

Pixel fonts are designed for a special size, usually ten points and under. Regarding the anti-aliasing method, most pixel fonts look fine without anti-aliasing, so select none.

In the second picture we see that the one pixel border can ruin the pixel font, as pixel fonts are made for smaller font sizes. The one pixel border can get very thick and take over the text, making it hard to read. Last, never apply a bevel and emboss to a pixel font, it makes the text bolder and less readable.

Now, if we follow these simple guidelines we can create a clearly visible pixel font:

This image doesn't use any anti-aliasing methods, the font size is ten points, and no blending options are applied. Looks better, doesn't it?

On an ending note, when you use a pixel font make sure that you choose a proper color for the text, ideally so that it stands out from its background.