What are Pixel Fonts? - By Blue_Chi

A major problem that used to face designers in the past was displaying fonts in small sizes. The way traditional fonts were optimised for printing at high resolution made these fonts look distorted on the computer screen when used on small sizes. Pixel fonts (also called Screen Fonts) were exclusively created for display on a computer screen and their structure is based on 'squares' so that it looks perfectly sharp when used in the proper way. Pixel fonts have become extremely popular all over the internet due to their clearness and sharp look, especially in flash websites, which led to the creation of a new genre of pixel fonts called "Super Pixel Fonts" which are just as clear as the normal pixel fonts but with smooth lines, which is not a usual characteristic of pixel fonts which are known to be pixilated.

How to use pixel fonts?
- Use the specific size of the font
Pixel fonts are created to perfectly fit pixel-by-pixel with the computer screen displaying the font, for this to be accomplished it is required to use the font on in the specified size for the given font, which is usually 8 pixels. Though having a single usable size is a criticised draw back for pixel fonts, it is actually possible to have a sharp look for a font using multiples of the specified size (e.g. 16, 24, 32, etc).

- Make sure it is aliased
To maintain the same exact shape of the letters you have to switch off all the non-alias text options (crisp, smooth, strong, etc) making your text aliased.

You can change the alias options from these panels in Fireworks and Photoshop:

Aliasing Setting Panel In Macromedia Fireworks

Aliasing Setting Panel In Adobe Photoshop

- Do not use Bold or Italic
Both of these two styles will distort your pixel fonts. Pixel fonts usually have bold and italics versions of a given font making it possible to stimulate such styles in a real design.

Special notes for using Pixel fonts in Flash
In addition to all the earlier notices, be aware of the following:

- Due to the exact pixel nature of the fonts you have to align your text perfectly to a whole pixel number with no decimals. To make sure of that you have to select your text, and then in the property inspector remove the factions after the decimal points.

You need to remove these fractions manually

- Use only left or right alignment, again, using justified alignment or centred alignment would usually distort the pixels of your fonts. You will have to manually move your text around to stimulate these two features.

- Using the object alignment panel will usually distort your text, make sure that you go back and change the X and Y properties in the property inspector to whole numbers.

- Flash MX 2004 introduced a new button for "aliasing text". Make sure to click on that whenever you use a pixel font.

Where to find pixel fonts?
You can get loads of free fonts by searching for "pixel fonts" in Google. FontsForFlash.com sells the best pixel fonts on the internet and also offers the rare Super Pixel Fonts for sale.

End of Tutorial.