Pixel Fonts for the Web and Flash

July 26, 2004 - 2:00am ||| 0 Comments | Add new

I have a compulsive fascination with pixel fonts. I keep buying them, amassing a collection, even though I don't get a chance to use them that often. I'm always amazed at how creative people can be when they have just a few pixels to work with to design a typeface.

Not sure what a pixel font is? I'm sure you've seen them already on modern-looking web sites … they're often used for navigation as text labels, and most of the time appear in all caps.

Look at the navigation labels at this web design firm's site to see what I mean:

Pixel fonts are designed for readability at small sizes on web sites, Flash movies, or any other computer screen-based medium. They use no anti-aliasing (blurring/smoothing). The majority are optimized to a specific small size like 7, 8 or 9 points, where most "normal" fonts become unreadable on the monitor. A few pixel fonts are designed for larger sizes and/or can be used at two or three sizes.

On web sites, pixel fonts usually appear as .gif text, since few site visitors will have that pixel font loaded on their system. The designer chooses that font in Photoshop or whatever, types something out in the font designer's recommended size, turns off anti-aliasing (sets it to None), saves it out as a .gif and adds it to their web page.

In Flash movies, the font is always embedded in the file. Flash designers need to make sure that the font is placed at a whole pixel so no anti-aliasing is introduced by accident. Use the Info palette and make sure that the X and Y fields show whole numbers (11.0/53.0) and not fractions (11.2/53.6).

Pixel font designer/graphic designer Craig Kroeger offers a great guide to using pixel fonts in Flash on his web site, miniml.com (love that domain name). You can download his Font Guide in PDF format at the top of this page:

… and while you're there, see if you can't resist buying one of his pixel fonts that appear below the link. At only $10 each, they're like potato chips.

The first pixel font I bought was in 1997, the venerable "MINI 7," designed by Joe Gillespie and arguably the most-used pixel font to date. When I bought it, it was only available as a screen font suitcase for Macintosh users. He's since updated it to TrueType format for both Mac and Windows:

(Joe's acronymed web site stands for "Web Page Design for Designers," one of the first sites around that helped professional designers figure out how to create great looking web sites while under the yoke of HTML and web-safe colors. When you go there, be sure to hit the home page and use it as a jumping-off place to see all the other pages on his site. You'll learn something useful, trust me. He's one of those quiet geniuses on the web.)

Have I whet your appetite for pixel fonts? Here, have another chip:


Post new comment

The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.