I guess now and again I can promote some of my own work — hey, it’s what keeps me from writing articles for Ministry of Type all the time, and this piece draws together a number of themes I’ve written about before here so it feels pretty relevant. This is an illustration piece I did for Wired Magazine for their US edition’s cover story, The Future of Money. It’s also appeared in the UK and Italian editions and in GQ magazine in Mexico and South Africa, which I’m pretty thrilled about.

The full illustration.

When creating, or even looking at, a banknote design, one of the first things you realise is their inherent and very deliberate imperfections. There’ll be an apparent mis-registration of colour, a strangely ragged line, a discontinuity in a pattern or an odd serif or ligature on a piece of lettering, but it’s exactly how it was designed. Without it, it wouldn’t be right. The design of banknotes represent something I find gloriously poetic — imperfect perfection — if it was perfect by our usual standards, it would be imperfect. Wonderful. So tried to capture some of that in my design, overlaying colours with an offset, adjusting the lettering a little bit to reflect the kind of oddities on real dollar notes and creating the odd layer of extra guilloche-work barely fine enough to see. I’m glad Wired is well printed and that it all came through.

First off, my favourite, guilloches! Guilloches have an irresistable fascination for me, the finely detailed patterning building on top of itself, over and over, to create anything from complex shaded illustrations or subtle fields of colour, and all you need to do is to look a little closer to get drawn in… wonderful. Fractals have a similar kind of appeal, but there’s more of a craft to creating guilloche patterns, some idea of I made this rather than I discovered this. A subtle distinction for some, but it just gives one an edge over the other in my mind.

The lettering was actually the most time consuming part of the piece. The denomination took some time, but the big bit of work was the multi-layered title. The faces of the letters themselves are shaded with two sets of guilloche patterns, and the 3D effect was done mostly by hand — adjusting for optical clarity and to bring in a few of those all-so-important errors. I toyed with the offsetting on the faces (to create the pale outlines and shadowed cuts) especially as the “R” came out a little strange, with that square cut-off on the inner edge of the outline. I left that for a while and when I came back to it I decided I actually liked it, so it stayed.

The cropping out of the guilloche patterns to create the shading took time to set up and then quite a lot of time for the computer to do the necessary intersections. Anyone who was following my Twitter personal account at the time may have noticed a fair bit of bitching about Illustrator’s pathfinder tools, often spitting out “The filter produced no results” after 10 or so minutes of thinking, which generally drives me to use Photoshop’s vector tools for stuff: they have their deficiences, but they do the job without Illustrator’s tedious whining errors. It took 30 minutes of it thinking about it, but it got there in the end. It seemed a bit easier the second time around, when I did the localised title for Wired Italy, though sadly no quicker.

The circular pattern of cubes I did using Google Sketchup, which I’ve been using a fair bit to create another piece (which may be a poster one day), outputting it as an EPS and then going over it in Illustrator changing all the outlines to the right thicknesses and colours, then doing it again for the offset colour overlays. Fun times.

It was great to be able to use many of the ideas I’d explored before and have to make them work together in a full commercial piece. It’s fun when you’re given a brief like this, and pretty exciting seeing your work printed in a magazine. More, please.

Andy Polaine recently tweeted a link to this video on David Airey’s site about Hatch Show Print, a letterpress shop established in 1879 in Nashville, Tennessee, which is still operating. The manager, Jim Sherraden, has strong views on how to run the shop, with a motto of “preservation through production”, the idea being that all the equipment, all the blocks, everything, is still used regularly, even if it’s for one print. Sherradden regards the shop as a living museum; everything is letterpress, and done by hand, and interestingly:

we don’t introduce new typefaces because I don’t want to pollute the integrity of the archive.

I’m glad someone is doing this. I’m glad that this style, so American, is being maintained, that these wood blocks are being used for printing and not for decorating someone’s wall, and that these presses are still operating and being maintained. I’m glad someone’s doing this, because I don’t think I’d want to. I know I’d find myself craving new typefaces, screenprinting, digital print, variety. So yes, I’m glad someone’s doing this. Someone else.

