The Oxford Node Show

There was one typeface that I remembered as a child that kept popping up in the same sort of places. It seemed to have a particular attraction for the education sector. It was beloved of polytechnics, tiny companies selling electronic bits and bobs to school science labs or programmes for schools and colleges. Perhaps its most famous use was on the BBC's Scene, adorning some cardboard cut-outs of cows.

Fay Weldon, Willy Russell and Tom Stoppard

Much later, thanks to the excellent Sanskrit Web, I downloaded a Letraset catalogue from the 1970s and saw that the font was called Oxford. For the next couple of years I began frantically searching for the typeface, from both commercial sellers and free font sites and kept drawing a blank. It didn't seem to be available in any kind of digital format.

However, I did find this picture amongst the wealth of goodies here:

Keep drawing lines until you get something like this. Then stop.

When it came to the open and close quotation marks, I was very lucky that I also managed to find the picture below on the Google Images, which showed me how they would have been used.

Groovy!

In a moment of madness, I decided it might be a nice exercise to try and draw the font myself using my old friends Inkscape and FontForge 2.0.

The first thing I decided to do was base my drawings on the large, clear 96pt letter 'a' at the top right of the scan. The letter a was 96pt which, on a 90dpi display, is 120 pixels. So I decided to draw my characters at 120 pixels high in Inkscape as I thought that would mean I would have a good chance that if I did the various elements of the font would sit on nice round numbers.

So I created two horizontal guides, 120 pixels apart, then scaled the scan of the font so that the letter a was also 120 pixels tall. Now I could work out the width of the letter a, which turned out to be 102 pixels. So I added two vertical guides at 102 pixels apart.

The most important line in the typeface was the line that threads all the letters together, and I could see this was centred at 40 pixels up, so that was another guide. The final guide I wanted to add was the top of the innermost letter, and that was at 108 pixels up. So with all my guides in place on top of my scan, I had an image that looked like this:

Eh?

Now I needed to work out the width of the stripes that composed the letter. After experimenting a bit, I found that the outer "thick" stripe was 5 pixels, and other stripes were 3.5 pixels. The latter value would cause me no-end of problems later when I came to import the font into FontForge 2.0.

The next job was to work out the position of the ascenders (of high letters like d) and descnders (like g) and add these as guides. I did this by moving the scan left and right and finding the best place for the guides. So now I ended up with a full set of guides.

Guides

Now I was ready to start drawing the letters (or glyphs). I first drew the bits and pieces that made up the most common inner glyph shapes, using a 3.5 point stroke.

Bits and bobs for making letters

For each glyph, I would use these bits to make up the innermost glyph shape. I would then stroke this shape by 7 points, convert the stroke into an outline. I would stroke this outline by 7 points, convert the resulting stroke into an outline. I would take this outline, stroke it by 10 points and convert this stroke into an outline.

I had to keep cleaning up the nodes in my outlines as I went. This is because Inkscape adds various unnecessary nodes when you convert a stroke into and outline. These have to be removed so that import to FontForge goes smoothly.

At the end of the process I would have four shapes.

Very y's.

By aligning them on top of each other and using the Path Subtract feature I would end up with a nice shape.

Two subtracts and four aligns later

For the numbers, I added some additional shapes to the set of outlines I used to construct glyphs. You'll notice most of the numbers were based on one or both of the two circles that made up the number 8.

The bits and bobs I used to make the numbers

I found the construction of the letters to be incredibly consistent - every single one of the glyphs was created by simply expanding the central shape with two exceptions - 5 and 8.

The bounders! The cheats!

The letter "j" presented an interesting kerning problem. The j shown in the scan of the Letraset original is fine if used in words like "ajax". But try ajjax!

J's fluid?

The only way to get around this is to give an extra piece of stripe in the "-" character and a long piece of stripe in the "=" character to allow you to "kern" the shape by hand.

I also had the problem of where to put the little caps for the end of the stripe that connects the glyphs together. In the end I settled on "{" and "}", but that may change.

With (left) or without (right) caps.

So, eventually, I had a nice set of glyphs in Inkscape all ready to import into FontForge.

Finished glyphs drawn in Inkscape

I exported each shape as an individual .svg file. I made the individual .svg files 1024 x 1024 pixels in size with the descender line at 200 pixels. This meant I had to scale each of my glyphs by 400%.

SVG files ready to import into FontForge

All I had to do was import these SVG files into FontForge. And this the bit where I nearly gave up. To start with all looked fine.

I always use a letter m on my font blog posts

However, tested how my glyphs looked in the FontForge Metrics window they looked absolutely terrible. All my nice neat Inkscape work looked as if I'd drawn it in crayon with my left foot. Fortunately I decided to create a test font using just the letter "a" to see what was going on. I got a load of errors spewing out of FontForge. In the past I've just ignored these but I decided that I perhaps should pay them some attention.

The main problem I had was that the position of all your points and control points for a font should really be on whole number boundaries. This is where my 3.5 point strokes bit me on the bum. However, FontForge can fix this for you automagically using it's Find Problems feature. All you need to do is check "Integral Co-ordinates" and it'll happily pull all your nodes into true for you.

The Find Problems dialogue is your bestest friend

Another problem I had was "Intersecting Paths". This is caused by Inkscape adding points that are on top of each other when you convert strokes to outlines. Again, FontForge can highlight the offending points for you if you check "Intersecting Paths" in the Find Problems Window. Often, selecting the offending points and using the Element Simplify feature was enough.

A common problem if you used Inkscape to draw glyphs

The only other problem I had was a rather nasty condition called "Missing Points at Extrema".  With a font, there needs to be a point (or node, as they are called in Inkscape) at the extreme left, right, top and bottom of a glyph. Normally they are there anyway simply because of the way your glyph is built, but diagonal lines with rounded ends often cause problems:

Click to enlarge

As you can see above, the shape on the left hand side does not have it's right hand extrema marked by a point. On the right the missing point has been added.

It is actually very easy to fix, as usually FontForge will do this for you, and once you know about it you design your glyphs with this requirement in mind.

After fixing all these problems, I could generate my font with no errors whatsoever - this is the first error free font I've ever created in FontForge and I'm rather proud of myself! And, better still, FontForge wasn't mangling up all my nice outlines any more - the glyphs looked just like they did in Inkscape.

Ta-dah!

I called the font "Scene" in honour of the cardboard cows. It's missing rather a lot of glyphs - which I will add gradually as and when I get the time and inclination. I particularly want to create a CE (Central European) version as I want to write some Hungarian words with double acutes.

The font is licensed under the SIL Open Font Licence. This is a new license for me, but apparently it is the most commonly used license for free software fontography. As an added bonus, FontForge 2.0 can actually apply the licence to your font for you.

The finished "Scene.ttf" TrueType font is available to download here. If you are using Windows you might not be able to unpack a tar.gz file. If so, there is an excellent free software utility called 7-zip that you can get here (thanks to Bernie for reminding me).

My "Scene.ttf" font is not the Letraset Oxford face - I would need better source material and a lot more time to do something approaching that. I'm sure eventually Letraset will get around to releasing the typeface as a TrueType or OpenType font themselves and do a much more professional job than I could in three days. But I am happy with what I've created and I hope you might find it useful too.