Pixel Fonts
         by kirupa chinnathambi

Have you ever visited a cool Flash site or viewed a cool Flash animation that did not use pixel fonts? Yes - you probably have, but for this tutorial's sake, let's just say you haven't. While pixel fonts have been popular in the print and graphic worlds for a long time, they are making a large impression in the Flash world only now.

Pixel fonts have several advantages over regular fonts, and you can see a few advantages in the static animation below:

[ notice the crispness of the small text above ]

The primary advantage pixel fonts have over regular fonts is that they don't alias - blur - when used in Flash. Pixel fonts are drawn using simple blocks instead of elaborate curves with shaded pixels. The following image compares a popular non-pixel font with a pixel font:

Notice how the 'A' on the left is blurry toward its legs while the 'A' on the right is still crisp and nice. Pixel fonts are great for Flash sites that need small text that is still legible.

The most difficult aspect of pixel fonts, besides using them, is finding them. You can search the net for free pixel fonts, but the best pixel fonts are the ones you pay for. If you are not interested in paying for your fonts at this moment, you can try high-quality, limited, free versions of pixel fonts from popular pixel font creator  Fonts For Flash (click on Freebies for the free fonts).

Now, let's find out how to use the pixel fonts:

  1. Once you have your pixel font downloaded, make sure they are placed in the right folder. Windows users, place your unzipped font (.TTF) files into the Windows/Fonts folder.

    Mac users, click here for information on installing fonts.
  2. Open Flash and create a new document.
  3. Click the Text Tool icon from the toolbox on the left:

    [ the text tool icon ]

  4. After you have clicked the Text Tool icon, click and drag a rectangular shape (using the text tool) in the drawing area. You should see a box similar to what is shown in the following image:

[ the box you drew using the text tool ]

  1. Now, type in the word "Pixel". After you have done that, highlight all of the text and look for the font drop-down menu in the Properties panel at the bottom of the drawing area.
  2. While your text is still highlighted, select a pixel font that you downloaded. I will be using the free sample of FFF Harmony, but you may have another font that you downloaded instead:

[ select a pixel font ]

  1. The word pixel should acquire the style of the font you just selected. Now, ensure your font's size is in multiples of 8 such as 8, 16 24, 32, etc. Avoid using a number such as 10, 12, 14, etc.

    After changing the text's properties, click on an empty area of your drawing area to deselect your text. You are almost finished.
  2. Select the word you created. Look in your Info panel or Properties panel. Find where it has the X and Y position of your font listed. Ensure that the X and Y position of the font sits on a whole number:

[ ensure that the X and Y position of your font sits on a whole number ]

  1. Break the text apart by selecting the text and pressing Ctrl + B. Keep pressing Ctrl + B until all you see are the selectable font portions without the blue outline box:

[ break apart the text by pressing Ctrl + B a few times ]

  1. If you are using large pieces of text, I recommend you read the first bulleted point in Randomness. Breaking apart large pieces of text is not advisable, for it dramatically increases the file size of your animation.

You are finished with this tutorial, but you may want to read the next section that contains further explanations and tidbits of information that might prove useful to you.

This section features random tips and tricks that will help you solve most encounters related to pixel fonts:

  • For larger pieces of text, it is recommended that you Embed the text instead of breaking it apart. Select the text and ensure that it is a Dynamic Text box. In the Text Properties panel, you will see the Character button appear:

[ the Character button ]

Press the Character button and, from the Character Options dialog box that appears, select All Characters. You may also use the other options to only embed certain characters in your text.

  • If you fail to place your text's X and Y position on a whole number, the pixel font will look blurred.
  • When you place text using a pixel font inside a movie clip, you may notice that your X and Y positions suddenly shift from a whole number to a decimal number. As long as the font looks crisp, you don't have to change the position of the text to a whole number.
  • Try to avoid animating pixel fonts. When your fonts change size or move, they have the tendency to get blurry because they are not located on a whole pixel value or their size is not in an exact multiple of 8.
  • Avoid scaling pixel fonts using Flash's Scale feature. If you need to increase the size of your pixel font, increment the text's font size by 8.
  • A great place for trying out and buying new fonts is Fonts For Flash - give them a visit when you get a chance.

Thanks to Stan Vassilev for suggesting the Embed font option and making other useful suggestions.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!



SUPPORTERS:'s fast and reliable hosting provided by Media Temple.