Some stills from the video. Look at all those wood blocks. Wow.

I got the link to this video on YouTube via Jason Santa-Maria on Twitter. It’s compiled from around 3000 images taken over 2 months documenting the creation of 35 hand-made books at the Women’s Studio Workshop in Rosendale, NY. There’s a website with more info and clearer photos here. The whole thing is lovely and worth watching — note especially the attention to detail with the thread colour for the binding and the creation of the headband. These images are all from the video:

I’ve had a few emails (so soon!) asking how I created my version of the star posters in an earlier article. I created mine using Photoshop vectors (out of habit) but Illustrator, or indeed any app that supports vectors, would be fine — just adapt the processes to your app.

So, without further ado…

You need to create two sizes of star. Mark Brooks used an additional star shape that was an outline, so you can create one of those as well if you want. The simplest way is to draw a square (mine was 40px × 40px) then create four circles of the same dimensions, offset them to the corners, then set them to subtract from the square, like above. I normally expand the shapes just to leave a nice clean star. Then it’s a process of duplicating and offsetting, like above. Create the large stars on one layer, and the small ones on another.

Keep going until you’ve filled whatever size you need.

Then, turn off the layer with the big stars and create a new one with your shape on it. If you’re using a photo, posterise it into black and white using whatever method you prefer, then put it below all the other layers — fiddle with the opacity so it doesn’t hurt your eyes.

Then it’s quite simple. Delete all the small stars that aren’t mostly on the black areas of your shape — zoom out now and again if unsure and use your judgement.

Then turn the other layer back on, and turn off or delete the one with your shape on it. You’ll end up with two layers - one completely covered in a pattern of big stars, and another with a pattern of small stars on the area of your shape. Print, and savour.

Of course there are tools available to simplify the process of creating patterns from images, and some of them seem to be good. However, I’m rather more than a bit obsessive about the fine details, and something like this really needs accuracy — doing it manually means I can make sure it’s just right.

I came across this a week or so ago - another thing found on Behance if I remember correctly, and I’ve had a bit of a play around with it. I like the idea of a Fontstruct-style system for Blackletter, and I can see that Jan Schöttler has created some quite lovely things with it, but without looking at the PDF in Illustrator I would find it far, far easier to draw the letters with a pen and brush than make them with this kit. It reminds me of a Tangram puzzle game in a way. I had a play around with it and created the word below, which is tending a bit too much towards the death-metal band logo for my tastes, but hey, it has a bit of charm. Maybe you will have a better experience with it (warning, Flash site).

Ho hum. It would look more at home scratched in biro on a schoolbag, I think.

The parts.

The parts, assembled.

Update: Jan Schöttler emailed me to say that he didn’t do CombineBox alone, and that it was Andre Apel‘s Master-Thesis at the HFG Zürich.

It seems hardly a week goes by lately without some interesting new development in online typography. For years there has been a constant grumble from many that the web needs more typefaces available to designers to create great online typography, and there’s been a consistent, and entirely correct (but perhaps rather hardline) response from others that great typography doesn’t come from having lots of typefaces. Perhaps you can tell from that which side I come down on, and yes, it is rather hardline, and I freely and happily admit that as a response to the problem it rather misses the point.

The FontBook. Photo courtesy of Stephen Coles.

You can, of course, create great typography using only one or two typefaces for your entire working career as a designer. I’ve met a few designers who seem to want to do just that, and indeed, I heard a story of a creative director so obsessed with Bembo that he wouldn’t allow any other face to be used on anything, so that none of the designers who worked with him could ever bear to use it ever again. Most of us, like those very designers, would quite reasonably get bored to death with using the same faces all the time. No matter how beautiful, how perfect, how utterly balanced the typeface was, you can have too much of a good thing, eventually - and if the faces you have available are, shall we say, of mixed quality, then you can feel rather stifled, rather quickly.

