Motion Graphics, Typography

Re-Typesetting the Star Wars Crawl

December 10, 2009, 03:15 PM

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.

» 8 comments