Communications Studio Project 3: Typeface
--
9/29–10/1: Typeface spread intro
I started this project by writing an essay on Futura. It was supposed to be about three paragraphs of text, but I ended up writing way more and spending way too much time on this assignment because I got caught up in all of the different stories that make up Futura’s history. Now, we get to use this text and figure out how to best place it on a page in order to introduce the reader to our typeface.
Pull-quote from the assignment sheet: “explore broadly, print often, and share with others in order to inform appropriate and effective design decisions.” Good to remember, and applicable to every project.
We touched on the difference between legibility and readability. Casually put, legibility is the more technical measure of how easy it is to distinguish one letter from another, whereas readability is how easy it is to read larger amounts of text (words, quotes, chunks, paragraphs). Readability applies more to the comfort of the viewer as they are reading text: I think of my terrible old AP-level physics textbooks with condensed serif and small leading compared to the larger type and relaxed spacing in a lifestyle magazine feature. I want my spread to be as readable as possible. Since I’m not a newspaper, I don’t think I have to sacrifice too much for the sake of fitting in text, as I can always edit down my essay.
For our first sketches, we get to choose between Adobe Caslon pro, Garamond, Minion Pro, Meta Serif or FF Tisa as our body text. I tried each one in 10/12, just to see what works well with Futura. I have an interesting typeface in that it is designed for display, but also works well as body text. This means that it probably wouldn’t pair as well with another serif for body, since it’s designed to fill that gap itself, so I approaching this assignment I’m expected to choose a serif as a complement. I also personally prefer serif fonts for body text, but I’m trying to leave that out of it.
Garamond reminds of a children’s book, which is comforting to me but I don’t think it’s what I’m looking for. I like the spacing in Adobe Caslon and Meta, so I narrowed down between these two after a few more iterations, I decided on Meta Serif. Time to move on!
10/2: Sketching
Our spread design assignment is very open-ended, which is challenging because I like to design knowing the purpose of the product I’m making. I saw this freedom, however, as an opportunity to play with editorial/magazine type layouts, a format I’ve always admired. I pasted some pictures in my sketchbook of examples from NYT Mag and other publications, as well as the local CMU music magazine, The Cut.
Then, I just started blocking out space on some homemade thumbnail templates. I wanted to see how far I could push the use of negative space and break the built grid while still keeping it legible.
Working here was beneficial because I didn’t get caught up in Indesign playing with color and type size, but now I am eager to put everything on screen. It was also challenging predicting how many columns to use, and I’m worried that I’ll have to trim down my essay.
10/3 Moving to screen & first critique
Taking all of these thumbnails and translating them into indesign was more challenging than I anticipated, and I think this is mainly because of the issue of image. I could not figure out what kind of image would best compliment my essay. I realized a lot of my thumbnails counted on big, dynamic images that would dominate the spread and take up a lot of the space, but I didn’t have any!
Some of the things I looked for online:
- Advertisements that used Futura, ranging from the 1930’s through the ad boom of the 60’s and onto modern ads
- Specific ad: Volkswagen “Lemon” and “Small car”, since they are famous
- Famous film posters (Stanley Kubrick and Paul Rand mainly)
- Lunar landing model
I realized that a lot of the images were space themed. The poster for 2001 Space Odyssey practically matched the actual plaque used in the Apollo 11 mission. In fact, the typeface itself is frequently used by NASA and has a futuristic name, so I considered trying out this direction.
One drawback is that my essay doesn’t exclusively focus on Futura’s background with space travel, so focusing the entire spread on it might not make sense.
I am also concerned about the readability of the body text on most of my spreads. All of the type is has either auto-leading or one point increased, and is either 10 pt or 9 pt, but I still think it looks exhausting to read. I want to find a composition I am more comfortable with, so I can further narrow in on the right way to format my body text.
The critique brought up a lot of issues that we collectively struggled with, and I was grateful to get some individual feedback. One of the biggest things that the majority of us forgot about: white space. Many of the spreads had very little breathing room, mine included.
Some more things I specifically want to focus on, either that were talked about exclusively for my work or that I took from other critique.
- breathing room (again)
- exploration of form: “playfulness” feeling
- embodiment of the mood of the typeface: when you open the book, it should scream FUTURA
- readability: still challenging, or at least not easy, to jump into my body text and I need to change this
- more iterations on format: use negative space more creatively, don’t just stuff/stack the page full of content.
I do think that the colors I used made sense for the ultimate mood I’m trying to achieve, so I plan to keep them in mind as I iterate further.
10/9: Begin typeface video
I get to take a step back from the spread and start working on the 60-second type video we are creating with After Effects. I don’t have a lot of experience working with time and motion (except the times I’ve messed around with iMovie for school projects), so learning this new program and this new form of communication is definitely daunting, but exciting.
Given this, I was unsure how to approach the brainstorm part of this project. I got stuck sifting through hours of lofi jazz beats and boom bap drum solos on Youtube trying to find the right instrumental accompaniment to Futura. At this point, I am narrowed down to 3 different songs. Side note: Paul Renner, the creator of Futura, allegedly hated jazz music, but I still want to use it!
- “My Soul” by Thai Beats, which is a little jazzy but mostly an electro drum beat, which I think will work if I want a chill but modern feeling and a drum that accentuates the movements on screen
- “Goodbye” by Nicobox: My personal favorite, it uses jazz piano in an interesting way, but I’m wondering if it’s too dainty for the very serious geometry of Futura.
- “All Night” by Parov Stelar (or “Libella Swing”): great jazzy, upbeat introduction but gets very electronic pretty quickly throughout the song, and I’m not sure I want that either.
- “Relax with You” by Thai Beats. More mainstream lofi beat, but it could work. I prefer more jazz elements though, but maybe when I start working in after effects this will change.
- The soundtrack from Birdman! My TA recommended this after he saw me listening to low quality drum loops on Youtube.
I keep hearing my classmates play music aloud and it makes me reconsider my own. This is challenging guesswork, I think I really need to just try things out as we build.
Moving on to storyboarding, I noticed right off the bat the limitations of pen and paper. It was good to start drawing out frames in my sketchbook, but in order to flesh out my ideas I moved to a quick template I made on Illustrator.
After learning the basics of After Effects, I can tell that I’m going to want to have cues for myself as I’m struggling to figure out the program: I’ve been referring to a rough script I created while I storyboard some ideas further, but I think I need to revisit the script as well.
10/11: More After Effects, Script Refinement:
I’ve finally found a soundtrack! I found a studio who makes music specifically to accompany videos, and picked a track out of their “percussive” section. I still have to start building my video to the beat of this music, so I’m really hoping that is upbeat, fast-paced drum sequence will work. I talked with a couple people and Vicky today and decided that simple drumbeats match the geometric nature of the typeface, and the shapes that I want to animate into it, so this makes sense.
In illustrator, I started making some shapes that I feel more excited about. I think I’m going to play around with simple opacity because it allows the viewer to understand how the shapes overlap, which is something I can use to reveal more information about the way Futura is built and it looks neat when animated.
Something not super fun that I learned: If I want to work in the computer lab, or transfer files back and forth from there to my computer, I need to use the same typeface or just create outlines for everything I export from my computer. I have been using Futura PT, whereas the computer lab owns Futura STD. So I had to go into illustrator and change everything, which made me realize there are tiny nuances in the different versions of Futura that completely mess up my spacing. Typography is very nitpicky.
Writing a script for this project odd. I;m not sure how much I’m helping myself by writing something like this:
Right now I’m just bouncing between storyboards and jotting down ideas on the script, with neither version very finalized yet. In the coming days, I think this process will require some refinement in order to get this stuff done.
10/12: Back to the spread
Time to revisit the spread!
After spending so much time focusing on the motion of the text, it’s interesting to go back to a spread. I thought it would feel simpler, but instead it kind of feels like a static break from movement. I feel like I‘ve been working on a TV episode, and now I’m editing the stills that feature the set design.
I moved forward with using the letterforms as objects and shapes that serve as an illustration for the essay. Here is my next set of iterations:
Out of the top four, I personally enjoy the first one because I think I pushed myself the most with little design elements that inform the reader about the design of the type, but it’s still off in a lot of ways and I think needs a lot of tweaking to work. I think the most successful spread as far as negative space and ease of reading is the second one. That was one of the most challenging to create because the huge amount of white space if daunting to me.
Moving forward: I got some feedback, and now I’m going to focus on exploring these letterforms even more. In a lot of the arrangements, some letters dominate while others aren’t really popping (or participating at all), so I need to unify this.
There are also a lot of little things I want to reconsider. The way I formatted my pull quote, for example. There is an entirely different feel and mood depending on where it is broken up, as I learned during critique.
But for now, the main focus is legibility vs readability.
**
10/13 The challenge of illustrating with type.
Video progress isn’t easy to record. Time seems to take on a new dimension when I work down in Reese: I think I’ve spent 10 minutes in there and then look up to see 2 hours have past.
Luckily, the song I landed on is really serving me well. It has a strong drumbeat and increases in complexity, volume and tempo as it progresses, which builds energy throughout the video. However, this is sometimes hard to keep up with. I have to make sure I give the viewer time to read everything and that there isn’t so much movement that it becomes distracting from reading or using the actual text. I’ve discovered how powerful working with motion is, which makes returning to the spread less and less exciting the more time I spend animating this typeface.
I’m noticing similar challenges with both the spread and video, and I think the biggest one popping up right now is the issue of using text for multiple purposes. Obviously I am using text in both in order to tell a story with words, but the letterforms themselves are also my illustrations for both projects. I can’t easily look at the shape of the Futura capital “M” exclusively for it’s form, because my audience is also going to read it is an “M” and string it along with the other letters I use. As I switched back to the spread, I realized I was spelling a lot of words unintentionally while I was throwing them around of the page, which posed the question: should I lean into this and form an actual title out of my sprawling letter illustration, or should I work to make it intentionally unreadable so that the audience focuses on the typeface itself?
I iterated more, focusing on this question specifically.
10/14: Spread: Let me breath
In the process of rapidly creating ideas, I ignored a lot of alignment rules and didn’t bother to adjust my baseline grid. I figured it would be a final step that I could go in and correct once I’d established the rest of the composition of the page.
But since the text and the illustrations on the page interact so much with each other (and are very directly related), when I would ask for critique, viewers would immediately get distracted by the errors in the body text and it would limit their ability to focus on the rest.
I needed to refresh myself on how to create a baseline grid and how to format paragraph styles so that my new paragraph breaks weren’t so distracting. An important little nugget of knowledge I gained and won’t forget: if you do it right, 8 pt type is not that small. I was concerned that I was shrinking everything to illegible sizes, but after printing out a couple spread sin 10 pt, 9 pt and 8 pt I realized that smaller type can still stay legible and readable, even very comfortable, if the column width is chosen well and the leading is thought out (generously, I think I prefer).
I learned to count the number of words in a line: I thought six or seven looked reasonable. I wanted to lean towards smaller columns because I liked the idea of building shapes with the blocks of text too. Not too much, since the body text is designed to be read, but enough that the geometric theme is consistent throughout the page. If I push it too much, however, it looks like a staircase. It’s a game.
I printed out four more iterations. I wanted to try a little bit more with combining the spread and video elements together. I explored a bit with translucent shapes, which are super dominant in my video.
10/15–16: The Beauty and Terror of After Effects
I am continuing to rapidly learn this program, which means that after an hour of working on one section I can go back to a previous part of my video and approach it with an entirely different and improved skillset. This is also means that overtime I rewatch my video, I find something I had created that absolutely disgusts me now. Here is the beginning of one of my first exports.
It’s offbeat, which I have to go in and fix, and it’s also chopped up. I’m learning more fluid ways to transition, including my favorite little position effect: the drumbeat wiggle (I made this up, it’s just a single-frame position shift that I give to some objects, as shown below in my improved intro:
I also focused on using humor, and I thought a lot about the different ways I could do this. I tried to choose a color palette that is almost like a classic Bauhaus poster, but I wanted it to be a little lighter and a little more playful, to represent the more causal nature of the video and to allude to the fact that Futura was created during the rise of the Bauhaus and modernist design thinking, but wasn’t technically directly part of it. This might just be a touch that only I will recognize, but worth a shot.
I was referring to my script for direction as I was building the video for about hallways through, and that I started to add elements based mainly on what came pretty organically from the previous feature. When I was building with 10 seconds left to fill, I had to make some decisions: I could include;
- the capitals are built on Roman lettering
- versatile for body text or display
- Something about the different between geometric sans serif and grotesque
- How Futura withstood Nazi takeover
- How it lands on the moon
- The different weights and versions (I narrowed this one out fast: I realized it isn’t that important for the viewer to see and explanation for Futura Heavy Condensed if it appears somewhere in the video, which it does. I decided that this video should be an explanation of the characteristics of the typeface, not a study guide).
I decided to be quick about it and not focus too much on the typeface’s history. I want to reader to feel that efficient, forward energy of Futura and see how it’s so serious and playful at the same time. I decided on display and body text and a fast-paced run through of Futura’s influence, like a victory lap.
The finals:
I enjoyed this project. I definitely enjoy Futura, and I now more so than ever I respect typeface designers. I think one of the biggest takeaways I have is that motion and sound are powerful resources for communicating a certain feeling, especially when you want to create character. This project was also a big test of my time-management techniques, and my willpower to put in the extra hours into the iterations I create, even if it means sleeping less (All three studios this week got a little gross with over-tired students, but I think we’ve made some good work).
