A while ago I created a font of my handwriting using a for-pay font-making website. For various reasons I was never terribly happy with the results, although I thought the small amount of money I was changed was a fair price. I kept using the font, waiting for something better.

That something better is YourFonts, a new font-making website that is free. An added bonus is that it does a much better job of creating a font than the other service did, with a much fuller range of characters and proper spline-based outlines.

If you are using a browser that supports @font-face (Safari or Firefox betas) then you are looking at the result – I think it is an improvement, if not a great leap forward for typography.

If you are planning to use YourFonts, or a similar service I have some hints.

The main problem with the old font was that it looked very spindly and weak on-screen. This was particularly noticeable on Windows, where the font renderer tries to line everything up on pixel boundaries. I had filled in the original handwriting sample sheet with a thin pen, to avoid making the same mistake again I purposely made very bold characters on the YourFonts template.

Next I scanned in the sample sheets at the highest DPI my scanner could handle. This produced images with two problems, they were slightly fuzzy and much too big to upload. Nothing that couldn’t be fixed in an image editor.

I used The GIMP to increase the contrast of the image to maximum, this increased the differences between the light areas and my writing with the additional effect that any smudges or marks on the original scan faded into the background. Next I resized the image down to the maximum width that can be uploaded (4000 pixels).

Then I used the Select By Color tool with a threshold of 14 to select all of the dark pixels in the image, including those that weren’t totally black. I still wasn’t convinced that my characters were thick enough so I used Select->Grow menu item to increase the width of the selection by 2 pixels. Then I filled the selection with solid black.

I converted the image to greyscale and saved it in PNG format. The resulting file was very small and uploading went smoothly.

The font I got back was very nice, but still lacked certain something. Using FontForge, I corrected a few characters I thought looked off. This is a real pain in the neck, so I only did the really bad ones.

YourFonts generates fonts that lack a kerning table that controls how characters next to each other look. Fonts look much better with proper kerning, if you do nothing else consider doing what I did and use FontForge’s auto-kern feature. It makes a pretty good stab at placing characters and really makes a difference to the overall look of text written in your font.

I am very happy with the result, it looks a lot better on-screen than my previous effort in both Windows and MacOSX.