Posted on

Back to Oxford

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.

Christine Lord, pictured in 1969

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.

My version of Oxford in FontForge

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.

Another use of Oxford

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!

Posted on

(Yet) another version of Letraset Oxford

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.

BBC Micro game Pipeline used Oxford

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.

Posted on

What a waste of time…

This morning, I stumbled upon…

http://new.myfonts.com/fonts/profonts/sportowy/

Head -> Desk -> Head -> Desk -> Head -> Desk.

And it’s about fifty times better than the version I did.

Head -> Desk -> Head -> Desk -> Head -> Desk.

If I had known I wouldn’t have bothered.

Head -> Desk -> Head -> Desk -> Head -> Desk.

Look how elegant the sportowy @ sign is, and the sportowy circumflex and breve, and how they managed to get the inner stroke proportions correct as they had decent source material to work from…

Head -> Desk -> Head -> Desk -> Head -> Desk.

And overhead a rainbow appeared. In black and white.

Posted on

The Final Scene

I’ve finally finished my Scene.ttf font (which you can find out more about here and here). I added all the glyphs I think I’ll ever want to add to it – I’m sick of it now! Mind you I enjoyed delving into the strange world of macrons, ligatures, ogoneks, cedillas and breves. That is, I enjoyed it until I had to produce dozens and dozens of glyphs using the damn things!

As you can see from the FontForge font view window below, there are rather a lot. You can click on the picture to make it bigger.

Dave’s fuller house

After I added Hungarian characters, I also wanted to add Welsh and once I had added Welsh I thought I might as well add the lot. The font is in truetype format, but because of all the extra characters it now uses the Unicode BMP encoding.

I showed my Scene font to a friend of mind called John Livens. He is a retired printer (and also an excellent painter). He said:

OXFORD!!!! I remember it well. If you’ve ever tried to rub down a line of Letraset, especially an old sheet of Letraset, you’ll not forget Oxford…

Anyway, now you can use something approaching the old Letraset Oxford face in the comfort of your own home without having to worry about inking the gaps in broken lines with pen or running out of “e”‘s. The finished font is licensed under the SIL Open Font Licence 1.1 and can be downloaded from here.

Right, I’m off for a lie down…

Posted on

Making more of a Scene…

After producing Version v.0.001 of my Scene font (my version of the Letraset Oxford typeface) I found all the empty glyph spaces I was left with in the FontForge Font View window rather unsatisfying. It felt like the font was only half finished.

More free spaces than a Cheeky Girls gig

The trouble was that I’d created all the glyphs that had appeared in the original Letraset Oxford face, so if I wanted to add all of the missing glyphs I’d have design them myself – in particular, I’d need to design the whole of the upper case. Despite worrying what on earth I’d end up with, I fired up Inkscape and decided to have a go.

There were some letters such as B or D where I thought it was pretty clear what an upper case version would look like. The font as a whole reminded me of the plastic stencils I used to have as a child which contained what looked like German DIN rounded faces.

The first test I did was the upper case A. I used the same angle of slope as the lower case letter v in the original Letraset Oxford face and the same height as the lower case letter letter l. The only decision then was where to place the cross bar on the A, and though I did toy with making it an extension of the horizontal line that joins up the letters in the end I decided to put it higher up, where I thought it looked best.

Eh?

However, when I came to the D and B I found it far more problematic to get them looking right. The lower-case letters look like a condensed face and are quite rectangular, so one problem I faced was to get the right width to height ratio. It took several attempts to get the D correct.

I could do with a D…

Once I’d sorted out the D, the B was even worse. The main feature of the Oxford face is the line that threads all the letter and number glyphs together. The lower case letters were designed to keep the area around the horizontal threading line as clear as possible, and therefore my first thought was to make the line that bisects the B as high as possible. However, this ruined the readability that is such an important part of the font, and also made it look rather 1930s instead of 1960s/70s.

To B or not to B?

You’ll notice in the B and D examples above that I also had to make all the right angles rounded in order to make the face look consistent.

The next problem was the letter E. There were two considerations here. First, there was the fact that the lower case e in the original Letraset Oxford face was one of the most distinctive features of the face, and I wanted the upper case E to be distinctive as well. The second problem was that pesky threading horizontal line.

