Project Overview

Commercial Type Showcase is a set of sixteen microsites for Commercial Type webfonts library. The microsite explore how a type specimen can be experienced differently when paired with the abilities of the web. Each of the microsites shows a different family from the Commercial Type library and highlights a different aspect of its personality. The microsites range from: a therapist: repurposes a chat bot from the 1960, a train schedule board: flips through the complete alphabet before displaying the right letter, and a poetry generator: Generates poems by clicking and dragging.

http://showcase.commercialtype.com

Project Details

Since we started licensing our fonts for use on the web, we've been thinking more and more about the aesthetic possibilities for typography on the web that come with a dynamic and interactive canvas. We wanted to explore what is possible in the ever-changing world of design for the screen. In no time he came back with designs for sixteen microsites that show a different family from our library.

Every piece of text in this collection of microsites is rendered with our webfonts: no PNGs or SVGs are used (except in the about pages). For those of you who want to peek under the hood, we included a short explanation of how each microsite was built on the About pages, along with some additional information about the typeface itself.

Response:

The response was positive overall, though it appeared that some people thought the table of contents was the whole site. Though our aim with the microsites was to draw web designers' attention to less established and popular parts of our library, the most popular microsites have been for the most popular families: Atlas and Graphik. The user-generated content has been funny and scary, in equal measures. Many of the submissions on the Platform microsite have been clever and surprising. People also have a lot of ideas about where you can put various parts of your body.

The Showcase didn't go viral quite the way we hoped it would, but a good number of people have shared the Graphik microsite. It's amazing to see how engaging the ELIZA program still is, in spite of the fact that it was first developed in 1966!

We've had around 22,000 unique visitors since we launched the site. We've also seen a noticeable drop in emails enquiring if we license our fonts for the web, so overall we feel like the project was a success.

Technology:

The sites have a Ruby on Rails back-end, but most have interactive functionality that is fully implemented in client-site JavaScript and CSS3 effects. We didn't use any additional libraries other than jQuery. For the Graphik chatbot, we customized the JavaScript implementation of Eliza by Norbert Landsteiner. The Austin, Gabriello and Stag layouts depend on server side functionality where we either use external services or have to process user input on the server, or both. For example, in the Austin site we use Google's search API to retrieve images relevant to user input, which are then analyzed with ImageMagick library to generate the layout colors. Since we were pushing some browser features to their edges, for some of the layouts a significant time was spent trying to make things look and function as consistently as possible across browsers.

Text and content:

Having to account for real-time user interaction isn't usually a factor in traditional Writer/Reader dynamics. One writes; the other reads and is free to leave a scathing Amazon review afterwards. Creating content for the Showcase called for short stories or poetry that would not exist in a void, a "Good" Creative Writing drawn from the tenets of Effective User Engagement Copy. Kind of like trying to be eloquent in front of strangers. The copy aimed for something a little more highbrow than your standard online writing game fare (if there is a standard) without getting pretentious — just offbeat enough to be engaging. Maybe funny too, though I think I landed somewhere dark of that.

View More Information

• x Website