This is the situation we’re in now. We’ve had the ‘Web Core Fonts’ for seemingly forever, and we’re fed up with them. There are so many excellent screen faces out there, and we want to use them. But how? I won’t seek to repeat some excellent articles on the current state of play (I suggest you read this article on ilovetypography.com), but I fancied including some of the context, the history of how we’ve used non-core faces online until now, and my own opinions one where it’s all going.

Making images of text yourself

Slow and tedious, not very accessible and relatively inflexible, this isn’t really a solution at all, but is certainly the most reliable way of presenting text in your own typeface online. It’s getting less common thanks to the growth of various other methods, but still hangs around for obvious reasons: You can fine-tune everything - the kerning, ligatures, alternates, all sorts of effects, it’s all under your control. Sounds great, until you have to change the text. Then you have to fine tune it all again, save off all the images again, upload all the images again, then try and work out why you’ve got a broken image on your site again until you remember you changed the filename when you were in a hurry that time and you forgot about it…. So, it’s good for things you don’t change often.

Making images of text automatically

For many years this seemed a golden solution, lit by a kind of heavenly light from within, choirs of angels and all that: all the benefits of making images yourself, but without all the fuss and effort! Joy! Well, not quite. There are various methods for creating the images automatically, from using a desktop application like Fireworks to online PHP libraries (and similar), and they all have their limitations. The first, of course, is that you’re creating the images automatically so you don’t have quite so much control over how the type looks, and most of the PHP libraries I’ve seen over the years don’t support kerning, which is a bit of a showstopper if you care about such things, and if you don’t care, why are you doing this anyway? Also, like creating the images yourself, you still end up with folders full of loads of tiny files, and your pages will be slower as a result of the browser having to request each of those files individually. Not ideal in other words.

Live replacement with Flash or SVG

And here we find some very clever solutions, the most widespread being Scalable Inman Flash Replacement, or sIFR (yes, with a small ‘s’). This technique uses a combination of Javascript and CSS to replace text with a Flash movie showing that same text but instead using a font embedded within the movie. When used for small amounts of text, such as a couple of headlines on your page here and there, it can work very well, hence its popularity.

There are some benefits to using sIFR: You can choose a subset of characters to include, which can keep the filesize of the Flash movie fairly low; and as it’s not the actual font file you’re embedding, it adds a barrier of security to people who might want to rip it off (how high a barrier that is remains debatable), and, as with all Flash movies, you can block the file from being reimported back into the Flash editor (again, with debatable efficacy).

There are also some real problems with using sIFR. The main one is speed. If you use it for any amount of text you’ll notice quite a lag while the text is replaced and the Flash movies rendered. Using it for a lot of text, such as the body of an article, and you will most likely notice a significant performance hit on your browser, or a crash. It can also be blocked by ad-blocking software - I use Click2Flash on Safari and I haven’t set it to allow (or disallow) all sIFR, just in case, so I often see placeholders all over pages. The other main problem, and it doesn’t particularly affect users, is that it is a fairly brittle, poorly documented and really annoyingly bitty solution - it’s an absolute pain in the arse to set up, basically.

Another option very much worthy of mention (and I’m not going to cover every single one) is Cufón. This works by using Fontforge to convert a TrueType or OpenType font file to, essentially, a Javascript file. Naturally there’s a little bit more to it, which you can read on the Github page should you wish. The setup is extraordinarily simple, the rendering of the type is extremely fast, even when used on a lot of text, and works with straighforward CSS rules. It’s not absolutely perfect, as there are a few issues with Internet Explorer (no surprises there) and there are some concerns that the font file can be reassembled from the Cufón file - though the technological barrier to that is enough to defeat most people.

Of which questions of licensing and piracy leads nicely onto…

Directly linking to the font file on your server