The bottom bar of the capital E was going to interfere with this, and I really didn’t want that to happen on such a commonly used letter. I decided I needed some kind of rounded E, but I had a four attempts before I settled on my third design.

E’s are good. Well, one of them is.

An identical problem was presented by the letters L and Z. In the original Letraset face they just ignored the problem and let the bottom of the lower case z and the threading line clash with each other. So for the upper case Z I just did that too. For the L I did experiment with having a rounded bottom, but it looked dreadful and therefore created another clashing horizontal monstrosity.

L no! L yes!

One of the most distinctive features of the original Letraset Oxford font was the rounded bottom on the lower case letter w. I like a nice rounded bottom, so I decided to keep that feature in the upper case letter W.

Nice rounded bottoms

If you tried version v.0.002 of scene.ttf you’ll know that the face is proportionally spaced, but it is not kerned. That means that the spacing can appear odd with certain letter combinations. This is unavoidable, as most font renderers make a rather horrible effect on the threading horizontal stripe if you try to kern letter pairs closer together.

An ugly Kern. And I don’t mean András.

The spacings on the lower case are the same as on the dry transfer lettering version of the Letraset Oxford face. The spacings on the upper case are my best attempt at being as useful as possible, but in some circumstances the kerning won’t look right. However, this is easy to fix if you using the font in a tool such as Inkscape.

Another distinctive feature of the Letraset Oxford typeface is that the numeric glyphs are not full height, but are the same height as the lower case letters. This meant that I made all the symbols that are used mainly in connection with the number glyphs look best when used with the rather small numbers. This includes the vulgar fractions, the currency symbols, the degree sign, the multiply and divide signs and the ordinal indicators. This means they may not look very good when used with upper case letters, but I hope what I’ve done is the best compromise.

Hopefully you’ll appreciate what I did with the plus, minus and equals symbol. They can either be used “threaded” with no gaps between them and digits, or they can be used with “capped” ends so that they can be used with spaces. The example below shows both, and the sequence of letters needed to create each string.

Johnny Ball stuff

The @ or “at” character was a tricky one to design. I thought that the main usage of it these days would be to create e-mail addresses, so I designed it to look best in email addresses made up of lower case characters. This means it doesn’t look very nice in strings of upper case letters. However it does look fine when used with digits, which is the other place you would expect it to be used.

Where it’s at

When I came to create accented versions of my newly designed upper case glyphs I got a rather nasty surprise. With acute or grave accents my characters are too high. In TrueType or Postscript fonts glyphs should not normally appear above the 819 pixel mark. In the picture below the top horizontal rule is at 819 pixels – and my acute accent goes over this by quite some margin! This was caused by my inexperience and next time I create a typeface I’ll ensure that the accented characters are a legal height.

Oh, too high…

Creating accented versions in FontForge is very easy, as you can copy references to characters and accents so that you only need to describe each part of a glyph once. The capital O with an acute accent is made up of a reference to the O character and a reference to the acute accent which means that if I want to change either the O or the acute accent they will automagically be changed everywhere else too. Of course, as another bonus this also saves space too.

A glyph that I’m not very happy with and am still thinking about is the capital letter Ash. The letter Ash is the letter A joined to the letter E to make Æ. I particularly wanted the letter Ash to look nice because my favourite band is called Mæstoso. However, The problem I faced was joining my rounded capital E to a non-rounded A – the end result is a bit too narrow for my taste.

Gone Ash tray –  (the letter, not the material)

The finished v.0.002 of my Scene.ttf font contains all of the glyphs in the Latin1 (ISO8859-1) character set.

Dave’s Full House

As I have said before, I want to add Hungarian characters with double acute accents and also a Euro symbol to the Scene face. To do whis I need to add the glyphs in the Latin0 (ISO/IEC 8859-15) and Latin2 (ISO8859-2) character sets. I plan to do that in v.0.003 as and when I get the time and write another blog post when that version is ready.

Meanwhile, version v.0.002 is licensed under the SIL Open Font Licence 1.1 and can be downloaded from here.

Posted on

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.