Does a bit of everything, badly
I’ve kerned A–Z, a–z and 0–9 of the Washington typeface so that it’s useful for most English language applications. Version 2 of the typeface is available to download here. The version 2 package includes the FontForge source file, along with a PDF showing the available glyphs. Windows users will probably need to download the 7-zip utility in order to decompress the archive file.
For a child born in 1971 and growing up in 70s Britain, probably the most magical place in Britain would have been BBC Television Centre. And, thanks to Blue Peter, it was a building that I was pretty familiar with. After all, Peter Purves had shown me countless times that the building was ‘like a huge doughnut, with studios around the outside, offices inside the centre ring and a fountain in the middle’.
One of the most distinctive features of the building was its signage. The same typeface was used on everything from cameras to warning lights to the front gate.
The typeface employed was a very common sight when I was five years old. It was used all over Chard Post Office, on signs made by SWEB (the South Western Electricity Board), and even for signs on the changing room doors at Maiden Beech School in Crewkerne. But, as I grew up, this signage was slowly replaced by signs using more modern faces. By the early 80s BBC Television Centre was just about the only place where it could be seen.
I’d always wondered what the typeface was. The first clue was when I bought the book Encyclopedia of Typefaces by W.P. Jaspert et. al. The book contained a small scan of the face labelled as ‘Doric Italic’. This led me to search on font websites under the ‘Ds’ until I found a typeface that was called ‘AT Derek Italic’. This was close. In fact, it was very close. But it wasn’t right.
For instance, in order to recreate the 1960s caption below, I had to alter the AT Derek lettering extensively:
The face used came up in conversation at The Mausoleum Club. The Mausoleum Club is a web forum for people who want to talk about proper television rather than other the kind that we get these days.
By a stroke of good fortune, BBC Graphic Designer Bob Richardson was present and he told me for the first time definitively the name of the font. It was called Washington. I then spent a couple of days plucking up courage to ask Bob if he would be kind enough to send me a scan of the font so that I could recreate a digital version.
Bob was very, very kind and also keen to see a version of the font in truetype form – I received a scan of Washington the next day. The scan he sent was taken from his copy of the BBC Graphic Design Print Room specimen sheets. The book contains all of the metal typefaces that were available to graphic designers (or ‘commercial artists’ as they were initially known) from the early 1950s until circa 1980.
Bob told me that the BBC had actually recreated Washington in a format suitable for a caption generator for ‘The Lime Grove Story’ (a 1991 documentary to commemorate the closing of the BBC’s Lime Grove studios) but the BBC didn’t have a version of the font in truetype form.
So, now I had a scan I needed to recreate the font. The plan was, as usual, to trace each character or ‘glyph’ in Inkscape…
…then import the glyphs I had traced into FontForge…
…and use FontForge to generate the final typeface.
This is exactly the same way as I had recreated the Central Television corporate font, Anchor and Oxford. Only this time I had the best source material possible.
As I’ve talked about recreating fonts extensively in the past I’ll just talk about a couple of things that were either new or different in this case.
The first thing of interest was that the font was a real, live metal type and it wasn’t as ‘regular’ as I had come to expect from digital faces. The width of the vertical stroke in the ‘P’ would be quite different in width to the vertical stroke in the ‘R’ which would both differ in width of the vertical stroke in the ‘D’.
It was this kind of irregularity that really gave the font its charm and sold it as an old metal typeface. Therefore I was determined to keep that as much as possible and not to try and make the font too regular and clinical by ‘fixing’ all these quirks.
The second thing I needed to know was when to ignore curves. Letters such as the capital R would have curves at the corners where you would expect them to come to a point. I did toy with the idea of leaving these curves in place but that looked dreadful at large sizes so that was one thing I did end up ‘fixing’.
There were a number of glyphs I had to create myself, as they didn’t exist when Washington was created or were not a part of the original face. For instance the Greek letter mu is a combination of the letters p, q and u:
I also added things like Euro and Rupee currency symbols, copyright and trademark symbols and so on.
One thing I did this time, which I should have done before, was get FontForge to create all the accented glyphs for me. In other words, instead of creating separate Inkscape files for each accented character and importing them into FontForge, I simply created each accent as a glyph and got FontForge to automatically create all the accented characters for me. This saved me a huge amount of time.
It’s important for me to have a decent coverage of the Latin alphabet as I know first hand how frustrating Hungarians find it to have to use a tilde or diaeresis instead of their double acute. I also like to make sure that the Welsh language can be used with any typeface I create.
FontForge created the accented glyphs almost perfectly and out of a few hundred glyphs I only needed to adjust half a dozen by hand. I found this pretty amazing.
Buoyed with my success at automatic accented glyph creation I thought I’d try some automatic kerning. Kerning is the adjustment of the spaces between letters. For instance the distance between the letters ‘T’ and ‘o’ in ‘To’ is quite different to the distance between the letters ‘T’ and ‘h’ in ‘The’.
Good kerning makes all the difference to the appearance of a typeface. Here’s the word ‘colour’ unkerned…
…and here it is kerned.
For all my other fonts I had sat down and kerned every possible letter combination by hand. The results are excellent but it also involves a large amount of wasted effort. The reason is that many letters (e.g. c, o and e) kern exactly the same as each other. FontForge not only allows you to put these letters into ‘classes’ to kern as a group, but it will also detect these ‘classes’ for you and attempt to kern them all into the bargain.
I tried using this feature for the first time with Washington, and it worked pretty well for most letter combinations. However I do need to tweak this kerning by hand to ensure that all possible combinations of letters look good. Until this is done the font is only really useful for desktop publishing or vector art where you can alter the kerning of each letter combination by hand.
This task will take two or three days to do and it’s not something I want to do now, as it is really a job you need to come to fresh. So in about a month or so I’ll kern the font and release version 1.1 – I’ll post here when the hand kerned version is available.
So when the font is exported, how does it fair? Well, here’s an example I put together which compares Washington to AT Derek:
As you can see, AT Derek may be more elegant but Washington is definitely more ‘BBC’!
The Washington Book typeface is released under the SIL Open Font licence.
All the software I used to create the typeface was free software, including the operating system – Fedora.
You can download the latest version of the Washington font from here. Windows owners will need 7-zip to uncompress the archive. The font is free – the only thing I ask is that if you find it useful please drop me a line or add a comment below as I’d love to hear from you.
Twelve years ago, when the internet was all shiny and new and I hadn’t even heard of GNU/Linux, one of my favourite websites was the Microsoft typography website. One of the things I remember reading about on the site was a tool called WEFT (Web Embedding Fonts Tool). WEFT allowed you to embed fonts on your websites. This meant they were not restricted to using the fonts someone had installed on their computer, but could use any font you wanted. As someone who suffers from projectile vomiting at the merest glance of Comic Sans I immediately put trying out WEFT on my to-do list. And then forgot all about it.
Over a decade later I was reading the press release for Mozilla Firefox 3.6 and noticed that font embedding was about to re-enter the limelight. Mozilla Firefox 3.6 includes a support for a very similar system to WEFT for embedding fonts on web pages. It’s called WOFF. So, being as curious and nosey as ever I thought I would investigate using WOFF.
But where to start? It turned out that from deciding to create a web-page using WOFF to the finished article took me the best part of a day of messing around, browsing, compiling tarballs and experimenting.
I decided I’d create a very simple web-page using one of my own fonts, Anchor. This is because there are a number of irritating legal issues around font embedding for web pages. In order to be able to embed a font on a website you have to have a licence to do this. The issues are explained very well in this article by Armand Niculescu.
Once I’d decided on a font, the next job was to create a WOFF file from Anchor. There are many reasons that you would want to use a WOFF file for font embedding rather than have your web-page link to your original font file. For instance a WOFF file is compressed, which saves download time. In addition, a WOFF file can contain only a subset of the characters or glyphs in a font that you actually use on your site which again can save a lot of download time on a site that uses several fonts.
Sadly, the simplest way to do this on GNU/Linux was download a windows binary file (an .exe file) and run it via WINE. WINE is a compatibility layer that allows you to run binary files intended for use on Microsoft Windows on GNU/Linux.
The tool I needed to run to convert font files to WOFF files is called sfnt2woff and I found some very good instructions on how to run and use this tool on Federico Moretti’s blog. After creating my WOFF file, I could then incorporate it into a web page using the CSS @font-face declaration. All seemed to work well in Firefox 3.6 when I tested the resulting .html file from my local drive.
However, when I was looking at Armand’s Niculescu’s blog entry again I realised that was not enough to ensure compatibility with most browsers. However, if I included a few more formats alongside my WOFF file, I could get the embedded fonts on my page working for 92% of browsers – which sounded good to me.
In order to make my web page work on the majority of web browsers I would also need to add a @font-face declaration that linked to a copy of my original TrueType font (.ttf) file for older versions of Firefox and the Opera, Safari and Chrome browsers.
In addition, to be on the safe side, I really needed to include an SVG font version of the font for use with the Safari and Chrome browsers. Creating an SVG version was simplicity itself. As I created the most recent version of the Anchor font in the free software tool FontForge, all I needed to do was use FontForge to export an .svg version of the Anchor font.
SVG font created sucessfully there was one more format I needed to create – a Microsoft EOT file. An EOT file does exactly the same job as a WOFF file on Microsoft browsers. As WOFF is only going to be supported in Microsoft Internet Explorer 9 and later, for a site to work on Microsoft Internet Explorer 4-8 I’d need to create a EOT file.
My initial thought for creating a EOT file was to download WEFT from the Microsoft website and use that via WINE. However this failed miserably. But, as a consolation, I found that even Windows users found Microsoft’s WEFT tool elderly, unintuitive and almost impossible to use.
Fortunately I found another tool on the internet – it was called ttf2eot and it claimed to do exactly what its name suggests. The bad news (simply because I’m lazy) was that the tool was a piece of C++ source code. That meant I had to download the build-essentials package and compile a binary myself. It took all of two minutes – such hardship!
Anyway, the file compiled beautifully and the tool worked first time. One line in the terminal (the tool needs the angle brackets around the source font filename):
./ttf2eot
Was enough to create an eot file. The only thing that I found rather odd was my finished EOT file was bigger than the original TrueType font file!
So, I added all the formats into my @font-face declaration, tested the file locally and it worked. So triumphantly I uploaded my finished html file, along with my ttf, svg, woff and eot to my webspace using gFTP. And it failed miserably.
@font-face {
font-family: ‘Anchor’;
src: url(‘Anchor.eot’);
src: url(“Anchor.woff”) format(“woff”),
src: url(“Anchor.ttf”) format(“truetype”),
src: url(“Anchor.svg#anchor”) format(“svg”);
}
I couldn’t understand why it failed – I thought I’d done everything correctly. But fortunately I had come across an excellent article by Paul Irish that explained exactly where I was going wrong. There are a whole host of gotchas with font embedding, and the order of statements in the CSS declaration is critical:
@font-face {
font-family: ‘Anchor’;
src: url(‘Anchor.eot’);
src: local(‘☺’),
url(“Anchor.woff”) format(“woff”),
url(“Anchor.ttf”) format(“truetype”),
url(“Anchor.svg#anchor”) format(“svg”);
}
Was the only order that would get the @font-face statement to behave.
And then… And then… …I found out that I needn’t of bothered. A website called Font Squirrel has a nice tool that does everything for you plus more. In particular, it creates subsets of fonts for you so you can cut down on your file sizes and download times. You just need to specify the glyphs (characters) in your .ttf, .eot, .woff and .svg files that you actually use.
Font Squirrel also have loads of fonts that you can legally embed, and are hand-picked to ensure they are all good quality type faces.
Another good source of information is Milton Bayer’s site, which explains about the CSS and XHTML needed to get WOFF working for those that may be unfamiliar with it.
Anyway, it was fun and I learnt a lot. The end result can be seen for real in the comfort of your own browser here:
http://www.kecskebak.co.uk/woff.html
I’ve designed a handful of fonts that can all be freely embedded in your websites. You can get hold of them from here.
Kaleidoscope is a non-profit making organisation that researches vintage British television. Their publications are essential reading for anyone seriously interested in British television history. It also holds regular fund-raising events for the RNLI, where rare archive gems are screened and auctions of memorabilia are held.
I’ve done various graphic items for Kaleidoscope events in the past thanks to my friendship with the multi-talented Rory Clark. Rory recovers many of the domestic videotape recordings that Kaleidoscope discovers, and also compiles the videos and documentaries that are shown at their fund-raising events.
The last Kaleidoscope event was held jointly with the British Film Institute at NFT1 at the BFI Southbank, London on January 9th. Part of the event was a showcase of recently recovered programmes from the ill-fated BSB (British Satellite Broadcasting) service. Two of the main programme providers for BSB were Noel Gay TV and John Gau Productions. Sadly, nearly all of their programmes for BSB were junked. However Kaleidoscope has been busy helping track down domestic video recordings of lost BSB programmes to return them to the archives.
Rory asked if I would like to contribute some graphics to help him out with the BSB segment, and I was delighted to be asked. The corporate look for BSB was designed by Martin Lambie-Nairn, and I think it was very nice indeed.
One of the key parts of the BSB corporate identity was a specially designed typeface. My first impression was that it looked similar to Albertus and Friz Quadrata. On looking at printed examples of the face, I decided it was an adaptation of the typeface Friz Quadrata, but I could not find a perfect match for in digital form. Therefore I decided it might be nice to make one.
To do this, I thought I’d go my usual route: I’d create glyphs in SVG format in the free software vector graphics package Inkscape, then I’d import my glyphs into the free software font design program FontForge 2.0 to create a truetype font file.
The first thing I did was think up a name – Squarial, which is a pun on the name of the Arial typeface and also the name of the distinctive square dish that you needed to receive BSB programmes.
The easy part being done, I then set to work. The first letter I looked at was the letter B. There were various differences I could see between this B and the B in Friz Quadrata. It was lighter, it had no flared serif at the base, the top loop was larger and there was an angled cut between the main vertical stem and the halfway line of the B.
The next letter I wanted to look at was the R, as this was another key letter to get right. As you can see, it is almost Agfa Rotis Semi Serif in appearance.
The other two letters I wanted to do were the S and the G. Once I’d got these right, I could use them as the basis for the rest of the alphabet.
I had to guess how some of the upper case glyphs would look, as I had no printed example, so I used the shapes found in Friz Quadrata as a base and modified them to match the letters I did have.
I’ve included some of my “guesses” above – hopefully they make some kind of coherent face when used with the other glyphs. Incidentally, I drew all the vector shapes in Squarial from scratch in Inkscape – the vector information in the truetype versions of Friz Quadrata I had was too messy and irregular to be of any use.
Due to the contraints of time, I didn’t want to create lower case glyphs for the Squarial face, but I did want to add a small range of punctuation and some numerals so that Rory could use the finished font to caption the various clips that would be shown at the Kaleidoscope event.
One thing I thought would be nice would be to include Squarial-style squares as the points in the punctation. You can see some examples below.
Once the punctation was done I had a set of individual glyph .svg files all ready to import into FontForge.
The glyphs imported into FontForge with no problems at all. One of the things that saved me a lot of time when designing this font was keeping all of my Bézier control points on integer co-ordinates in Inkscape. I am now also much better at knowing where to put the control points so that FontForge will not need to add additional ones.
And, after spending some hours kerning glyph pairs, I had a finished truetype font.
The finished font, Squarial, is licensed under the SIL Open Font Licence (OFL) 1.1 and is available to download from here. Microsoft Windows users may need to use the free software tool 7-Zip to unpack the .tar.gz file.
The music accompanying the Kaleidoscope ident in this post is an excerpt from “The Iceman Cometh” from the album Grim by Maestoso. You can get hold of a copy on the Maestoso compilation “Uneasy Listening” which is available here.
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.
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…
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The finished v.0.002 of my Scene.ttf font contains all of the glyphs in the Latin1 (ISO8859-1) character set.
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.
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.
My friend Rory Clark does an awful lot of work for the classic TV organisation Kaleidoscope. One of the many things he does for Kaleidoscope is produce documentary films for their events. Their most recent event, “Bob’s Full House”, was held in The David Lean Room at BAFTA in London on the 24th October 2009. The event was to feature, amongst many other things, three specially made documentary films about Bob Monkhouse and I ended up helping out Rory a little by contributing some bits and pieces to two of them.
The first documentary Rory asked me to contribute to was “A Shower Of Shot” – a half hour history of the popular ATV Sunday afternoon game show “The Golden Shot“. The Golden Shot is one of my earliest television memories, so it was something I was delighted to contribute to.
Initially Rory asked me to just create him an opening caption in “one of the Golden Shot typefaces”. There were four to choose from. The original Golden Shot title sequences used the one of the “grots” or Grotesque fonts.
The colour era heralded something much more exciting – a wonderful “disco” engraved font complete with coloured targets.
The Charlie Williams era was heralded by the strange arts and crafts Arnold Boecklin font. The typeface was as out of place as Williams, so it all made some kind of sense.
Then we get to the transatlantic schmaltzy Stephanie De Sykes and Rain era, with the rather transatlantic schmaltzy looking “Flamenco” face.
There was really no contest as to which font I wanted to use but there was one small problem – I couldn’t get hold of the “disco” font for love nor money. I then recalled the advice of a friend, the great Southern/TVS graphic designer Alan Scragg: “I design fonts for clients as a matter of course as part of a design.” So I thought I’d try and do a Scraggie and do the same thing.
My plan was to draw the letter shapes in Inkscape for import into Fontforge on Ubuntu GNU/Linux. I was a bit nervous about this font as the nature of the typeface meant that I would be drawing many, many more outlines than I would be drawing for a normal face.
I thought the most sensible place to start was with the lower-case letter “l”. I took a screen grab of the end caption from a DVD of the program that Rory sent me. I imported this into the bottom layer in Inkscape so that I could trace over it. I then corrected the geometry of the grab so that the horizontals and verticals of the screen grab were properly straight. Next I cheated a bit – I played with the scale of the screen grab so that the white elements of the letter “l” sat on pixel boundaries. This would make my job in creating the letters much easier. Once I had done this I added some horizontal guides and turned on snapping to guides.
From the letter l, I could see that the letters all followed a consistent pattern. An inner letter, which is 3 pixels thick, two pixel gap, three pixel thick shape, two pixel gap, three pixel shape, three pixel gap, three pixel shape, three pixel gap, three pixel shape, eight pixel gap, five pixel thick shape.
Just to check, I then did the lower case “o”, which was easy as it was made out of concentric circles. This worked perfectly so I knew I was on the right lines, so to speak.
My problem was this – creating concentric circles and rectangles was easy. However, how would I create concentric “g” or “f” shapes? Inkscape does have an “Outset” command, that would seem to solve this problem. You give it a shape and it creates an expanded version. However, it gives you no control over how much it expands the shape by. This was no good to me – I needed my shapes expanded by exact amounts.
In the end I resorted to using stroking. In other words, I’d draw the inner shape. Then stroke the inner shape with a two pixel thick stroke. I’d then convert that stroke to a shape and stroke that with a three pixel thick stroke and so on. It was repetitive and slow, but it worked a treat. If any Inkscape gurus can tell me a better way to do this I’d be grateful as there’s another engraved font I want to create soon!
After I had stroked a shape and converted the stroke to a fill, I had to remove a large number of extra, unneeded points created by the stroke/convert lines to fill process before I stroked the shape again. This was particularly important as I would be importing my shapes into a font editor later – I needed to keep each one as simple as possible.
This was a lovely “listen to music” type of job that you get with graphics sometimes, but in order I didn’t get lost or confused (my default state) I made sure I wrote down where I was on my pad. It ended up looking like this (click to enlarge):
The other problem I had was more minor – I had to “make up” the letters that didn’t appear in the caption. Luckily it was pretty clear from the style of the letters I had got how the other letters should look.
The next job was to sort out all the letters I had made so I could import them into FontForge 2.0. This was quite a confusing job. In this typeface all of the letters (or glyphs) have a number of “cut out” areas inside them which should not be filled with colour. The font renderer that displays them needs a way of working out which bits of the glyph to fill and which bits not to fill. It does this by looking at the direction in which you joined up the points on each outline (or path).
You have to join up the points that make up outermost path in a clockwise direction (to show it should be filled), the points that make up the next path in in an anti-clockwise direction (to show it should not be filled) and so on. This meant that I needed to know which path was which. To make it easier I filled the concentric shapes in Inkscape with different colours so I could see what was going on.
Without the colours, it wouldn’t be at all clear that the yellow area was in fact all one outline. The blue area would be a bit of a tricky one to work out as well.
I then exported each letter as a separate .svg file, in the same way as I did for my Central and Picasso faces.
The import into FontForge 2.0 was quite straightforward, apart from the fact there seemed to be a bug in the FontForge svg parser. It didn’t seem to recognise “corner” points properly which meant I often had to spend time connecting the corner points up by hand. In other words I was a grown man spending hours on end doing dot-to-dots.This bug has since been fixed – which would have saved me hours. C’est la vie…
Once I exported the truetype font, I named it “Monkhouse” in Bob’s honour. If you want to have a play with the Monkhouse font yourself I’ve released it under CC-BY-SA and you can download it from here. It’s lower case only and has no punctuation. One day I’d like to return to the typeface and finish it off properly.
In a future post I’d like to explain what I actually ended up doing with the “Monkhouse” font, but I think that’s been quite enough stupid rubbish from me for one day!
By the way, the Kaleidoscope event was to raise money for the Prostate Cancer Research Fund, so if you do make use of the font, if you give a few bob for Bob that would be lovely.
After shamelessly plugging my ANCHOR typeface on the web forum of The Mausoleum Club, I was delighted that it sparked off a very interesting conversation.
However one user going by the name of Boblet commented, quite correctly:
Dave…hang on, isn’t there supposed to be a rectangular block as one of the characters? How am I supposed to recreate Mentalis’ countdown sequence from The Armageddon Factor now? 🙂
http://www.mausoleumclubforum.org.uk/ Retrieved 29 September 2009
The problem was that I hadn’t seen the BBC Engineering Monograph 84 that shows a selection of ANCHOR characters when I originally created the font back in 2006, so I didn’t know I needed to add a block character.
As I thought it was only going to be a five minute job (if only I’d have known…) I thought I’d add one. What I needed to do should have been very simple: add a solid black rectangle to the Unicode character position known as “U+2588 FULL BLOCK”.
I originally created the font in Fontographer, but I’m using FontForge these days – I don’t even have my copy of Fontographer in the country! I had my .fog file from when I originally created the font in Fontgrapher, but FontForge can’t do anything with these. Luckily I could load in my .ttf into FontForge and answer angelically in the affirmative when it asked me very sternly if I really had permission to play with the typeface.
However, whenever I scrolled down to alter FULL BLOCK FontForge crashed every time. It simply disappeared in a puff of smoke without any warning or error whatsoever. My version of FontForge from the Ubuntu repository was well nearly 18 months old, which is an age for a program under constant development. Font Forge is worked on so much its version numbers are given as dates and times.
So I decided to so something quite drastic – I’d download a source tarball of FontForge from Sourceforge and compile and build the very latest version from the source. As I am using Ubuntu Linux this sort of thing is very easy. In theory, anyway…
Because I use IDLE and Python regularly I had all the odds and ends installed that I needed to compile something from source. According to the instructions, I just needed to type four commands on the command line and I’d be finished.
Stunningly, it all worked beautifully and I now have a shiny new latest model version of FontForge – a mere baby at only six days old when I downloaded it.
And, as an added bonus, the user interface now looks like it was created in 2003 instead of 1986. Although still rather black and white, it is all anti-aliased and looking very pretty.
Adding the block character to Anchor took ten blissful crash-free seconds and I have now uploaded the latest version of the font, version 4, to here.
One of the best ways of improving your skills with a vector graphics editor is to try and produce a test card using one. Producing test cards helped to hone my skills in Flash enormously, so I thought it was about time I tried to make one up in Inkscape to see how I got on.
The card I chose was the original BBC/ITA/BREMA Test Card D, from 1964. This is because I had a very good quality scan of an original held in the Transdiffusion archive.
One of the things I found different was that in Flash I often used to set the “origin” of my drawing at the centre of the screen. In Inkscape I couldn’t do this – the origin is always the bottom left hand corner of the document. Of course, what I could have done was create my drawing with the origin at the centre and then positioning it properly in the document at the end, but I didn’t think of that!
The main thing I got out of the exercise was that in Inkscape the “Align” panel really is your friend. It makes positioning regularly arranged shapes really easy. Most of the work in this picture was done by simply drawing shapes and then arranging them one of the numerous Align options.
The gratings (the stripey bits) in the centre of the card are simply boxes containing reflected gradient fills.
After doing a test card, I decided to have a bash at a tuning signal. The one I particularly wanted to try was the ITA “Picasso” card. This was very quick – it took no more than an hour to complete.
However, once I’d completed it I wanted to add some captions to it, and this is where the problem started. The original issue of the Picasso card was captioned in a weird mutant grotesque font. No font I had or could see available to buy really matched it, so I decided to make my own in Inkscape and FontForge using pictures of as many genuine Picasso cards as I could as reference material.
Then, all that was left to do was a bit of what my friend Rory Clark calls “distressing” in The GIMP and I was all done.
