“A delightful surprise—I found myself plunking around with this, just curious to see what it would do next. It wasn’t long before I was calling others to my desk to take a look.” —juror Eric Karjaluoto
“Unique, intelligent, fascinating, unexpected and beautiful—everything typography should be.” —juror Tali Krakowsky
Overview: Ever since Commercial Type started licensing its fonts for use on the web, the foundry’s designers have been thinking about the aesthetic possibilities for typography on the web. They enlisted graphic and type designer Wael Morcos to explore the ways type specimens can be experienced differently on the dynamic and interactive canvas of the Internet. Morcos envisioned sixteen microsites, each showing a different family from the Commercial Type library and highlighting a different aspect of its personality.
• The microsites include a repurposed chat bot from the 1960s that acts as a therapist, a poetry generator and a train schedule board that flips through the complete alphabet before displaying the right letter.
• Every piece of text in the collection of microsites is rendered with Commercial Type webfonts.
• The About page of each microsite includes a short explanation of how the site was built.
Comments by Kat Lee, Christian Schwartz and Branimir Vasilíc:
What were the results? “We’ve had around 22,000 unique visitors since we launched the site, and a noticeable drop in e-mails inquiring if we license our fonts for the web, so we feel like the project was a success. The user-generated content has been funny and scary, in equal measures.”
What software, back-end technology and programming languages were used? “The sites have a Ruby on Rails back end, but most have interactive functionality that is fully implemented in client-side JavaScript and CSS3 effects. We didn’t use any additional libraries other than jQuery. The Austin, Gabriello and Stag layouts depend on server-side functionality because we use external services or need to process user input on the server. For example, the Austin site uses Google’s search API to retrieve images relevant to user input, which are then analyzed with ImageMagick library to generate layout colors. Since we were pushing some browser features to their edge, we spent a significant amount of time trying to make things look and function as consistently as possible across browsers.”
Were there any specific demands that made the project easier or harder? “Having to account for real-time user interaction isn't usually a factor in traditional copywriting. Creating content for the Showcase required writing short stories and poetry that users would actually engage with, ‘good’ creative writing drawn from the tenets of effective user-engagement copy. We aimed for copy that was a little more highbrow than your standard online fare without getting pretentious—just offbeat enough to be engaging.”
