Does a bit of everything, badly
I was looking at the excellent Chris’s Acorns site the other day, when I found another archetypal use of Christine Lord’s Oxford typeface on a BBC Micro peripheral:
This is precisely the sort of application for the Oxford face I remember seeing all over the place as a child. Whatever would the UK electronics industry have done without it?
If you’ve had a good look at my blog you’ll know that, though the medium may vary, it’s essentially all about me copying something that someone else has done. Badly.
This is all very well in as much as it serves to keep a useless eater off of the streets of Kiskunhalas. However sometimes, to my acute embarrassment, the original creator of something I’ve been butchering gets in touch with me.
This first happened to me over ten years ago when Terry Griffiths, the designer of the London Weekend Television “river” ident sent me a very nice e-mail about the rather dodgy Flash Files I had created based on his work. They are still on Andrew Wiseman’s 625 Television Room site. I later ended up animating Terry’s idents in 16:9 for London Weekend Television’s last day.
The most recent example was last week when Christine Lord, original designer of the Letraset Oxford typeface got in touch with me after reading this blog.
I was thrilled to hear from Christine for several reasons – first and foremost because she’s a lovely person, who was kind enough to send me some lovely goodies with her e-mail.
Then there’s the fact that I’ve never been in touch with a type designer before, let alone someone who had designed such an iconic part of my childhood.
And finally my blog allowed Christine to get Profonts‘ Sportowy font renamed as OXFORD PF and to get herself a well deserved credit as the typeface’s original designer.
Thanks to Christine I can fill in a little more of the background behind the Oxford typeface. The face was designed in 1969 when Christine was 21 as a special project to create a corporate identity for the new Oxford Polytechnic. The face was originally called Lord Lower Case Linked, but was later renamed Oxford when picked up by Face Photosetting. It was then made available as dry transfer lettering by Letraset.
I’ve also come across another example of Oxford being used, this time on the excellent TV-Ark website. It was used for Sheffield Cablevision, a short lived but very popular Yorkshire cable station. It’s worth taking a look at the link as the station featured a presenter with a truly splendid comb-over.
If you are daft enough to want to get my version of Oxford, which I called “Scene”, it’s available for download here. Windows users will need to download the excellent (and free) 7zip utility in order to unzip the tar.gz file.
My version of Oxford features an upper case but, mercifully, I don’t think Christine has seen that yet!
Whilst browsing dafont.com the other day, I noticed that (yet) another version of the classic Letraset Oxford typeface has been created, and this time it’s another free (as in freedom) version.
The font is named Oxford-CP and was created by Diogene. It’s licensed under the GPL with the font exception rather than the SIL OFL which I used to license my version.
The non-free version of Oxford, called Sportowy, which boasts some beautiful glyphs for things like @, is available here.
My version, which I called “Scene” in honour of the BBCtv schools programme that used the face for its logo, also features capital letters and Central European accenting and is available to download from here.
Ironically, after the huge amount of effort I put into creating it (see here, here and here), I still haven’t actually done anything with my Scene font – but hopefully I’ll get around to doing something with it soon.
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.
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:
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.
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:
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.
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.
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.
By aligning them on top of each other and using the Path Subtract feature I would end up with a nice shape.
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.
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 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!
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.
So, eventually, I had a nice set of glyphs in Inkscape all ready to import into FontForge.
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%.
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.
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.
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.
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:
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.
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.