Basically, you upload a font file to your server and link to it on your web page or stylesheet and when someone views your page, the font gets downloaded, interpreted, and your text is then displayed using it. Simple. Well, kind of. Since version 5, Internet Explorer has supported the font-face rule, allowing you to link to a proprietary file format, Embedded OpenType (EOT), which allows for subsetting (like sIFR does), proprietary compression and a simple form of DRM to limit the file to use on certain domains. This format was never supported by other browser makers, and foundries never explicitly allowed for the use of their typefaces in this format, so it never took off. In many circles, it was viewed as a Bad Thing, another attempt by Microsoft to foist proprietary technologies onto the web, and further evidence of how evil they were. Though perhaps if you subscribe to that view you might want to look up who commissioned the Core Web Fonts in the first place. Verdana and Georgia are bloody great (on screen).

So, we went many years with a partial solution available, but never used. Recently, however, a couple of new proposals have emerged. One is the .webfont proposal by Tal Leming and Erik van Blokland, which seeks to create a format-independent XML wrapper for fonts, with compression for the font data itself. The XML wrapper contains various data, including allowed URLs, the license and origin, and anything else the foundry wants to put in there.

Essentially, the XML wrapper in .webfont is a form of DRM. It contains the license, and if you ignore it and rip off the font file, then you’re open to prosecution. It’s true Digital Rights Management rather than Digital Rights Enforcement.

Interestingly, there isn’t any restrictive DRM (Digital Rights Management), obfuscation or encryption in the format. DRM is a tricky one. I’ve never been entirely against it as a concept, but more against the appallingly greedy, grasping, restrictive, anti-consumer, anti-liberty, anti-fair-use moneygrabbing application of it the music industry employed. I don’t rip off music or movies, and yet my use of my media is limited by these restrictions - it’s insane, so I can see why the idea of adding any form of DRM to font files is now beyond the pale, even though with typefaces it could, arguably, be justified. The only option is to keep educating people that they’re not free, that they take time to design and perfect, and that yes, if caught, you can be prosecuted. Kids and enthusiasts building massive font collections they’ll never use are one thing, but professionals should, and must, know better.

Anyway, I digress. The other proposal getting attention is EOT Lite. This is a resurrection of Microsoft’s original EOT format, but with the DRM-like restrictions and patented compression methods removed. This makes it a reasonably credible addition to the options available as it is already supported by a major browser, but whether it can overcome the poor start (and worse publicity) EOT had is doubtful. While .webfont has the support of most of the larger and important foundries, a couple of big foundries have backed EOT Lite. Well, that is until halfway through me writing this article when Typegirl tweeted that Adobe are backing the .webfont proposal. We shall see, and of course there’s no problem with a foundry supporting multiple solutions. Certainly Linotype have already added EOT to their EULA, which is great news as it signals that one of the biggest barriers to using different faces online, licensing for web use, is actually now being overcome.

And, with that other nice link on licensing, we move to…

Subscription: Using the font file on someone else’s server

Typekit’s list of typefaces. Cropped from this screenshot. Yes, I recoloured it too.

Now this is really exciting, and has implications for font licensing for the desktop as well as online. You pay a subscription, and you get access to a variety of typefaces you can use on your site. With Typekit, the process is handled using Javascript to enable the font in the browser, which you then refer to in your stylesheet using standard CSS rules. Other services, whether from foundries, resellers or dedicated service providers, will no doubt develop their own systems, but I imagine they’re be all along similar lines. The question for me is one of performance. I don’t know about you, but I’ve occasionally been left waiting for a page to load while the browser waits for a response from, say, google-analytics.com - there’s no question Google’s main analytics web servers are down (not this often anyway), but just that sometimes this happens on the web. How would this affect a page using Typekit? Is there any option for local server caching for example? If so, how would that be handled?

