By now you have your own pixel font (if not, read part one first). What you're lacking is any real characters. There are a few pitfalls when creating anything more complex than a single rectangle.
Imagine we were creating a capital 'L' character. we want a vertical beam and a horizontal beam. We could do it like this:
But those read crosses mean something is wrong. In truetype, contours are not allow to intersect (overlap). What we need to do is create a single contour with more points. In point editing mode, right click on a point and choose "Add Point". A new point is added on the contour between the selected point and the one before it. You can drag this new point to change the shape. Always use the "Transform" popup window to enter positions, since you want them to be perfect multiples of 256. You should end up with a glyph like this:
This glyph is nice and valid, and will work in Flash (Flash can be quite picky about intersecting contours and render the font vert strangely).
When we want to create a glyph with a "hole in the middle", like an 'o', we have to use contour directions. Consider making an 'o' using the above technique. We're fine until we need to "join it up":
To avoid intersecting contours, what we have to do is create a single solid contour of the outside edges of the shape, then add another contour on top of it, with it's "direction" set backwards, to represent the "hole".
To change the direction of a contour, right click on it in contour edit mode, and choose "Change Direction".
The last major problem you'll encounter is doing cornered pixel joints. Imagine the following:
You can't easily make this into a single glyph, so what can you do. The solution is fairly hackish, but a necessity. What we actually do is adjust the sizes by a few FUnits (eg. 1) so that they are a single glyph. For example:
(This is a VERY zoomed in view)
By changing two of the points to 255 instead of 256 (we change two because we want the line to be straight) we actually create a single solid glyph that appears to have an intersecting corner, but which is valid and renders correctly.
So your font is created, you have naming and copyright info in there and you've set the version number (both on "Naming" and "Settings"). What's left to do? Run the validation wizard! Choose "Font -> Validate..." from the menu.
This wizard can find and fix a bunch of problems that you may have. Most importantly, it fixes contours with incorrect direction and points out intersecting coordinates. Once your font passes all the validation tests, it's ready for release! Though it might be worth testing it in Word and Flash first ;)
This tutorial was created by Cal Henderson. He makes fonts which you can find here.
Comments have been disabled
# October 25, 2009 - 3:42 pm PST