To keep the correct relationship between the pixels on a screen and the pixels that make up the characters in your font, there are a few important factors.

The most important one is that you specify your font sizes in pixels, not points. A ten pixel font is not necessarily the same as a ten point one. Set up your image editor to work in pixels and set your document resolution to 72 ppi (pixels per inch).

Think of these fonts as being small mosaic tiles that have to fit into a larger mosaic grid - the page. Mosaic tiles are a fixed size, you can't stretch them or squeeze them to fit off-grid. If you zoom-in on any character, you will see that it is also made up of square tiles and these tiles have to fit on the pixel grid of the screen.

For this reason, you can't distort these fonts or alter their letterspacing by anything other than a complete 'tile'. Make sure that the text settings in your graphics program are set to 'neutral'. No condensing or expanding, no kerning, no letter-spacing. - and definitely, no anti-aliasing. Most of the 'problem' emails we get are because the users text settings are not at neutral.

If your font is designed at 10 pixels, it will only fit the pixel grid if you set it at 10 pixels, although you can also set it at exact multiples too. At 20 pixels for instance, there would be four tiles in the grid instead of one.

 

These are the settings to
ensure optimal results. Zero
kerning, zero spacing, 100%
height and width

 

Another problem that can arise is if you use a centred paragraph style. The math required to centre text can result in fractional spacing and vertical rows of pixels can mysteriously disappear. Always set your pixel fonts ranged left and centre it by moving the whole layer.

 

Paragraphs should be
ranged left (or right), never
centered as this introduces
uneven spacing because of
rounding errors

 

As these fonts are in TrueType® format, they can be used in Flash and other vector graphics programs. When the Flash file is published, it converts the fonts into vector shapes so there is no problem with the fonts not being available on the user's system.

Although they are vector shapes, they still have to conform to the mosaic tile principle. The 'tiles' have to fit precisely to the screen's pixel grid.

If you place a character off the pixel grid, it will be 'averaged' across multiple pixels and you will get blurred, anti-aliased text. Make sure that all your text is at exact X, Y positions on the screen and that your Flash movie can only be viewed at 100%. You must not allow it to be resized arbitrarily.

Flash MX has a new 'snap to pixel' facility that ensures that pixel fonts are always on-grid. Make sure it is switched on before you try to place text.

 

The Flash MX Info Panel
showing the X and Y values
of 156.0 and 175.0 with
no decimal places. The X,Y,
registration point is set to
top left, not center

 

Note: While these fonts work fine as static text, their use in Flash's dynamic text boxes requires them to be installed on the viewing computer or to be embedded.

Embedded fonts behave differently from those used in static text boxes and are unlikely to give the required results. When Flash embeds fonts, their sizes are changed. Although this doesn't matter much with anti-aliased fonts, which are blurred anyway, pixel fonts get shifted off the pixel grid of the screen. This is due to the accumulated errors caused by the small difference in the size of each character. The effect is that the text goes in and out of phase with the screen grid and goes from sharp to blurred and back again. Embedding pixel fonts in Flash movies is not recommended for this reason.

You can check if the font pixels are in register with the screen's pixels by switching-on Edit:Grid:Show Grid and zooming-in to 800% or more. Any off-grid font pixels will blur. Switch to 'Outline' mode to hide the fills if you have solid background areas.

 

 

Zoomed-in to 800% it's
easy to see that the
setting matches the grid

 

Here, the font outline and
top left corner of
the blue bounding box
are clearly off-grid

 

The other thing that affects anti-aliasing in Flash is the Publish Settings. In the 'HTML' tab there is a popup labelled 'quality'. Setting this to 'Low' switches anti-aliaing off completely and has the added benefit of giving faster and smoother animation – as there is less processing to do. Unless you are combining pixel fonts with regular printer fonts or have other shapes on the screen that require anti-aliased, use this setting to avoid unwanted font smoothing.

Unfortunately, it is not possible to have different 'quality' settings in the same movie or on different layers but you can chain movies of different quality settings together to switch anti-aliasing on or off as required.

