Posted on

Anchor Revisitation

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…

Tight wad won’t pay for a colour licence
Posted on

Anchor Cliff Michelmore

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:

Anchor used in anger, 1970

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:

Anchor, pre January 1973

And here is how it would look after January 1973:

Anchor, post Jan 73

And here is a gratuitous picture of Cliff Michelmore as, personally, I think you can’t have too much Cliff Michelmore on your blog:

Click to enlarge

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.

Posted on

Font Embedding – Better (12 Years) Late Than Never

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.

Success – my .woff works locally

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.

FontForge 2.0 File Export Dialogue box

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 <Anchor.ttf> Anchor.eot

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. 

Uploaded to my webspace – massive fail

Here was my CSS:

@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.

Success at last!


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.

Posted on

384 exciting positions!

Recently I posted a message on “The Mausoleum Club” forum asking for more information about the BBC’s internally developed analogue character generation system ANCHOR. Regular readers of this blog will know that I created a true-type font of the ANCHOR character set which, for the benefit of Doctor Who fans everywhere, now includes the all important block character.

After my original two blog posts, BBC Graphic Designer Bob Richardson very kindly went digging in his private library and came up with some very interesting information for me.

From “The A-Z of the BBC” (1978) by Naomi Capon:

“Anchor is a piece of BBC designed equipment which allows captions, titles etc to be electronically inserted..from a typewriter style keyboard. 82 characters including full upper and lower case alphabets are available, any of which can be made to appear at any of 384 positions in the picture area which is divided into a matrix of 12 rows each with 32 character positions.”

Bob Richardson, posted on 29-9-2009 at 12:58 PM
Retrieved 29 Sep 2009 from http://www.mausoleumclubforum.org.uk/xmb/viewthread.php?tid=19618

The entire thread is a very worthwhile read if you have the time. I was curious as to how much screen space 12 rows of 32 characters of ANCHOR would take up, so I decided to try this out for myself.

I’d designed the ANCHOR font so that 41pt would be actual size, so in Inkscape, I made up a 32 x 12 matrix of ANCHOR characters at 41pt above Test Card F. Sure enough, it fills the picture safe area of the card perfectly – clever old BBC!

A perfect fit – click to enlarge

One thing I forgot to mention in my earlier post was that my ANCHOR typeface is squashed a bit horizontally. This is because it’s designed to be used with non-square pixel 720 x 576 images – if you use it on 788 x 576 images it will appear too thin on screen. If you want to use the font on square pixel images you’ll need to scale it horizontally by 109.4%.

So now I can go ahead and create scintillating TV line-ups from times past. Who wants to watch “The X-Factor” when you could be watching a line-up like this?

There’s an evening packed with entertainment on BBC2…

If you’d like to play about with my ANCHOR font for yourself, you may be interested to know I licensed ANCHOR under CC-BY-SA and it’s available to download from here.

Posted on

Anchor but, er…

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.

With blocks you can do thrilling things like this!

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.

Fresh as a daisy – only six days old

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.

The interface is looking much more modern

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.

Posted on

After Anchors away…

A couple of days ago I posted about the Anchor Character generator used for subtitling on BBC television programmes such as “News Review” in the 1970s.

After publishing it, I stumbled on a excellent web-page about the system that replaced it, TKST, here.

The next Frances Coverdale and Moira Stuart?

To be honest, I never liked this system as much. Perhaps it wasn’t quirky enough for me. Or maybe I was just growing up!

Posted on

ANCHOR character generation

Our Sunday evening routine was always the same – my four siblings and me having their hair washed by Mum on a production line, with Dad on hair-drier duty. You’d regularly smell burning as he’d be distracted by something on “The Money Programme” or “News Review”. If you could smell pork there must have been something really interesting on the news…

Whenever I was able to put the the ever present risk of third degree burns out of my mind, there were two things that fascinated me about “News Review”. One was the bags under Peter Woods’ eyes. The other was the subtitling for the deaf and hard of hearing. It was in a strange but fascinating style of writing you only ever saw on the BBC.

The best thing about News Review was the subtitles

Adding to the mystique, there was also a huge illuminated transparency (about a meter by a meter and a half) of Jan Leeming from “News Review” with this subtitling below the charts in my opticians in Crewkerne that was used for testing people’s distance vision.

The subtitling was created by a system developed in-house by the BBC called ANCHOR. The BBC used Anchor for everything from General Elections to “computer readouts” on episodes of Doctor Who to superimposing “MERRY CHRISTMAS FROM BBC-2” on the test card.

Perhaps the reason I remember ANCHOR with such affection was that it heralded cricket being rained off, which freed up our family’s only television for programmes aimed at human beings with some concept of boredom.

Richard Russell, a BBC engineer and BBC Microcomputer legend remembered the ANCHOR system as follows:

ANCHOR was a largely *analogue* character generator, developed before digital technology was capable of such things, and as such was pretty remarkable. An attempt was made to develop a proportional-spaced ANCHOR – I remember seeing it being worked on – but I think it never got beyond the laboratory stage because it was so complex. 

http://www.rtforum.co.uk/read.php?id=235325
Richard Russell – retrieved 14 July 2008

However, Bob Richardson, one of the BBC’s graphic designers at the time remembered it less than fondly:

ANCHOR was a truly dreadful piece of kit. It was “free” to BBC productions (no internal charge was made for it) but nobody wanted it. Only Pres used it on occasions to give close-of-play cricket scores. Pres had one ANCHOR machine in the main BBC1/BBC2 editorial area on the 4th floor at TVC and the other sat in Vision Maintenance on the 2nd floor under a dustsheet. It didn’t get out much. ANCHOR used a monospaced face and had an 82 character set. It… …had been around since the Moon Landing in 1969. The keying was also pretty crap.

http://www.rtforum.co.uk/read.php?id=235320
Bob Richardson – retrieved 14 July 2008

I’d always wanted to create an ANCHOR typeface for myself so when, in early 2006, my friend Rory Clark managed to recover a complete edition of “News Review” with Peter Woods and a BBC 2 News summary with Joan Bakewell from a Philips N1500 cassette I was in luck. Both programmes had used ANCHOR to produce subtitles for the deaf and hard of hearing. I took screenshots of every page of ANCHOR text and luckily managed to get every character between those two programmes.

Nowadays, instead of going to all that trouble, I could have simply downloaded BBC Engineering Monograph 84 off of the internet!

I created each character in Macromedia Flash and then imported them into Macromedia Fontographer. This was quite an exciting project at the time as it was the first font I’d ever created.

The end result (a truetype font file) worked rather well, and I’m glad to say it was put to good use by the late Simon Luxton who produced some rather interesting applications of ANCHOR that he remembered seeing as a child. Here is a picture I made for Simon – click to enlarge:

Peter Woods with that bloke off the Nationwide pantos

If you use the font at 41 points on a screen that’s 788 x 576 pixels in height then you’ll get an end result identical in size to the size seen on screen.

I’ve now licensed my ANCHOR font under CC-BY-SA and it’s available to download from here.