Pixel Fonts To The Rescue

Source

Graphic designers working on web projects often complain that when typefaces designed for print are set to lower sizes that they become harder to read and unattractive to the eye. Even using anti-aliasing (the smooth option in the Character Palette) is not enough to help these fonts look better on screen. The solution when this happens is to abandon the printer fonts altogether and to try using a Pixel font, which will produce a crisp, clean image at very small sizes.

Pixel Fonts — Limits & Restrictions
Pixel fonts were created specifically for computers, with each pixel of the font designed on a grid that is exactly the same grid that is on your computer screen. Because of this Pixel fonts have certain limitations. They cannot be scaled and must be used at the sizes at which they were designed, or else at exact multiples. This is to prevent them from distorting. It is also important to never apply any anti-aliasing to them.

Let's Pick A Pixel Font
Some great pixel fonts can be found at Joe Gillespie's minifonts.com site. One of his font creations, Mini 7, is considered to be the most popular Pixel font in use on the web today, and it is one of my all-time favorites.

Pixel Fonts In Action
Pixel fonts are great for website photo captions, because you can get a lot of text into a small area, and it will still be very legible. (The screenshot below uses Mini 7). They are also great for website interfaces, especially navigation buttons.

Pixel Font Troubleshooting Checklist
Follow these guidelines (from minifonts.com) to avoid the most common problems:
Pixel fonts should be set on a page with a 72 ppi resolution.
Anti-aliasing (font smoothing) should be off.
The type size should be the 'designed size' or multiple of it. You will find this size in your ReadMe file.
All tracking and kerning should be set to zero and character widths to 100%.
Leading (line spacing) can be specified as required.
Always specify your font sizes in pixels, not points. A ten pixel font is not necessarily the same as a ten point one. Change your setup to work in pixels and set your document resolution to 72 ppi (pixels per inch).
Do not use a centered paragraph style. The math required to center text can result in fractional spacing and vertical rows of pixels can mysteriously disappear. Always set your pixel fonts ranged left and center it by moving the whole layer.
Save as GIF images at a 1-bit color depth, resulting in a small file size.

Inspiration
If you're curious as to how far you can take the pixel look, visit Kaliber 10000 (The Designers' Lunchbox). Now that's a "pixelated" website.

Pixel Fonts — Where To Get Them — Free Font Resources
DaFont.com — DaFont.com has some great free pixel fonts. Just do a search (top right of screen) for "pixel" to find them. I like Snoot.org px10 by Divide by Zero.
04 — On the front page click on "extra" and then you'll see "bitmap font" and "font ps.tt" - which are free downloads. This is a very nice collection of pixel fonts.
Wanted Fonts — Lots of free fonts. On left side navigation you'll see categories. Look for "pixelated" and search through the collection. "Endless Showroom" looks nice.
HighFonts.com — Another nice site with a great collection of free fonts you can download.
Silkscreen - Free Pixel Font — Silkscreen is a free four member type family for your Web graphics created by Jason Kottke. Available in both Mac and Windows versions.
How To Install & Remove Fonts In Windows — This font installation guide will tell you everything you need to know.
MiniFonts.com — Joe Gillespie's site showcases the individual fonts he has for sale (over 200), or you can try the free samples. The site also features some in-depth articles on the history of pixel fonts, pixel font usage tips, and a pixel fonts FAQ page.