11/14/19
After Project 2, I was introduced to the third project: Typeface. We were assigned one font and was asked to make a list of adjectives that describe the typeface. Then, we had to write a narrative essay that highlights the unique characteristics & personality of the typeface assigned to me. Then, we had to condense the essay in a brief statement of 50–60 words (whether they are phrases, poetry, prose, bullet points, complete sentences, rhyme, reason, or train of thought).
11/16/19
List of Adjectives:
-cute
-plump
-round
-short
-chunky
-sans serif
-modern
-informal
-variant strokes (i.e. in the letters p, g, r, a, h the rounded and straight parts of the letter differ in stroke/line weight)
-bouncy/ fun
Essay:
Brief Statement:
Proxima Nova, a hybrid of Futura and Akzidens Grotesk
Released in 2005 by Mark Simonson
described as a combination of geometric appearance with modern proportions
Named 2013 Font of the Year by Typ.io
used by over 30,000 websites
works well for screens, great flexibility, trendy
Proxima Nova, the new Helvetica
11/19/19
Images, Type Setting (for essay), Layout Sketches
After writing our essay, Vicki sent revisions and edit suggestions for a clearer essay. This helped me to take out unnecessary information about Proxima Nova and rethink about my brief statement. Once the final revisions were made, the following is the edited essay and brief statement.
Brief Statement (59 words)
Proxima Nova, a hybrid of Futura and Akzidenz Grotesk
Released in 2005 by Mark Simonson
Combines a geometric appearance with modern proportions
Named 2013 Font of the Year by Typ.io
used by over 30,000 websites
works well for screens, great flexibility, stylish
something kind of invisible that doesn’t call attention to itself
Proxima Nova, the new Helvetica
Essay
In class, we did an exercise where each person from the specific typeface and column width had to choose one type setting that worked best and did not work in terms of readability versus legibility. We did this twice for type size and type leading. For Proxima Nova, I learned that the typeface has a very little stroke contrast, a large x-height, and simple, clear letterforms. Because of its tall x-height, the typeface is able to be seen in smaller type sizes with appropriate leading. For the next class, we were assigned to try different type settings for our typeface with our own font so that we can use this type setting for our spread.
Typesetting
During this exercise, I tried five different type settings with my essay with the Proxima Nova Regular font. I started with 10/12 (auto), then raised it from there, setting it to 11/auto, 12/auto, 14/auto, and 18/auto.
When I first printed these out, I decided to go with 10/12 (auto). At first, I was skeptical about a 10 point font size because I was so used to the MLA format 12 pt Times New Roman for a 8.5 x 11 paper. The fact that I was using a 10 pt font felt weird and uncomfortable, but I decided to use it because it was still readable due to the characteristics of Proxima Nova.
Images
I mainly used unsplash.com to find my images. When looking for images, I searched words like future, modern, round, curved, invisible, visible, design, texture. At first, I wanted to search for an image that was bright and round to emphasize its popular use in branding. As I was searching and collecting, however, I realized that finding an abstract image could be interesting as well. I wanted to emphasize Proxima Nova designer Mark Simonson’s description of Proxima Nova as “I like to think Proxima Nova could be used for anything, but in general it works best in situations where you want something kind of invisible that doesn’t call attention to itself.” I thought his quote was interesting because something invisible can’t call attention; in some way, it has to be visible so that it can call or not call attention. This abstract concept led me to search for round architecture that combines geometric form also. I believed this abstract roundness and geometric architecture form implicitly described Proxima Nova well. I did not have the intention to search for white/beige/ivory images, but the abstract architecture images all ended up being very subtle and low in color vibrance. I did not mind this lack of bright color because it seemed more minimalistic, modern, and sophisticated.
Layout Sketches
11/20/19
After making the layout sketches I wanted to briefly try a few spreads on my own before getting to class on Thursday. I tried four different spreads, most with images being a majority of the spread. I tried to think of interesting ways to use the 7 column grid and think of ways to break that with the image versus text.
11/21/19
In-Class Work Time & Individual Feedback
Thursday’s class was really helpful because we had in-class work time as well as individual feedback from Vicki, Sherry, Mason, and Andrew. In addition to the four spreads shown above, I tried making more spreads from the layout worksheet assigned in the beginning.
Feedback from first 4 spreads made before coming to class
-everything fills the pages too much!! more “purposeful white space”
-try breaking the margins and making more interesting layouts
-text size is too big!! → redo the type setting exercise
-don’t use “already made” glyphs
-have a consistent column number for text
-don’t be too limited to the margins & columns
Re-trying type setting
While looking at my initial spreads made before coming to class on Thursday, Vicki and I discussed my type setting for the body text. It was set to be Proxima Nova Regular 10/12 (auto). We talked about how Proxima Nova can be seen at a way smaller font size (even 7.5 or 8!) because of the tall x-height and the low contrast in stroke. She encouraged me to redo my type setting exercise, so I tried reducing the font size by a significant amount. I tried setting all of the text in the 3 column grid and using 8 different variations of text size and leading. After re-doing the exercise, I was set on the 8/10.5 type setting. I was surprised by how much I could reduce even more from 12 to 10 to 8. Resetting the type setting was very helpful for me because it allowed me to try more layouts that I wanted to make from my initial layout sketches.
Spreads from in-class work time
Feedback Summary
-use a consistent column width for text
-make sure the column width is not too long for the text
-abstract images are more engaging than the colorful glyphs
-use a consistent margin width between body text
-leave more space between image and text
-try using graphical elements along with images to emphasize rounded characteristic of Proxima Nova
Based on the feedback that I received, I was able to choose a layout that I could make several iterations of.
With this layout, I was already starting to make use white space more appropriately and effectively when compared to my initial spreads. Andrew and I even discussed about the possibility of my poster being black & white and still being effective if I make enough iterations and arrange elements appropriately. Discussing the possibilities with this layout made me excited to keep moving with this project.
11/22/19
Meeting with Vicki & Self-Work Weekend
I met up with Vicki Friday morning to talk to her about my different iterations. With these set of 5iterations, Vicki and I discussed several things that needed to be fixed: flow of body text, starting point, custom tab indentation, consistent width of columns for text, using “purposeful white space” more efficiently. Honestly, I think I had the most difficulty with the purposeful white space and the starting indication of body text. I really liked the minimal yet expressive aspect that is shown through my spread, but I did wish there was a pop of color for the text indication. However, any color that I used for the first word of the body text seemed too sudden and random. I wanted to hold off on the color for now and get confirmation about my layout first on Tuesday with the guest designers & Vicki.
11/26/19
In-Class Discussion & Feedback
Based on the iterations previously made and the feedback given with those iterations, this is the spread that I came with in class for our class group critique. I tried using several “pop colors” to show a starting point in body text, reset the tab indentation, and made sure the column widths for body text was the same. In addition, I made sure to cite the quote and add footnotes. Furthermore, I tried to use more of the margins rather than just the columns and experimented with the “Proxima Nova” title almost being off of the page to give it that “pushing” and exciting moment amongst the quietness of the spread.
Summary of feedback I received from Vicki, guest designer (I forgot his name I’m so sorry omg), and class:
-interesting layout, just try to find a more engaging starting point of text
-increase footnote text size & align with rest of body text
After today’s class, I decided to pause with the spread and shift to focusing on Project 4. As of right now, this is my final draft for my spread.
Project 4: Time & Motion
11/27–12/2: Working Back at Home
In order to start the video part of this project, Vicki really emphasized the importance of storyboarding. At first, I used the 2 storyboard templates that I got in class to plan out the different scenes I wanted to add in the video. I went back to the brief statement reduced from my essay to see how I could group certain facts together.
Brief Statement:
Proxima Nova, a hybrid of Futura and Akzidens Grotesk
Released in 2005 by Mark Simonson
described as a combination of geometric appearance with modern proportions
Named 2013 Font of the Year by Typ.io
used by over 30,000 websites
works well for screens, great flexibility, trendy
Proxima Nova, the new Helvetica
When looking at my brief statement, I realized there was not much technical information about Proxima Nova, such as the x-height, ascenders/descenders, various weights of the family, etc. Also, instead of saying that it is used by over 30,000 websites, I wanted to show this by either adding names of all the websites and adding examples of it in different context use.
From the brief statement that I made at the beginning, I made a list of additional information that I believed was crucial. After making this additional list, I used my initial brief statement with this additional info to make a revised brief statement. (58 words)
Released in 2005 by Mark Simonson
Named “2013 Font of the Year” by Typ.io
Used by over 30,000 websites
Combination of geometric appearance and modern proportions
Tall x-height
7 widths: thin, light, regular, semibold, bold, extra bold
Each width with italics, small caps, condensed, extra condensed
Modern and stylish, yet simple and versatile
The new Helvetica
Proxima Nova
(credits)
When viewing previous examples, I saw some that revealed the name of the typeface at the beginning, middle, and end. I chose mine to be at the end because Proxima Nova is so commonly used and can be recognized by viewers from its familiarity and popularity.
After making my storyboards, I realized how easy it was to choose what to write down (what I wanted to tell) but it was so hard to visually portray those descriptions (showing). In order to improve the way I visually see my video, I decided to use Keynote to make a digital storyboard, using each slide as a slide for my analog storyboard. Using Keynote helped me to also vision the transitions; the platform was a middle step going from handwritten to AfterEffects.
12/5/19
Class Work Day & Meeting with Vicki
In class, we got a lot of time to work. Personally, it was a chance for me to catch up on my work because I was behind from missing class on Tuesday and preparing for a presentation and business test that I had on Wednesday (yesterday). To get caught up, I wanted to make my storyboards really accurate so putting it together in After Effects would be easier.
Even when I used Keynotes, I realized I had a hard time of showing versus telling. After talking to Vicki about my first storyboard, we talked about taking out more unnecessary text and using the text as glyphs so that it would be more showing and not telling. Also, I did a study of the sizes of Proxima Nova letters to fully understand what “modern proportions” meant.
Although I am a bit behind, I wanted to fully understand everything about Proxima Nova and be organized with my info first and then continue to catch up.
12/6/19–12/8/19
Storyboard Finalizing
Instead of continuing to use Keynotes, I switched to Adobe Illustrator so that I could make my own visuals that could possibly be used in After Effects. In this second, more detailed storyboard, I thought of transitions, animations and other effects that could be used in my video. I played with text size and weight, movement, scale and a pop of red color. I want to sync the red color with the starting point indicator of my body text in my Proxima Nova spread.
I contacted Vicki over the weekend to ask for feedback about this storyboard and she was able to call me to discuss some important things! (Thanks, Vicki!)
1. the boxes used to measure proportions of the letters are wrong because the width and height of the rectangles are not the same (double check)
2. the font is too big and wide sometimes (think about the screen; wide view)
3. show more of the “contemporary” letters and the thinner links they have (SHOW more)
4. play around with the word “invisible” through effects/animation
5. consider whether the two ‘I’’s are necessary in my ‘the new Helvetica’ slide
6. the tracking in “geometric appearance” makes the word very hard to see and comprehend, especially when shapes are used together with the font
Using these considerations, I started building my video because I wanted to fully have time to animate and get used to After Effects.
Music Choice
An important part of the video was also my song choice! At first, I was thinking of something quiet and calm or trendy and flashy. I first used key words on Spotify like “fashion show bgm”, “fast instrumentals” and “jazzy and trendy”. I began with fast and exciting music because of Proxima Nova’s stylish, modern and trendy aspects. Below is a list of songs that I gathered for possible use:
Say My Name- ODESZA, Zyra
Invisible Song- Sam Cohen
Then, I looked for softer songs. I wanted my video to go along with the calm, limited yet expressive characteristics of my Proxima Nova spread. I wanted it to be clean, simple and sophisticated. I began by searching piano instrumentals. I believe that a piano has a strong intensity levels and can express delicacy along with boldness very well. Going from instrumentals to classical music, I made my own Spotify album of “Proxima Nova” to listen to my gathered songs more closely.
After a lot of consideration and listening to the same repertoire of songs over and over again, I decided to go with a classical music song: Preludes, Book I, L.117: La fille aux cheveux de lin by Claude Debussy and William Ogmundson. The rhythm, flow, dynamic and intensity that this piano song contains was calming and almost charismatic. It was not a boring song despite it only being played by the piano. I thought it was almost ironic how Proxima Nova is such a modern font used so commonly today but how it also fits well with the vibe of such a classical song. I really enjoyed picking this song for Proxima Nova.
12/8/19–12/9/19
Constructing the Video
Making the video was definitely not easy. I went back to Andrew’s screen recording videos a lot to make sure I was working efficiently and accurately. I saved over 20 versions so that I would not lose my file. While working with After Effects, I realized that I was getting faster at animating as each scene went by. I was getting used to the program and I actually had a lot of fun animating elements for a visual understanding.
I kept the comments that Vicki gave me over the weekend, especially focusing on the placement and width of the text. One struggle was to match the timing of the text to the music. It was fun to work on but I had to be so precise about where I put the keyframes so that words would appear and disappear at the right time. Despite the hardships, it was fun getting into the rhythm of it and making the video complete! My scenes are mostly similar to the ones from the Illustrator storyboard; the only changes I made were the placement of some and how it relates to visuals/glyphs.
password to watch Vimeo: 1234
Going Back to the Spread:
After I finished making my video, I went back to my Proxima Nova spread. My main focus was to make the starting point of the body text clearer. Previously, I tried adding color, stroke, no-indent, etc. However, none of these methods seemed to be the perfect one. I tried adding a drop cap in the ‘P’ of “Proxima Nova”. It honestly looked better than I thought. I tried the 2pt. and 3pt. drop cap, printed them out, and compared sizes to see which indication was clearer and not too overlapping with the main title of “Proxima Nova” at the bottom.
Reflection: Although I believe we had the shortest amount of time to go over and make a final project out of our typeface, I actually really enjoyed this project! I do wish that I was never sick so I could’ve been there for that one class I wasn’t able to go, and so that I would have never been a bit behind after that day. If I had more time, I would’ve seeked more tips/ways to enhance my animation aspects. Although my video isn’t as exciting and full of movement in each scene, I still believe that my video portrays the overall characteristics of Proxima Nova very well and ties in with the music very well too.
