
The hardest working font in Manhattan
A story of a 150-year-old font you have never heard of – and one you probably saw earlier today.
I’ve had Matthew Butterick’s Practical Typography website/ebook bookmarked since I discovered it over ten years ago. It’s making the rounds again, and I think it’s a good reminder that we are all “professional writers” as he describes:
When we think of “professional writers” we probably think of novelists, screenwriters, or journalists. But the programmer, the scientist, the lawyer—and you, if your work depends on presenting written ideas—all deserve to be called professional writers.
But as professional writers, we do more than write. We edit, we format, we print, we generate PDFs, we make web pages. More than ever, we’re responsible for delivering the written word to our readers. So we’re not just writers—we’re publishers.
Typography is the visual component of the written word. Thus, being a publisher of the written word necessarily means being a typographer.
He’s right. As much of our work is in producing documents and content, we are publishers. Here are a few of my favorite pages:
This book reminds me of a couple of seminal books from the early 1990s: The Mac Is Not a Typewriter by Robin Williams and Stop Stealing Sheep by Erik Spiekermann and E. M. Ginger. The former is how I learned all the basics, back when I was designing my high school’s newspaper. The latter is more comprehensive, going deeper into how type works conceptually. These three are all essential resources for any designer.
Typography is the visual component of the written word. Thus, being a publisher of the written word necessarily means being a typographer.
Sometimes it takes a small push to get the creative obsessions going. Like the majority of the country, I’ve been appalled at Donald Trump’s presidency. From his administration’s cruel policies to just how awful of a man Trump has shown himself, I have been gritting my teeth for four years, waiting for him to lose his re-election bid. I was profoundly concerned about democracy in the United States and how it was being actively undermined by Trump and his band of far-right Republicans.
When Trump ran against Hillary Clinton in 2016, I made a poster and website called “Inside Trump’s Brain.” I knew back then how terrible of a president he would be, but had hoped he’d grow into the office. Boy, was I wrong.
So when Joe Biden won the Democratic nomination, I needed to do all I could to get him elected and make Trump a one-term president.
I donated. I talked to the few I knew who supported Trump. I joined Biden’s texting team. But then my friend Christopher Simmons put out a call to his network for artwork to show support for the Biden & Harris ticket. What began as a one-off for me turned into a series driven by not only the cause, but by a need to just make. I became obsessed with 3D typography and loops. The format on Instagram is about creating bite-sized animations that can catch people’s attention and make them pause their scroll for a few seconds.
Here are the pieces in the order in which they were posted. But do note that the “United We Stand” image came first. It was a collaboration with my very talented sister, Gloria. She provided the paintbrush textures and some color consulting.
Recently Guillermo Esteves did a fantastic experiment with HTML5 and CSS3 by recreating the opening crawl to Star Wars. Although it only currently works in Safari 4, it’s a good preview of how to create something dynamic using web standards and web fonts once the other browsers come along.
But Guillermo’s experiment also reminded me of how awful the typography was of those opening crawls. The original Star Wars opening crawl uses two different typefaces (three if you count “A long time ago…”), is justified without hyphenation, and thus creates obvious rivers and awkward tracking.
Opening crawl from A New Hope as grabbed from the DVD.
As the subsequent movies came out, the typography was all over the place. The Empire Strikes Back dispenses with letter-spacing altogether. Return of the Jedi overcompensates for the failure of the previous two crawls by using too much letter-spacing.
Opening crawl from The Empire Strikes Back. What happened here? I can drive many trucks through those spaces.
Opening crawl from Return of the Jedi. Standbackafewfeetandtrytoreadthatlastparagraph.
The absolute worst though was when ILM matched the style for the Star Wars prequels. At least there was more tracking in the original 1977 version. The 1999 version of the crawl that appeared in The Phantom Menace lacked any letter spacing whatsoever and created huge holes between the words that made the crawl barely readable. (No offense to special effects god and Photoshop co-creator John Knoll. He’s great with FX but he’s not necessarily a designer nor typographer.)
Opening crawl from The Phantom Menace. Shit in = shit out. It’s a tragedy that they used Empire as the model.
I set out to do a quick experiment to see if I could redo the crawl any better. The first thing I did was to standardize on one typeface. The “A long time ago…,” title and body copy are all Franklin Gothic. Then I tried a version where I kept the justified alignment but decreased the type size. The copy becomes much more readable, but feels too small and loses that epic quality George Lucas was probably after.
Then I simply tried centering it and I think it works. I am able to keep the type size large without creating large gaps between words or letters. Although the very straight sides are lost, I think the intended dramatic effect is still there.
And of course, I had to whip it up in After Effects to really test the design.
Yeah, file this under geekery.
Whenever I look at anything with words on it, I look at the typography. Bring me to a local corner lunch cafe with a menu typed out and printed from Microsoft Word and I will have a field day. I would judge even more harshly at a more expensive restaurant. I can’t help it as I—like most designers, I’m sure—just look at everything with a critical eye.
My biggest typographical pet peeve is the rendering of apostrophes, single and double quotes.
It astounds me when I notice this on any piece, and all I can mutter to myself is “Where is the craftsmanship?!” This was not the case decades ago when copy was sent out to professional typesetters. The very thing that democratized graphic design was the the same thing that lowered the bar on what passes for “professional” graphic design. I’m talking about how the computer and software allowed more people access to the tools necessary to create great looking stuff. No longer did designers need to send out manuscripts to a typesetter who would in turn set the type into galleys for the designer to paste up in the mechanical. This spawned a whole new industry called desktop publishing, but killed the entire profession of typesetter, and along with it some higher standards.
Don’t get me wrong. I’m no luddite. I put myself through college by working at a desktop publishing service bureau. But because I had some great teachers, and because of my sometimes unhealthy attention to detail, I had a lot of respect for typography, thus taking the time to learn all the rules and standards. But I digress.
What passes sometimes today for single and double quotation marks are actually foot and inch marks (or hour and minute marks). Why is that? My theory is that to be efficient in the manufacturing of some of the first practical typewriters, they straightened out the quotation marks so they could be dual purpose—open and close. In fact in Christopher Sholes’ patent for the QWERTY keyboard, only a single straight apostrophe key is shown, presumably the user would strike the key twice for a double quotation mark. And of course, most of this layout made its way into our modern computer keyboards and software.
Software companies like Microsoft and Adobe have been trying to mitigate this error by employing “smart quotes” technology. The software will analyze whether the quotation mark is at the beginning of the word (and then use the open state) or the end of the word (and use the close state). Most the time this actually works well. But what happens when you need to use an apostrophe in its close state as a contraction replacement in words like ’Til, Rock ’n’ Roll, and mac ’n’ cheese? The software isn’t smart enough to replace it with the proper close state and the designer or brand ends up looking amateurish.
How to not look like an amateur designer? (OK, maybe amateur could be considered a harsh term to you pros. Maybe bad craft is what I’m really talking about.) Go ahead and turn on the smart quotes feature of your favorite design app, but pay attention and override when necessary.
Glyph | Description | Mac | Windows |
---|---|---|---|
‘ | Open single quote | OPTION-] | ALT-0-1-4-5 |
’ | Close single quote (apostrophe) | SHIFT-OPTION-] | ALT-0-1-4-6 |
“ | Open double quote | OPTION-[ | ALT-0-1-4-7 |
” | Close double quote | SHIFT-OPTION-[ | ALT-0-1-4-8 |
The design blog that connects the dots others miss. Written by Roger Wong.
If you’re new here, check out what others are reading in the Popular feed.