Recently I received a typewritten letter. Not printed, but typed on an old school mechanical typewriter. I can’t even remember the last time I received something that had come off a typewriter. Maybe a school report from when I was a kid? This typewritten letter was the catalyst I needed to condense a bunch of half formed ideas into a project. My fourth curiosity…
Mechanical typewriters are awesome. Despite excellent legibility, there are all kinds of uncertainty that adds imperfections to your work. How hard you press the key, translates to how well the ink transfers to the page. How the ink bleeds on the page differs depending on character and with variations in the fibres of the page. Oh and typos. There is no hiding those suckers on a mechanical typewriter. You either throw out the whole page, use correction tape or just straight up type over the error. While word processing on a computer scrubs away all these scars and replaces them with the chiseled perfection of a bank statement.
OK. So I was going to show a video of a mechanical typewriter, but I couldn’t get past this amazing commercial for IBM’s Selectric typewriter:
Loads of people have attempted typewritten fonts for a computer. For example, take a look at ‘Brother Deluxe 1350’. At first glance it looks roughly like it has come off a typewriter, it has ink bleeding and some of the characters are mishit. But, you know that clammy sensation creeping into your mouth right now? That is taste kicking in, it is telling you that something isn’t right. It is telling you that this is terrible fake. If we pull out the letter ‘e’ and type it over and over again, it completely shatters the illusion. Each keypress is not unique and the whole typewriter effect has been destroyed. All we have ended up with is some badly rendered characters.
The author of Brother Deluxe has actually done a pretty awesome job given the tools at hand. The problem actually lies in the way a computer renders typesetting. Font authors are only ever given one way to represent a lower-case ‘e’. They have no way of expressing all the subtle variations that a mechanical typewriter generates ‘e’.
Some people get around these constraints be generating images where each keypress is unique. Oh. Oh. Oh. And this is where I finally get to use my favorite 90’s argument against flash. “But, that breaks the web… Man.” Images are large to send and search engines can’t read the content. Not to mention being time consuming to create. I just want to peck away at my keyboard and have each key-press rendered uniquely like a typewriter.
Analogue.js is a canvas based typesetter that does just that. Add the 'analogue' class to your element and analogue.js will do the rest. Analogue replaces existing HTML elements with a canvas. It then generates a unique ink-strike for each key-press, along with any misalignment. It even occasionally smudges a character or renders transpositional typos. The underlying font is a digitised version of IBM's Selectric typewriter ('Courier New'). As a result, this paragraph will never have two page views the same\*. Open up a couple of tabs and check it out.
Tom Sachs and Van Neistat inspired this analogue approximation for website text**. So I threw together a more comprehensive demonstration based off their work, ‘Ten Bullets’.
If you wanted to give analogue.js a whirl, the source code lurks on github.
* Given enough characters written on a page. I haven’t worked out the exact number of permutations. But there are many.
** With a bit of Jeff Atwood thrown in to make sure it preserves the googlebot love.
Comments:
You can join the conversation on Twitter or Instagram
Become a Patreon to get early and behind-the-scenes access along with email notifications for each new post.
Hi! Subconsciously you already know this, but let's make it obvious. Hopefully this article was helpful. You might also find yourself following a link to Amazon to learn more about parts or equipment. If you end up placing an order, I make a couple of dollarydoos. We aren't talking a rapper lifestyle of supercars and yachts, but it does help pay for the stuff you see here. So to everyone that supports this place - thank you.