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.
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!
A little while ago Gareth Randall dropped me a line to let me know he was going to use my Anchor typeface for one of his projects.
Gareth is an award winning promo maker, who I first got to know when was making trails and promotions for ITV. He was one of the masterminds behind the final London Weekend Television start-up routine.
I was delighted to discover that the project Gareth had in mind was a promotion for the Doctor Who Revisitation Box set. Being a bit of a fan of Terrance Dicks and Robert Holmes this was a huge honour. So, here is Sharaz Jek trying to get Peri to suck his finger. I like to think it was my rather foxy typeface that got him in the mood…
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.
Regular readers of this blog will no doubt have been bored witless by my endless posts about the creation of a TrueType font based on the output produced by the BBC analogue character generation system Anchor.
Although I was very happy with the end result, I was aware that when compared to one famous example – the BBC’s coverage of the General Election of 1970 – it didn’t look quite right.
Here is an example image taken from this video – apologies in advance, as the quality is appalling:
The characters looked fatter – squarer – than they did on my version. I was curious to know why.
Whilst browsing the internet for something else entirely I happened to come across a BBC .pdf file from January 1973 that explained what was going on:
“The addition of the lower-case facility has involved a change in the format of the display from 14 rows of 25 characters to 12 rows of 32 characters. This has been necessary to accommodate the descenders of such characters as ‘y’ and ‘g’ whilst preserving the appearance of the character set.” BBC Engineering Design Information – 10168(1).JAN73.ECG.
So, here is how Anchor would look before January 1973:
And here is how it would look after January 1973:
And here is a gratuitous picture of Cliff Michelmore as, personally, I think you can’t have too much Cliff Michelmore on your blog:
So, imagine you are doing something with Anchor.ttf on a 720 x 576 image that is supposed to be from pre-1973. In that case use Anchor at 41pt, stretched horizontally by 128% with 85% line spacing. And you mustn’t use any lower case!
If you are doing something with Anchor.ttf on a 720 x 576 image that is supposed to be from post-1973 then simply use it at 41pt with 100% line spacing.
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.