Examples of Tenacity used with Flash.

If you are having problems with the Windows version of Flash, see here.

 

 

At the moment, Jasc's popular PaintShop Pro sets all text at 96 ppi regardless of the page resolution setting. It also does not allow you to set the fractional point sizes required to get pixels. At 96 ppi, a pixel is 1.333 points. To set a 10 pixel font, you would have to set it at 7.5 points - well you can't until they update the program.

If you use PaintShop Pro, the workaround for the minute is to set 10 pixel type at 15 points and resize the whole image to 50% or you can change Windows to run at 72ppi.

Better still, download the free SimpleSetter program which always gets the size and resolution right and lets you paste it into PSP for pixel-perfect results.

Note, although there is no charge for the SimpleSetter application, it requires specially designed characters from the Tenacity 1.3 font to operate correctly.

 

 

The difference between points and pixels on Windows causes problems in some programs such as PaintShop Pro and Macromedia Flash.

PaintShop Pro only allows type to be specified in points and doesn't accept the fractional point sizes necessary to do the conversion – 10 pixels = 7.5 points.

Flash only allows line spacing to be set in points, not pixels, so multi-line text can go out of sync with the screens natural pixel grid.

Temporarily setting Windows to run at 72 pixels per inch instead of its default 96 ppi solves these problems completely. Once you have made your files, you can switch back.

Here's how you do it.

1. Right-click on the desktop and choose 'Properties' to bring up the 'Display Properties' dialog.
2. Click on the 'Settings' tab.
3. Click the 'Advanced' button.
4. You will see the DPI Setting pop-up menu, which will be set to 'Normal Size [96 DPI]'.
5. At the bottom of the pop-up menu, you will find the 'Custom Settings' item – choose it.
6. Set the scale to 75% and you should see a sample of Arial 10 point at 72 pixels per inch, which is what we want.
7. Click on 'OK' and you will be prompted to restart Windows.

When Windows restarts, everything on the screen will be 75% smaller than it was before. You can compensate by changing the screen resolution if things look too small. If you work at 1024 x 768, change to 800 x 600. Note: you should only do this on a conventional cathode ray tube monitor. LCD monitors don't run satisfactorily at anything other than their natural resolution – just like pixel fonts – and will anti-alias everything. On an LCD monitor, change the window zoom to 200% to see what you are doing.

Now, you are working at 72 pixels per inch and pixel and points are identical so PSP and Flash will render pixel fonts as they should.

To revert to 96 ppi, just do the same procedure again but choose 'Normal Size [96 DPI]'.

 

 

MiniFonts are intended to be used for small amounts of text in menus, navbars, banner ads and captions. In general, it is better to use regular 'Verdana, Arial, Geneva' typefaces for body text on a Web page because (a) it requires fewer bytes, (b) it can be resized by the surfer if necessary and (c) it can be searched and indexed.

Remember, if your page contains only images and no text, it is unlikely to be seen as 'important' by search engines such as Google and will get a low ranking.

If you still want to set a larger amount of text with your MiniFonts for stylistic reasons, here are some tips.

Save your GIF at the lowest possible bit depth (usually 1-bit). It doesn't matter if it has a transparent background or not. At 1-bit, you can get a reasonably large image under 1k. Blank space compresses very efficiently so don't be too concerned about wide letter or line spacing, it won't make much difference to the file size.

Remember it is an image. It should have an <img alt="..."> attribute to provides a synopsis of the text when images are turned off or when screen reading software is used. You must have an <img alt> attribute for your page to validate.

You can also use the <img title="..."> attribute to provide a 'tooltip-style' context-sensitive help message in some browsers when the mouse passes over the image.

Either, or both of these will give search engines something to latch onto.

 

 

Photoshop and LiveMotion are registered trademarks of Adobe Systems, Inc.
Flash and Fireworks are registered trademarks of Macromedia, Inc.
PaintShop Pro is the registerd trademark of Jasc, Inc.
TrueType is a registered trademark of Apple Computer, Inc.