Using
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:
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.
Open Flash and create a new document.
Click the Text Tool icon from the toolbox on the left:
[ the text
tool icon ]
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 ]
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.
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 ]
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.
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 ]
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 ]
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.
Randomness
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.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/developer/mx/pixelfonts.htm
