Scripted font generation using fontforge

This is my first attempt at making fonts using scripts... Well, apart from a digits only font, it is my first attempt to make any font! It seemed like a good use of a Sunday afternoon :-)

The plan was to make some fonts based on classic 5x9 dot matrix characters. Not a huge challenge you may think - but I did not want to spend ages positioning dots in a graphical user interface. So I ended up making some C code, that produces SVG for each character and then Python script to use fontforge to make a font from the SVG.

My 5x9 characters are defined in the C code using hex.

   {"A", {{0x20, 0x50, 0x88, 0x88, 0xF8, 0x88, 0x88}}},

That defines the capital A to look like :-

My C code makes an SVG that looks like :-

<?xml version="1.0" encoding="UTF-8">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="816" height="1024">

   <g>

      <circle cx="255" cy="51" r="40"/>

      <circle cx="153" cy="153" r="40"/>

      <circle cx="357" cy="153" r="40"/>

      <circle cx="51" cy="255" r="40"/>

      <circle cx="459" cy="255" r="40"/>

      <circle cx="51" cy="357" r="40"/>

      <circle cx="459" cy="357" r="40"/>

      <circle cx="51" cy="459" r="40"/>

      <circle cx="153" cy="459" r="40"/>

      <circle cx="255" cy="459" r="40"/>

      <circle cx="357" cy="459" r="40"/>

      <circle cx="459" cy="459" r="40"/>

      <circle cx="51" cy="561" r="40"/>

      <circle cx="459" cy="561" r="40"/>

      <circle cx="51" cy="663" r="40"/>

      <circle cx="459" cy="663" r="40"/>

   </g>

</svg>

Which, as you can see was simple enough.

I also make a Python script (from the C code) along the lines of :-

#!/usr/bin/python

import psMat

import fontforge

f=fontforge.font()

f.version="1.0"

f.encoding="unicodeFull"

f.copyright="Adrian Kennard"

f.weight="Regular"

f.familyname="FiveByNineLED"

f.fontname="FiveByNineLED-Regular"

f.fullname="FiveByNineLED Regular"

f.em=1024

f.ascent=714

f.descent=310

Which has for that letters :-

g=f.createMappedChar("u0041")

g.width=612

g.importOutlines("u0041.svg")

g.removeOverlap()

g.simplify()

g.autoHint()

And finally saves :-

f.generate("FiveByNineLED-Regular.ttf")

Simple enough :-)

As you might guess, I was not going to just make a font as simple as that. For a start it was sensible to make some different weights and an italic variant.

For different weights, I just changed the size of the dots :-

For italic I simply adjusted the position of the dots, and told the font it was italic. I picked 10 degrees.

But that was not all. A simple dotty font looked nice but I felt I could do me. You will note I called this "LED" on the basis that it looks like a simple array of round LEDs as seen on railway stations and many such signs.

But what of LCD. For this I made squares.

For bold I actually made the squares touch, and the overlap removal in fontforge creates an outline of the joined up squares.

However, to make an italic version I could not simply move the positions as I did for the LED version as that creates a staggered row of squares. Instead I had to skew the whole glyph.

My first thought was to simply put an transform="skew(-10)" in the SVG. That worked, but there are limits to what the SVG import will do on fontforge it seems. Combinations of translations on individual components and a group object with a skew did not quite work as expected. I had to make the SVG very simple. Later, with some overlapping rectangles I actually managed to not just make errors from fontforge but segfault it! So I ended up doing the skew in the python!

g.transform(psMat.skew(0.174528))

That seemed to work well for this...

But I could do more... What about the way these fonts looked on an old fashioned CRT? So I made a CRT version which joined the dots horizontally with rectangles.

But there's more. This is something I did in something like 1981 when making a printer driver for a spark jet printer that could screen print BBC Micro MODE7 but not look like crap. Back then I created 45 degree lines joining octagonal dots. This works well for most letters.

But some needed help, notably where a diagonal joins a horizontal or vertical line, I would create a right angle not a diagonal. The fix was making a second "layer" of the bit map. For LED and LCD and CRT this did not matter, a dot was a dot, but for this JTD (Join The Dots) mode, it was needed to allow for things like the diagonal of an R to work...

This was another case which was a challenge. I originally planned on using an SVG path to join the dots, but that did not work. The import messed up the translations somehow, and then the overlap removal in fontforge just did not work. By simply creating a rectangle to join each circle, that worked, even the 45 degree ones, until I tried to apply a skew at the SVG level and that got very upset. A skew applied at the phython stage worked. Oddly the 45 degree ones are still making warnings but creating clean glyphs, so close enough.

Creating a simple ASCII character set was not hard. But these days we need a bit more, and so I went through the extended latin and did a lot of them (that I could sensibly work in a 5x9 matrix). I am sure there are more I can add. Thanks to Ray for pointing me to the SAA5050 data sheet with additional characters. So far over 400 characters, and more may be added over time.

The accents all look a lot better in the join-the-dots version as I could make the joins allow for the accents and not stick the accent to the letter in an odd way...

P.S. In honour of a previous blog post...



P.P.S. the "TXT" version is an attempt to mimic the Mullard SAA5050 character rounding logic.

So this is the result (may be updated from time to time if I add more characters) :-

FiveByNineCRT-BoldItalic.ttf
FiveByNineCRT-Bold.ttf
FiveByNineCRT-LightItalic.ttf
FiveByNineCRT-Light.ttf
FiveByNineCRT-RegularItalic.ttf
FiveByNineCRT-Regular.ttf
FiveByNineJTD-BoldItalic.ttf
FiveByNineJTD-Bold.ttf
FiveByNineJTD-LightItalic.ttf
FiveByNineJTD-Light.ttf
FiveByNineJTD-RegularItalic.ttf
FiveByNineJTD-Regular.ttf
FiveByNineLCD-BoldItalic.ttf
FiveByNineLCD-Bold.ttf
FiveByNineLCD-LightItalic.ttf
FiveByNineLCD-Light.ttf
FiveByNineLCD-RegularItalic.ttf
FiveByNineLCD-Regular.ttf
FiveByNineLED-BoldItalic.ttf
FiveByNineLED-Bold.ttf
FiveByNineLED-LightItalic.ttf
FiveByNineLED-Light.ttf
FiveByNineLED-RegularItalic.ttf
FiveByNineLED-Regular.ttf
FiveByNineTXT-BoldItalic.ttf
FiveByNineTXT-Bold.ttf
FiveByNineTXT-LightItalic.ttf
FiveByNineTXT-Light.ttf
FiveByNineTXT-RegularItalic.ttf
FiveByNineTXT-Regular.ttf