Contributor: Joe Gillespie
the secrets of presenting small type words on
a computer monitor. Join Joe Gillespie as he
provides a rare guide through the world of pixel
fonts. Learn about the pitfalls of standard
fonts, how different screens display fonts,
and the special considerations you should make
when using Flash.
secret life of the pixel font
Fonts that are designed for printing at high resolution
don't usually look too good at small sizes on a
computer screen. The smaller the type size, the
worse they look.
Pixel fonts like MINI
7, Tenacity, MiniVista and MiniSerif (opens
new window) are designed especially for screen resolutions
and every stroke and dot falls exactly within a
'tile' of the screen's tiny mosaic. So, even at
very small sizes, they look crisp and clear. Their
shapes avoid curves preferring instead to lie along
horizontal and vertical lines as much as possible.
On the downside, pixel fonts are 'fixed' in size
and are not readily rescaled. Used at font sizes
other than their natural size, some horizontal and
vertical lines double-up making the characters look
distorted. At exact multiples of their natural size,
they fit the grid again but can look 'chunky' and
pixelated, which is fine if you want that kind of
Cross Platform Screen Resolution
There is a considerable amount of confusion about
screen resolution and font sizes. Traditionally,
fonts sizes are given in 'points' - a point being
a typographic measure 1/72 of an inch square.
Since their introduction in 1984, Macintosh computer
screens have had a relationship of 1 point = 1 pixel,
which is about as simple as it gets. Macs have always
had high resolution screens that could display type
and other images at 72 pixels per inch.
Office computers (PCs) used to have lower resolution
screens, with bigger pixels. They originally used
dot matrix or daisy-wheel printers where there was
little if any relationship between what you saw
on screen and what was printed.
When laser and ink-jet printers became available,
PCs still had relatively low resolution displays.
Rather than strain the operators' eyes, Microsoft
made the default screen resolution in Windows 96
pixels per inch, effectively 33% larger than actual
(printed) size. They couldn't make the pixels smaller,
so they made the inches bigger.
Nowadays, Mac and PC share the same high resolution
monitors and (nearly) everybody uses WYSIWYG programs
but we are still left with this situation where
'points' on a Mac are 1/72 of an inch and on a PC
they are more like 1/54 of an inch - one third bigger.
chart on the left shows typical screen resolutions,
although there are users with bad eyesight or
tight budgets who use smaller or larger pixels.
The good news is that, for Web graphics, we
are not concerned with point sizes.
Computer screens, regardless of the computer type,
are a certain number of pixels wide and high. Generally,
if you have a 15" monitor, it has a resolution
of 800 x 600 pixels. If you have a 17" monitor,
you get a bit of extra screen space by using 1024
x 768 pixels, and larger screens allow even greater
pixel heights and depths. If you divide the with
of your screen in inches by its pixel width, you
get your screen's PPI (pixels per inch) value. Remember
that screen sizes are usually specified as diagonal
measurements across the visible area of the tube.
A 17" monitor has a picture width of something
PPI values do not change a lot from one user to
the next and average about 80-85 PPI (800/9.5 or
1024/12) for comfortable reading on a good quality
Although type sizes are specified in points, what
we are really interested in is the height in pixels,
which bears little or no relationship to the point
size as far as screens are concerned.
When it comes to using pixel fonts, the type size
is measured in pixels, not points. If you put pixel
fonts on a document that is set to 72 PPI, points
and pixels will be the same. If you try to put them
on a document that is set-up for a resolution of
96 PPI, you will have trouble, because few programs
will allow you to enter, say, a point size of 7.5
points to get 10 pixels.
To keep things simple, keep your document resolution
at 72 PPI. It makes no difference to what a browser
displays at all, but will simplify your type setting
considerably. Don't work in inches, centimetres,
points or any real-world metrication system - stick
Most programs that are used for producing Web graphics
can be set to work in pixels and to a resolution
of 72 PPI.
Programs like Adobe Photoshop and Macromedia Fireworks
give you various options for type smoothing but
for pixel fonts, type smoothing (anti-aliasing)
should be turned off completely.
Try to set your text using regular ranged-left alignment
with no tracking or kerning. You can add as much
leading as you like. Using centered alignment might
cause unevenness of letter spacing due to rounding
errors. If you must have a centered layout, be prepared
to do a little adjusting manually if some of the
letter spaces close up.
Some programs don't work in absolute pixels but
use scalable vector graphics, the most common one
being Macromedia Flash.
Pixel fonts and Flash
Macromedia Flash is bandwidth-efficient because
it uses vectors instead of bitmaps. Vectors also
have the advantage of being resolution independent,
they can scale to any size, so the concept of pixel
accuracy is irrelevant.
Using pixel-accurate fonts such as my MINI series
in such a non-pixel environment involves a few compromises.
Firstly, Flash anti-aliases (smoothes) by default,
which is fine for regular typefaces and vector shapes
but anti-aliasing small fonts just blurs them and
makes them less distinct. To stop Flash anti-aliasing,
it is best to publish in Low Quality
mode. Unfortunately, this affects everything in
the movie and shapes or fonts that need to be smooth
will look jagged. Even with multiple levels, it
is not possible to have more than one quality
in play at any one time.
The second problem is that if you let Flash scale
a movie to anything other than the normal 100%,
the pixel-for-pixel relationship is destroyed, you
cant set the magnification to 150% because
you cant have one and a half pixels.
Even at 100%, Flash will let you place objects at
fractional x, y positions. Any pixel-accurate font
not aligning perfectly with the screens natural
pixel grid will be compromised in shape or letter
spacing as it is forced into the nearest
whole set of pixels.
So, for pixel-accurate fonts to work best in Flash,
try to publish in Low Quality, fix the
magnification at exactly 100% and make sure that
all text begins at an exact x, y position on the
screen in the Info dialog.
If you must have High Quality graphics
on the screen at the same time as pixel fonts and
they look blurred, the solution is to make your
pixel fonts into a small GIF file, a two colour
GIF is usually sufficient, and import that into
Flash. It might be slightly larger than a vector,
but not much. You can set the imported GIF so that
it wont smooth in Library Options/Properties
dialog, just uncheck Allow smoothing.
The restrictions on scaling and x, y placement are
still present - low resolution bitmaps do not scale
In an ideal world, you should now be able to publish
in High Quality and that would be that, but unfortunately
there is a bug in Flash that sometimes resizes imported
GIFs by a few pixels. This can distort words or
phrases by adding or removing one or more rows of
vertical or horizontal pixels. This bug is documented
in a Macromedia technical note:
which suggests using break apart (and
other techniques) to stop the image from resizing.
According to that page, the issue has been present
since version 3 and still nothing has been
done about it!
Use pixel fonts
only at their designed sizes or exact multiples
Make sure anti-aliasing
is switched off.
alignment when setting lines of type.
tracking or kerning (use special pixel accurate
To find out more about current issues relating to
pixel fonts and the fonts Joe Gillespie has created,
visit Joe's site at