Making the most of inspiration when it strikes
Understanding why your gut tells you explore
In the second case study on going in-depth about design decisions, we will talk about how to be more aware of what’s firing in our minds when inspiration strikes and how to use creative momentum while being purposeful with your decisions. We’ll also talk about working with existing assets and letting that guide your problem solving as it relates to typefaces, colors and compositional methods.
Inspiration strikes at the strangest times. I was watching The Thin Blue Line several months back, which is one of my favorite documentaries. Near the end, director Errol Morris plays a recording of a conversation he had with David Ray Harris (instead of me describing why Harris is involved, you should just go watch the film). Morris supplements that audio with a few shots of his micro-cassette player—an Olympus Pearlcorder L200.
The various shots are overlaid with subtitles from the interview (probably set in Frutiger?), and the whole thing is cast with a blue tint. It’s a simple yet beautiful sequence, and shows off the artful yet never distracting aesthetic of the cinematography in the film. I think Frutiger looks beautiful here, but I was struck by the notion that the stills from that scene would pair fantastically with the in-development typeface I lovingly refer to as €urobüng. Maybe it’s because right now €urobüng is my hammer and every possible design is a nail I can smash with it. But I digress.
Over the past few years, I’ve tried to make a point of stopping myself to analyze these creative urges when they happen—to try to distill what it is about these stimuli that has gotten me so excited and eager to play. I wanted to synthesize why I intuited €urobüng would pair well with the screencaps into some learnings I can pass along to you, dear reader. So let’s start digging, starting with the formal aspects of the elements involved.
The L200 is a nice piece of industrial design—durable, functional but clearly designed with the intent of having a clean aesthetic. Morris elevates it with the way he shoots it in the film, and the coloring goes a long way to making it feel more stylish than it actually is.
Frutiger was a good typeface pairing for it in the film—its clean lines and balance of humanist details and sharp angles reflect the tone of the device. Tactile but practical. Something like Helvetica likely feels apathetic in this scenario, but Frutiger has some humanity to go along with its clean styling. Look at the G in “Good Possibility” in the gallery above and note how sleek it looks without trying too hard. It’s elevating the content and presenting an aesthetic point of view without imposing on the words being said, reflecting the way the film is shot.
€urobüng isn’t practical, and it’s also trying very hard, but it’s also sleek and its charm comes from it’s interesting methods of slicing down strokes, rather than adding more elements to the glyphs. In that way, it shares a certain sleekness with Frutiger. I think I saw it as a synthesis of something like Frutiger and the hyper-stylized typography that many of us think of when we think about type from that era. I wanted to see how the over-the-top nature of the typeface would pair with the more utilitarian imagery of the recorder. Its incised details and sharp angles resonate with the cool tint to the imagery and play against the funky lettering on the L200 (one of the best things about industrial design in this era is the over-the-top lettering that accompanied so many consumer electronic devices).
€urobüng is based on Antique Olive, a design from the 60’s that saw heavy use in the two decades that followed. Antique Olive is a strange creature, with an A that looks like it’s been given a buzz cut, and characters like G, C and O bulging with uneven strokes like over-ripe fruit. However quirky it is, it does share Frutiger’s restraint in the way its letterforms are constructed—you won’t find superfluous lines in either design.
€urobüng takes Antique Olive as a base and cleans up some of the bulbousness while amplifying the contrast and eccentric details, like the counter in the A that looks like a splinter trying to push its way out of someone’s epidermis. One of my favorite things about both designs is how the s almost feels like it is upside down. Details like the tippity-top of the t looking like it’s being shaven off give it an almost stenciled look, which also fits into the aesthetic I was aiming for.
If I want to prove that €urobüng will jive with this imagery, I have to figure out what I’ll be saying with it. Names of objects are always a nice place to start when doing this type of free-play design. How does the name of the device look in €urobüng?
The type gods smiled upon us. Some of the most interesting characteristics of the typeface are showcased here—the “v with a tail” design of the y, the way the shoulders on the m cascade out from the horizon, and the strange underbite-y tone to the e, c and 2 are all on display. It reads like the murdered-out version of a quirky typeface from that era, which is perfect.
The typeface basically forced my hand on what the subject of the writing on this piece would be, and the shot I used for the background was the highest quality capture I could find that was clean, without subtitles (taken from this essay by Jennifer O’Meara for Frames Cinema Journal). The framing of the shot also forced me to go with a centered composition. If I tried to go asymmetrical, there was a lot of tension between the center thrust of the L200 in the shot. I also noted the more interesting parts of the design of the recorder and tried to avoid covering those up. Ultimately, I felt the best solution was to push the elements into the corners of the frame to fill the dead space in the image, and full-center Olympus Pearlcorder L200 to get that classic 80’s symmetrical vibe going.
I did some digging for marketing materials and product info on the L200, trying to find a range of copy of strings to use, from marketing to technical specs to force some variety in the typographic tone. I found the “Let the diminutive L200 handle all your business applications” line, as well and the tertiary bits of info I scattered around the edges of the design.
At first, I tried setting everything in €urobüng, but at a certain point it became diminishing returns (though there were sections like “OLYMPUS TOKYO” that really showed off the strange eccentricity of the typeface that I hated to give up). To maintain legibility at smaller sizes, I had to used the toned down contrast weight of the family, which transforms it from its fabulous self to a capable Antique Olive revival. €urobüng is most special at display sizes where all the unique shapes and contrast of the display version can be clearly seen. Maybe a second typeface could help the display weight stand out more.
So, what should the supporting typeface be? Something that would fit into the time period, work at smaller sizes, and nicely contrast the tone of €urobüng, ideally. Once I had IDed the subtitle font from the film as Frutiger, I went back to see how it felt in the design. It had too much of its own humanist voice that felt mealy-mouthed against the stronger version of the idea established by €urobüng. I’d need something more purely neutral in visual contrast and in personality.
When I describe “neutral” typefaces, I’m typically talking about typefaces that fall somewhere inside of a humanist/grotesque venn diagram. Designs that hew strictly to any one of those genres have distinct tones and personalities that can be difficult to use alongside others. However, when you find typefaces that merge elements multiple genres, you can get designs that aren’t so dogmatic in their approach and therefore have a mellower tone.
After some searching I settled on old faithful, Söhne, to serve the supporting role. I love using Söhne in multi-typeface projects, because it has a lot of the grotesque characteristics I love while being more “open” and narrower in width that most examples of the genres (to understand what I mean by “open” look at how “uncoiled” the s is in the middle example, Söhne, compared to Founder Grotesk below). It thrives in a variety of scales and strikes the right balance between interesting details and legibility. Söhne also has absolutely stunning numerals, and the tertiary text makes good use of them. It plays the role of the quiet workhorse and its rounder construction contrasts with €urobüng and sets that typeface off even more.
If you’re paying attention, you’ll notice there’s another change here—I moved the tagline to the right half of the bottom of the composition. The reason why is that the composition was feeling “front loaded” with the largest elements on the left half and the scale trailing off as you move right. This creates a situation where the eye keeps being pulled back to the left side of the composition and the other elements feel lost. If we simply move the larger text to the opposite side, we make the composition feel more balanced and give the eye more opportunities to wander through the type elements. In designs like this where the tertiary information is atmospheric rather than narrative, the order of viewing isn’t as crucial, and you can afford to guide people through an asymmetrical route and let them discover the smaller elements at their own pace.
Looking at the wireframe of the layout above, it becomes very clear that at this point the design was lacking some color, hierarchical drama, and needed some non-linear elements to give the viewer some variety. To address the first two issues, I tried layering €urobüng with my existing type. I chose “1983” as the string, since it was the year the Pearlcorder L200 was first sold, it was short and easy to set large, and showed off several unique numeral designs. Unfortunately, due to the centered framing of the composition the layering was obscuring the image and breaking the spirit of the initial endeavor.
I went back through examples of retro type styling and was reminded of the Datsun ad (shown earlier in this article) which outlined Antique Olive. How obvious! If I outlined the type I got to have my big type without blocking out the image. Luckily, €urobüng handles outlining in the same fun way its ancestor did.
Now to the final issue: adding different shapes to the composition. Whenever I can, I like to break up my type compositions with little badges or graphic elements, just to add some different shapes to spark varied stimulation in the eye. Your brain responds to linear objects differently than shapes (did you know that the brain has distinct reactions to different shapes as well?).
I was rummaging through old badges I had created to get a feel for what shapes/density would feel right in the composition, and I rediscovered a recycling badge I made for the IBM Mobile Innovation Lab from several years back. Conceptually it felt appropriate, since this design was re-using a frame from a documentary, was intended to be mimicking an aesthetic from a bygone era, and used typefaces that are ancestors of older designs.
I wanted to have another non-text element on the upper half so the recycling badge didn’t feel stuck-on or out of place. The design was having another balance issue with it anchoring the top-left. The first few things I tried felt really heavy, and made the top half feel overworked in comparison to the lower half.
I spent some time looking at more details on the L200 and on microcassettes in general, and I found a few compelling little graphic details. On Sony’s microcassettes, “MICROCASSETTE” is encased in an oval shape, a detail that reminds me of Nintendo’s logo. I also found a shot of the back of an L200, which has “VCVA”—short for Variable Control Voice Actuator—encased in a rounded rectangle (VCVA technology was created by Olympus and prevents the recorder from recording silence, which would waste tape and power). Mixing the two sources of inspiration, I brought over the VCVA detail but used an outlined containing shape rather than filling it in.
Once I had assembled all of my elements, I was pleased with the interaction between the text and the image, but I wanted to take the integration of the two a bit further. I brought the text into Photoshop and added some grain and a slight blur to give it the same foggy effect of the subtitles from the film.
I was feeling like this was pretty resolved, but there was a nagging sense it was missing something—some element of depth or dimensional space to really hit the 80’s theme home. Adding the brightly shaded outlined type reminded me of the vector grids that were staples of the decade. Since the L200 was pushing back into space, shouldn’t I try to create some dimension with my design as well? My struggle was that I’m pretty useless at executing on these kinds of aesthetics, and I certainly didn’t want to be kitschy in my execution.
Fortunately, someone else had already solved this design problem for me. A late night tumblr excursion brought me across this gif from Anton Synytsia for МОРАЛЬ. I couldn’t help but laugh at the serendipity of finding it—he was using outlined type as a background element and creating depth by simply animating the type stepping down in size, creating the illusion of it vanishing into the distance. Thankfully, this kind of animation falls within my limited skill-set, and after some quick Photoshop frame animation, I had replicated the effect. It feels very familial of the era and was a nice, simple way to add some dynamism to the design.
As I write more of these it’s fascinating to synthesize how different projects originate from different motivations: A desire to play in a certain media or form-factor, to honor a subject matter, to communicate a message, play with a specific typeface, or try out a specific aesthetic amongst countless other motivations. In this case, I saw an opportunity to use existing imagery to showcase a beloved typeface. This project was a good mix of free-play and constraints — the imagery was tricky to compose around, but there was plenty of room to play with typefaces, shapes and the final layers gloss for presentation.
As I said in the first article, it’s important for designers to be aware of why we are inspired by certain things and why we end up making each decision that shapes a design. As fun as going on a creative tear is, try to make notes about the different things you try and why. The simple act of acknowledging them in the moment will help it anchor in your brain and help you avoid ruts and low-potential directions in the future.
If you want to another case study like this, check out the first entry in this Design Details series linked below.