The rectangle behind you
Experiments in typography
Sure, you shouldn’t read off of a slide, or pepper your talk with a whole hierarchy of verbose bullet points. But there’s room for words in a presentation. Maybe you could go for an approach Stephen Colbert perfected in his The Wørd segments, or perhaps mimic Lawrence Lessig’s restless slide transitions. Or, just once in a while, throw in a memorable quote, repeat what you say for emphasis, make it easier for people to share your thoughts.
Or at least try. I do. And I look at typography the same way I look at other parts of my talks: as a way to experiment, try new things, have some fun. Here’s some things I played with:
The fake 8-bit CRT
I used this in some 2011 talks about Google Pac-Man. The cheesiest of special effects, perhaps, but it was so much fun to try to pretend the presentation was running on a vintage cathode ray tube display — complete with fuzzy edges, vertical banding, and an 8×8 arcade-inspired typeface.
The end results were good enough to fool seasoned A/V technicians.
The young and restless and black-and-white
For my 2012 talks about Google doodles, I wanted to repurpose the beautiful art from one of my favourite doodle projects, the Stanislaw Lem doodle.
We built the doodle as a little universe — dense and alive — and I wanted the talk visuals to mirror this, too. Hence parallaxed mountains, the always-changing algorithmic sky, a custom mouse pointer, and even a little antenna reacting to signals from my iPhone remote:
But I needed words, too. All of the scant lettering in the doodle was done by hand by the artist, Sophia Foster-Dimino, and that was not an option for my slide deck. After some searching, I found an interesting typeface called Populaire. I liked the messiness of its hand-drawn letters, not to mention an extra bonus: each glyph was drawn… four times. I could have fun with that.
Using JavaScript, I wrapped each letter in a separate element, locked down its width, and every 750ms I would switch a different variant in, and even wiggle it a bit by a pixel or two, using CSS translate methods.
Here’s how it looked. A little restless, a little tense, possibly annoying, definitely interesting:
Watch the talk with this in action
Micromanaging punctuation
I have a soft spot for transit and signage typefaces, the typography’s “blue collars” — hard-working, dedicated, straightforward. London Underground typeface might be the most well-known vintage one — as a matter of fact, it’s widely considered to be the first modern sans serif. The relatively recent Gotham is another ubiquitous example, based on 1930’s New York signage.
Those might be the Beyoncé and Jay Z of signage fonts, but there are also less famous ones. One that I learned of recently is Toronto Subway, a handsome grotesque crafted so well it seemed like a great opportunity to typeset my 2014 talks about typography and craftsmanship:
It was so gorgeous that I deliberately rewrote some of my slide captions just so that they would have more Qs and Rs and Ss because… just look at those:
However, Toronto Subway has two heels that would make Achilles jealous — its lowercase letters are hugely problematic, and its punctuation even more so. It looks feeble, grafted absentmindedly from a much different typeface (which might just as well happened — the original only had uppercase characters and two punctuation marks: a period and an apostrophe)…
Subway signage might not need much punctuation, but I did. And, with all due respect to the unknown designer of the original font, I decided to improve it. I wrote some routines to replace smart quotes with dumb ones (yes! you have to learn the rules to break them…?), make the dots a bit bigger, and separate the ellipsis…
As appropriate for a talk about finding the balance between craftsmanship and manufacture, all of this was fine-tuned by hand… and then implemented programmatically on all the slides. (You can view the code on GitHub.)
The very imperfect paintbrush
For the second iteration of the same talk, I wanted to go even further. One of the reasons I love Toronto Subway and other typefaces like it is how they are used — not just as pixels on the screen, not just as ink on paper, but also paint on enamel or concrete.
I wanted to simulate that… to imagine arriving at a new slide would catch the last letters being drawn in haste. Here’s an example:
The proper way to do it would be to actually deconstruct the letters into individual vector strokes, and draw them properly. However, I only had a few hours on a plane, without Internet access to learn more about SVG. I decided to go for a much more crude and weird approach — to cover each letter with a <canvas> rectangle drawn in the colour of the background, and then slowly erase the strokes to uncover it.
The end effect was… so so:
Especially in slow motion, you can see that it’s horribly imperfect:
But that’s okay. It was a good first prototype-like effort, and I am sure the fonts themselves don’t mind being put in new situations like this one.
I will try to improve this idea the next time around (or you can, if you don’t mind my poorly conceived code), or come up with a new one. Please share yours if you have any!
Thanks to Kenneth Ormandy for typographical inspiration. Check out Lettering.js, which is a library designed for those kind of experimentations.
The rectangle behind you, a series of articles about interactive presentations.
By Marcin Wichary (@mwichary)
