Cooper Hewitt Typeface: Spread + Animation
Typeface Research
Initial Research
The Cooper Hewitt Typeface was created in 2014 as a part of a mission to rebrand and modernize the Cooper Hewitt Smithsonian Museum in new York City. The mansion in which the museum is held in was previously owned and lived in by Andrew Carnegie and the Carnegie family and the museum was originally founded in 1897. The goal of the rebranding was to preserve the history of the museum while also creating a more modern feel to match the new design exhibits and up-and-coming technology in the museum. Design innovation is part of the building’s heritage. For example, it was the first private home in the U.S. to be built with a structural steel frame, and one of the first homes in New York to have a push-button elevator and the first modern example of air-conditioning. The Cooper Hewitt Smithsonian Design Museum is the only museum in the United States devoted exclusively to design.
The modernization included the identity. While other museums are reorganizing under brands that are visibly fussy or distractingly minimal, the Cooper Hewitt identity is utilitarian and purposeful. Cooper Hewitt is a “contemporary sans-serif with little fuss”. The designers developed an approach to the branding that invites interaction and experimentation.
It was created by Chester Jenkins, a typeface designer who had previously made the typeface Galaxie Polaris.
Jenkins used Galaxie Polaris Condensed as a rough guide for letter widths and master-stroke thicknesses. There are some clear similarities between the two fonts, both of them being contemporary sans serif fonts, but some main differences lie within the straight horizontal and vertical stroke endings of Cooper Hewitt, contrasted with the angled terminals in Polaris. This is most apparent in ‘a’, ‘c’, ‘e’, or ‘s’.
The most compelling aspect of the rebranding of the Cooper Hewitt brand and the creation of their typeface was that they decided to make it free to to the public. The Cooper Hewitt museum has a strong emphasis on design and innovation. A large part of their message includes education, and specifically educating people in the realm of design and encouraging them to create their own designs after leaving the museum. They do this through several programs and now with the typeface as well. Using the typeface gives the user insight into the experience of being a designer, if only in setting the type. It also helps disseminate the Cooper Hewitt brand and the idea that effective design should be accessible to everyone. The identity and typeface can be used by designers — and everyone — to help bring design to life.
“The Smithsonian Design Museum educates and enlightens with an identity that puts design directly in the hands of the people.”
— Pentagram
ASSIGNMENT 3: BOOK SPREAD
project brief: utilize hierarchy, placement, and color to create a spread that explores the characteristics, personality, rhythm, and flow of a particular typeface. Understand concepts of readability in the context body text in a book spread.
Characteristics
At first glance, Cooper Hewitt doesn’t seem too exciting. It reminded me of Roboto, with how simple it was. It wasn’t rounded or quirky or too geometric like a lot of other sans serif fonts I had previously seen, but rather it has more contemporary curves and it is more elongated.
General observations:
- High x-height to cap height ratio (tall x-height with shorter cap height)
- Short descenders and ascenders
- Consistent stroke width (low contrast)
- Stress on the vertical axis
- Geometric curves
Adjectives to describe Cooper Hewitt:
- Strong
- Simple
- Versatile
- Readable
- Modern
- Solid
- Accessible
The typeface was made for the museum to be used in various different font sizes, weights, and mediums, making it a truly versatile font. It is used in signage, body text, and both print and digital media.
Essay
Font Pairings
When diving into trying to find font pairings, I took a look at the fontsinuse.com website and found a few different fonts that were previously used with bold sans serif fonts similar to Cooper Hewitt, since I knew I wanted my tittle text to be bold and all caps. Most of the font pairing I found were with simple serif fonts, so I tried out those first.
Because Cooper Hewitt is a contemporary sans serif font, I initially tried pairing it with some serif fonts, particularly transitional and modern fonts like Baskerville and Bodoni. However, I found that these were too outdated and didn’t match the modern feel of Cooper Hewitt. I also tried to pair it with a slab-serif to see if something more bold would stand out but I thought that it maybe too much for the body text.
I then tried pairing it with some sans serif fonts like Avenir, Futura, and Helvetica. I found that because Cooper Hewitt has a more elongated feel than the rest of these sans serif fonts, the pairing didn’t feel exactly right and the sans serif fonts that i was looking at might have been too quirky and rounded. The more curved and condensed type didn’t exactly fit with Cooper Hewitt which was more contemporary.
After talking with Vicki in class, I finally settled on using Cooper Hewitt for the body text as well. It is a font that is versatile and meant for not only titles, but also body text and one of the adjectives that is used to describe the font is readable and accessible so I thought it made sense to use it for the body text as well.
Size and Column Structure
In class, we did an exercise to determine what leadings and font sizes were the most readable with different types of fonts. Cece and I got the font Tisa and we noticed that because the font has some emphasized glyphs, it needed some more room to breathe and needed a larger leading than some other fonts we talked about it class. From this exercise, I learned that the standard or “proportional” leading doesn’t always work for every font or every font size. After doing some test prints with Cooper Hewitt, I realized that because the font is more elongated, the leading does need to be increased to give the viewer more space to read.
After doing more test prints and asking several people in studio, I finally settled on a size 9pt font and a 11pt leading. I also decided to settle on a 3-column structure for my type because I liked how organic and natural the rag that was created from the columns were.
Drafting Spreads
Thumbnails:
While doing some thumbnails, I was a little stuck on the placement of the title. I wanted to make it pop out and turn a less exciting type into something bold and eye-catching, but I also wanted to keep it simple, so as not to take away from the body text. I decided to start drafting in Illustrator and InDesign to flesh out my ideas more clearly.
Imagery/Color:
I decided to take the image above and somehow incorporate it into my spread and turn it into a black and white image, as I don’t want it to stand out too much in my spread.
I knew I didn’t want my spread to be too colorful, as it would take away from the simple and stoic nature of the typeface so I decided to look on the museum’s website, www.cooperhewitt.org to see what their main colors are. I found that they use a lot of orange, and even in their main signage at the actual museum the letters have an orange accent. They also utilize some purple, pink, blue, and a few other colors on their website for various sections of the museum, but orange seemed to be the most consistent one. This makes sense, as their main focus is design, and the specific shade of orange that they use is called “design orange”. I recognize the shade from many other design colleges and organizations, including CMU’s new School of Design logo. I also thought it would pair nicely with the black and white image of the museum that I chose.
Drafts:
I started playing around with the letters and I tried arranging them in a way that would be compelling to look at but I ultimately realized that I focusing too much on the visuals. The purpose of a spread was for it to be readable and this felt like it was becoming too quirky and it didn’t match the essence of the font, which is supposed to be strong and simple.
I decided to instead have the title be bold and in all caps, like it is used in the museum’s logo and I tried scaling it up. I was also having trouble trying to figure out where to place the images and so I decided to incorporate it within the title type.
I got some feedback from a classmate that the title may read a bit weird so I decided to try flipping the two words so that people would read it more naturally, but I found that it looked a bit awkward with the positioning of the letters.
Office hours with Vicki:
- Don’t use the “T” from the title as the first letter of your body text, looks disjointed
- Don’t use the orange line to connect the letters to the title, feels a bit redundant
- Don’t emphasize “design” in the pull quote in orange, it stands out a bit too much, make it lighter.
- Get rid of the orange accents, try making the letters a lighter grey instead.
- Hang the quote
- Try a 1 column structure, 3 columns leaves the readers confused and makes it harder to read.
After taking Vicki’s advice, I decided to make a few changes for the final crit the next day. I moved over the “HEWITT” to the right so that the distinction was a bit more clear and people didn’t read it as “HEWITT COOPER”. I also got rid of the unnecessary lines and the orange accents. I also changed it from a 3 column structure to 1 column, but I found that the text was way too condensed a very hard to read all the way through so I decide that a 2-column structure was a nice balance and it still maintained a nice rag.
I also got rid of the large “T” in the body and shifted every over into the next page. I realized that I was a bit scared of moving the title text over and I was being a bit overly cautious about where the page would be folded. However, once I moved the title over I realized that it naturally connected the two pages into one spread and and after people read the title, your eye naturally goes to the body text in a nice way.
Class Feedback:
- The body text still feels too condensed. The leading is too tight and
- Because the text was moved from 3 columns to 2, it now feels too blocky and it is hard to separate the different parts of the text.
- The quote cuts off at a weird place and shouldn’t be on the first line of the next column
- Bring back the orange accents
Final Spread
After the class feedback, and taking a break from the spread for a while, I decided to implement some changes.
I also added the orange accents back, but more minimally this time, only on the letters. I also decided to use some bits of orange in the corners of the spread so that it felt more cohesive. I added “Cooper Hewitt” in the corner, which also solves the issue of people possible reading the tittle wrong, and then I added a little orange rectangle at the end of the last paragraph.
As for the typesetting, I increased the leading a bit, which I realized was an issue in my previous spread because I had changed the amount of columns, which caused the leading to get messed up. I also split up the body text into different paragraphs, which made it a lot easier to follow along with. Vicki mentioned that it was redundant to have the first line be indented so I left that as is and just bolded it. I then modified the other 2 paragraphs to distinguish them more. We played with the indentation a lot to see what amount was right for my body text, as I had previously just tried to use the tab key to indent, which ended up being too much. I landed on 2p3 as the perfect amount.
ASSIGNMENT 4: TYPEFACE ANIMATION
project brief: Create a 60 second video demonstrating the characteristics of a typeface using After effects to emphasize. Using kinetic type and typeface through a moving medium, which allows for unique expressions as well as constraints, personify your typeface to create a story.
Selecting Music
The process of selecting music was a bit up and down for me, as I initially was completely lost on what the general feel of my typeface was. Upon initial thought, I wanted something very powerful and a little older. I was looking on BROMELIAD for some more dramatic and building music pieces. My thought process was that I wanted to showcase the history of the Cooper Hewitt museum and then use the music to show how a historical institution has been modernized.
However, after listening to more music and speaking with Vicki, I came to the conclusion that something more dated may not be the move for my animation. Instead of showcasing the history of the museum, I wanted to focus on the typeface itself, which is pretty modern and simple, so something dramatic wouldn’t have matched the essence of the typeface. I compiled this playlist on Spotify, which consisted of some lighthearted, upbeat, and jazzy beats. This way I could focus on the design aspect of the typeface and focus on the fact that anyone can use the typeface for free.
In the end I narrowed my selection down to 2 tracks:
I ended up choosing “Marquee inst” out of the 2 because I found that “When I Be On the Mic” was pretty stagnant and repetitive, while the one I selected has some fun adlibs and variations in the music that I could play with.
Script
Similar to picking music, the idea for my script changed a lot as well. My initial script was in full sentences and focused mostly on the history.
I found that this would be hard to match up with my music since the beats were a bit fast and funky. I thought that longer sentences would be hard to follow and wouldn’t match up with the beats. So I changed my script into shorter words and phrases.
I wanted to focus mostly on the fact that the typeface is free and everyone has access to it. I also it to end with question that puts the ball in the viewer’s court. Much like how the Cooper Hewitt Museum gives the typeface to the visitors to use for their own, I wanted my animation to have a similar message were once people have learned about the typeface, they are inspired to make their own designs.
Imagery/Color
Image Library:
I wanted to showcase some images from the Cooper Hewitt Museum to highlight the different ways that they use the typeface.
I thought that these more modern and colorful artworks would contrast nicely with the black and white text.
As this point I was also debating whether or not I should include bits if the orange color as a part of my color palette. I thought it would be a nice continuation of my spread since I had some orange accents in it, but after trying it out I realized it might be too much. The imagery conveys the color well and even has some bits of orange.
Storyboard
Another way that I figured out how to have some connection between my spread and my animation was the include the same black and white image of the museum and have it splitting apart, like I did in my spread.
I laid out some general frames of what my animation text would look like but I wasn’t able to figure out the transitions until I put them into AfterEffects.
Reflection: Overall, I think I learned the most from these last 2 projects. I had previously never considered readability and how that translates a lot differently onto a book spread than it does on larger form content, but this project really taught me to be nitpicky with the little details when it comes to typesetting which makes all the difference when a user interacts with the content. As for the animation, it was harder to track my progress, as I kept building on what I already had and I was so in the zone that I didn’t really take much time to document it, but I think I really grew during the process. Deciding what parts to keep and what parts would actually contribute to the larger story that I wanted to tell was a bit challenging at times, but in the end I’m pretty proud of what i made I think it had a cohesive look and story. Thank you guys for a great mini!!!!
