Index

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 text

Assuming 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 GIFs

When 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 utilities

There 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 spacing

If 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:
  • Don't center your text. This will cause pixel fonts to not be pixel aligned. Center text manually if this is required.
  • You can use multiples of 6pt, e.g. 12pt or 18pt, and your text will remain sharp with no anti-aliasing.
  • Many pixel fonts do not contain full character sets such as and signs. Just be aware of this.
  • View at 100%. Use 'screen templates' e.g. 800x600 drawing, and not paper templates such as Letter or A4. Screen templates use pixel units for most things which makes it easier (not font size - but you can enter pix in the font size however).
  • And don't forget the micro-nudging key short-cuts: Ctrl+Shift+arrow moves the object by 0.2 of a pixel. It will still be necessary sometimes to enter precise fractions into the XY fields to move from, for example .7 to .8

Font sizes and screen resolution

Many of these fonts are created for use in Flash, or are expected to be used in Adobe products. So they will often claim the point size is 8pt (or sometimes more correctly they say 8 pix).

Firstly realise that Adobe products use the wrong pixel size. They assume your screen is 72dpi (from the Mac world) when in fact it's 96dpi (the correct PC standard). Therefore when they say this font is designed for 8pt - that is true only on the Mac and for Adobe software that pretends you're using a Mac (even if you are really using a PC).

(As an aside the PC standard 96dpi is actually much better than the Mac 72dpi because it's 33% higher resolution, and so you can read small fonts much better on a PC. And 96dpi is also more realistic, if you've ever measured your screen resolution. If you've ever wondered why small type looks so different on a Mac, or wondered why 10pt text in Adobe software looks nothing like 10pt text on any other PC software - such as Word - this is why).

So if a font was designed to be exact pixels at 8pt on a Mac or in Adobe software, then its correct size on a PC is 25% (72/96) less than this, namely exactly 6pt. (So to convert from Mac point sizes just multiply by 0.75). Or in Xara you can just enter fonts sizes in pixels. Sometimes you'll see Pixel fonts say they are designed to be used at 8pix and you can enter this in the font size field in Xara - and it converts it to the correct point size.


Links

Unibody 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/


Files

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