I’ve often thought that a subscription model for typefaces would be ideal for agencies, designers and printers - people who need access at short notice, and for short periods to a wide range of faces. At the moment, there’s a lot of dodgy emailing of font files about, and you can bet that no matter how scrupulous at licensing everyone concerned may be, that a lot of these font files stay installed and end up being used beyond their licenses. Foundries, and for agencies, etc. concerned about their liabilities to prosecution (and of course, for doing the right thing) would welcome a system that allows you to get access to a face for a week, or a month, or whatever, and, most importantly, to change what they have access to whenever they need to. To make it work you’d have to be paying less per font (or even per face) than for a full license, but for the foundries this would represent a consistent income, rather than no income at all. It’s a thought. I’d certainly use it.

The Future

The whole push to develop practical ways using typefaces online is inevitable given how many applications are now moving into ‘the cloud’. We’ve word processors and photo editing applications online now, and it’ll only be a matter of time before professional creative tools go online too. We want to be able to access our documents from anywhere, and for them to use the same faces as we created them with, and for these documents, the web core fonts aren’t going to do the job.

With the online subscription model, there is a cautionary note to keep in mind - you don’t have control over what’s available. As Kindle users who thought they’d bought Orwell’s 1984 recently found out, if your service provider doesn’t want you to have it anymore, you have no say in the matter. At least if you have the font file on your own machine or your own server, you can keep using it even if the company you bought it from no longer wants to sell it. We’ll no doubt see both honourable and dis-honourable business practices, some scandals, some interesting legal actions, and probably new primary legislation on the matter, but until then, as ever, caveat emptor.

I’ve been following the RSS Feed of Martin Schröder’s blog for a while now; he’s a printer using traditional letterpress techniques in Berlin and posts a lot of interesting and beautiful work on his site. Mostly, I will admit, I just look at the pictures as Schröder usually includes a good set that tells the story of the process quite well. Sometimes though, despite my rusty German, I will work my way through the text as (of course) there’s a lot more interesting detail there. Well worth a look, even if you do just look at the pictures. I love these:

This Thursday just gone, Matthew Carter presented the fourth annual Justin Howes Memorial Lecture for the St Bride Library, Genuine Imitations, a type designer’s view of revivals, and I was lucky enough to get a ticket for it. All the tickets went in two hours, and St Bride moved the event to Conway Hall to allow more people to go, yet even after that there was a waiting list!

I’ve written up the talk for I Love Typography, so head on over there to read all about it - it’s quite long, but Carter made some good points that I found rather inspirational, and I hope you will too.

I saw this linked from ISO50 this morning: The Dollar Redesign Project is a competition (Campaign? Bit of fun?) to promote the idea of fully redesigning the US banknotes, possibly on a regular basis, like many banknotes the world over:

The American Dollar has not truly been redesigned since about the 1930s. The Dollar ReDe$ign Project is your opportunity to theoretically ‘change’ that. Yes, technically there are many limitations and complications when it comes to bank note design, but if the Swiss can do it on a regular basis, why can’t we North Americans too?The Dollar Redesign Project

There are only a few designs on there at the moment, some a bit jokey, but of the serious ideas I quite like the ones in the first set below. I can’t see any notes that deviate too far from the originals being successful, as there are so many cultural and linguistic associations with the ol’ greenback; it may seem tediously conservative, but notes that aren’t predominantly green just won’t feel like dollars. I hope the designs go further than the ‘stick a guilloche on it and call it a banknote’ idea - guilloches are beautiful things - I wrote about them before, here - but it takes more than a few of those to make a successful banknote.

Perhaps a little too reliant on that colour bar to tell them apart, but I like these.

I like the return of the original US motto (translated and updated), E pluribus unum, on this one.

Relative sizes of UK notes

One usability feature common to many banknote systems, and I’m surprised the designs so far haven’t addressed it, is to have different denominations in different sizes. UK banknotes do this (see right) and it’s reasonably easy to feel whether you’ve a £5 or a $20 note in your pocket because of it. £50 notes, while far from the tablecloth-sized notes of old, seem positively enormous compared to a fiver. I wonder how many mistakes are made every year from having all the notes the same size?

