Pixel perfect fonts (New Tutorial)When you need really small type the anti-aliasing that produces nice smooth edges at larger sizes can be a problem, resulting in blurred text.
There are two solutions to this. Firstly you can do what I call 'pixel optimize' your fonts, which is to carefully adjust the font size and Y position so that the font best aligns with the screen pixels. This can make a substantial difference to the quality of small text.
By carefully adjusting the the text you can considerably improve readability of small text
The other method is to use a font designed specifically for screen use at small sizes, and that's what is described here. There are an increasing number of 'pixel fonts', available, some of them free, some for a small charge (usually under $20). These are fonts that have little or no anti-aliasing and are designed to be used at a very exact size - and they only work at the right size.
Some examples of screen pixel fonts - readable down to really tiny text sizes. No blur and no anti-aliasing.
As you can see this font is a bit like the old fashioned 'hand designed' fonts that came before scaleable outline based fonts and TrueType anti-aliasing font managers. However this is a TrueType font designed to look exactly this way, to appear with no anti-aliasing so it provides very sharp, very clear text and very small sizes. But it's been designed to display this way at one exact size - 6pt in this case.
These fonts are ideal for producing very small web graphics, such as these tiny buttons (with or without shadows). In this case it's using a font called Semplice.
Here's a selection of different pixel fonts, shown at their native size (6pt) and at double the size.
A selection of different pixel fonts, at original and double size.
How to create pixel perfect textAssuming you have the fonts downloaded and installed into your fonts folder (see links below for where to get them) all you need to do is select the font and make sure the text size is 6pt (or 8pix) and then adjust the X and Y positions by small fractions until you get your pin sharp text. There's an easy key short-cut to do this micro-nudging, the Ctrl-Shift-Arrow key.
You'll find that typically the X and Y coordinates will turn out to be .8 of a pixel for most pixel fonts (it's not while pixels because of a slight offset in the fonts). If you do not get the size and position exactly right, you get a very blurred result - because the pixels of the font are not aligning with the screen pixels.
If the font aligns exactly with the screen pixel (left) you get a sharp font.
If the font is slightly off, then the normal process of anti-aliasing causes the surrounding pixels to have some shades of gray, resulting in the text being blurred (right)
Perhaps the only confusing thing is that in order to align these fonts exactly to pixels you must set the XY coordinates of the text to end in .8 of a pixel. So an XY value of say 120.8, 50.8pix would in fact align the font to be exactly on the grid. (This is the because the origin point has a slight 0.2 pixel offset from the actual correct corner.)
This example is from a font called Unibody which is available for free download.
Saving PNG or GIFsWhen you export the image as a bitmap you have to be careful to check the image is sharp still. If your export area is not on exact pixel boundaries it will shift the image very slightly to make it whole pixels. This has the effect of destroying the sharpness. Fortunately you can solve this by selecting the 'Maintain screen anti-aliasing' option on the Bitmap Size tab of the Export dialog (sometimes however you may find the other option works better, depending exactly on the size and XY position of the objects you are saving.) The preview window shows whether the text is sharp or not.
Select either the 'maintain screen anti-aliasing' or 'minimise visible anti-aliasing' options when exporting PNG or GIF images to keep the text sharp.
Tip: If you save the PNG or GIF as 16 color, or even fewer colors, the files can be very small indeed. This image is saved as just 4 color transparent PNG, and is just 470 bytes.
Zoom utilitiesThere are many zoom utilities around that make it much easier working with very small type, that allow you to see the anti-aliasing with ease. We highly recommend using one of these utilities, especially when pixel optimizing text. The links section below shows where you can download the Zoom and Zoom+ tools for free.
This is the Zoom+ tool showing an enlarged part of the Xara screen. You can also see here the XY coordinates of the top line of Unibody text is 36.8 and 555.8 pixels exactly.
Line spacingIf you want to create multiple lines of text you have to ensure the line spacing is exact pixels. For most of the Pixel fonts shown here it is (8 pixels), but for other fonts, or if you're creating your own pixel optimized fonts using the traditional TrueType fonts, then the default line spacing will not be exact pixels. In this case just enter something like '16pix' into the line spacing field. (Xara can accept either exact values or % values in the text line spacing field.)
Some more tips for pixel perfect text:
LinksUnibody pixel font family (free): http://www.underware.nl/site2/index.php3?id1=unibody&id2=overview
Semplice and other pixel fonts (a very nice range of fonts, free for personal use): http://pixelfonts.style-force.net/
Supersaturada font (there are a few pixel fonts here): http://www.zeh.com.br/
Zoom utility (very basic, free): http://www3.sympatico.ca/paulscott/zoom.htm
Zoom+ utility (free): http://www.gipsysoft.com/zoomplus/
FilesPixel fonts.xar - An example of the pixel fonts. Requires the font to be installed
Pixel Fonts (all shapes).xar - The same document does not require the fonts to be installed (all text converted to shapes)
©2006 Xara Group Ltd.