Using Pixel Fonts

Contributor: Joe Gillespie

Uncover 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.

The 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 look.

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.

The 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 like 12".

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 monitor.

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 to pixels!

Programs

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 can’t set the magnification to 150% because you can’t 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 won’t 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 happily.

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:

http://www.macromedia.com/support/flash/ts/documents/bitmaps_shift.htm)

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!

To summarise

• Use pixel fonts only at their designed sizes or exact multiples thereof.

• Make sure anti-aliasing is switched off.

• Avoid centred alignment when setting lines of type.

• Don’t use tracking or kerning (use special pixel accurate spaces).

To find out more about current issues relating to pixel fonts and the fonts Joe Gillespie has created, visit Joe's site at

http://www.minifonts.com/faqs.html

http://www.minifonts.com/tips.html