Of course, no article about banknote design would be complete without a mention of Ootje Oxenaar’s designs for the banknotes of the Netherlands below, now sadly replaced by the rather dull Euro notes. At the risk of seemingly terribly shallow for a moment, to my mind the design of the Euro is a pretty good reason for the UK to keep the pound. Banknotes are like little works of art, and to squander the opportunity to produce a remarkable and beautiful design for them is a sad thing. I shall be watching what comes out of the Dollar Redesign Project with interest. I may even have a go myself.

A few of Ootje Oxenaar’s designs for the Netherlands banknotes. More here.

A couple of weeks ago ISO50 linked to this set of polaroids of the Xerox Star user interface on Digibarn, and I’ve been looking back at them on and off since. The UI has some interesting little details; it was designed for a two-colour display, so used a couple of dithered patterns to create the grey shading on the desktop background and window titles, which in turn created a few problems for the designers. To get a neat, crisp interface, icons and windows have to be sized and positioned on the background so that the black and white dots don’t interfere with the outlines and create a kind of blur or eye dirt effect. The polaroids show some of the design notes and instructions for doing this; it’s a lovely illustration of the attention to detail they employed to make the best of a technological limitation. Rather than recreate them directly (you can see the originals here, and here) I’ve redrawn a bit of the UI here, with ideal alignment on the left and detail top right:

The difference a pixel makes.

If I’m to get preachy (and ranty) for a moment, I think it’s a task any designer should attempt as part of their education - what you learn from designing for such a restricted display helps with all sorts of design tasks later; you learn what causes a lot of those visual disruptions and artifacts that you catch from a quick glance or out of the corner of your eye. It may be subtle, but it’s the kind of thing that reduces the overall apparent quality of your work, the stuff that marks out your work as being standard (read: mediocre) or exceptional. If you feel you shouldn’t get precious about such things, perhaps graphic design isn’t your thing.

How the icons are laid out on the desktop. The big flaw I see in this design, still not fully solved in desktop UIs today, is the display of longer filenames when displaying icons in a grid. They’re either truncated or hideously force-wrapped. Ouch.

As others have noted, the UI at first seems remarkable for its apparent modernity, the conventions it uses are still ones we use today; with a graphical update to it you’d get a reasonable facsimile of any windowed GUI of the past few decades. The designers at Xerox clearly did a remarkable job, addressing so many design problems at once, with solutions so good that almost three decades of development haven’t significantly improved on them. We could throw up our hands as a result and say that this is clearly it, that nothing new can be done, but apart from being depressing, this would miss a couple of important (to me) points:

1. The hardware configuration of a desktop computer has barely changed - we still use a mouse (or equivalent), a keyboard (however fancy and bristling with hotkeys it is) and a screen (whatever the technology, it’s still a 2D array of pixels)
2. We haven’t changed - we’re still human beings.

Essentially, we are still the same configuration of limbs and sensory organs using the same configuration of display and input devices. It’s when we change either of those configurations that we see where all the real innovation has been. Adaptive and assistive technologies are developing faster and faster as component prices fall and previously isolated innovators are connected and share information online, and in tandem with this we see the spread of input technologies that enable methods such as touch, voice and gesture. We can hope that these technologies become widespread enough to change the design of the traditional desktop, or even make it obsolete, and that leads me nicely onto…

A futurist digression

Heading off into the realms of the futurist for a moment, I think a lot of attention has been given to display-related technologies such as 3D/holograms, but not even sci-fi has come up with anything really remarkable with the idea - oh sure, you can create a hologram of a keyboard, or a touch screen, but those merely address matters of convenience: you don’t have to store the thing when it’s switched off. The interfaces we see in films are mostly still all about manipulating pictograms. What I’m really interested in are the kinds of interface that use our other senses, interfaces that seem less flashy and appear almost mundane such as vibration (as in mobile phones), things like the sleep indicator on Apple computers and potentially most importantly, speech.

Forget flying cars, we’ll know it’s the future when we can talk to our computers, just like in Star Trek, but hopefully not quite like in 2001: A Space Odyssey.