Helvetica
IxD102 Project 1: Type Specimen Screen
For this project we were asked to create a type specimen screen for a typeface, using one out of a few we were given by our tutor.
The typefaces given to us was the following:
- Futura
- Gill Sans
- Helvetica
- Palatino
- Times New Roman
- Baskerville
After looking at the typefaces we were given, I chose to study Helvetica in this project and use it in my type specimen screen.
Helvetica
Intro
Max Miedinger and Eduard Hoffmann, at the Haas Type Foundry, Switzerland, were set on creating a more neutral typeface that would be easy to use, easy to read, with no inherent meaning that would be used on a wide variety of signage. In 1957, influenced by Akzidenz-Grotesk, the neo-grotesque sans-serif typeface, Helvetica was made.
Originally called Neue Haas Grotesk, the swiss typeface later changed its name to Helvetica in 1960, inspired by the Latin name for “Swiss“, Helvetia to become more marketable internationally.
Helvetica is a typeface all of us are familiar with, because of its worldwide usage on signs as well as products. I chose to work with Helvetica because it’s a typeface I’m not that familiar with and wanted to explore it further and its history.
I began by doing some research about the typeface and where it’s from, as well as the history of it to get a better idea of what I was working with and what I could use in terms of graphic design in this type of specimen screen to make it unique. There are a few basics about Helvetica and why it’s famous. It’s very minimalistic, simple, and doesn’t have much of a character. So I thought to make my type screen as minimalistic as possible, reflecting the creator’s ideas of the typeface.
For the colour scheme, I chose to stay with the colours of the Swiss flag, since it’s a national treasure for that country. I didn’t debate much about what other colour to use since I was set on the idea to use red (#d52b1e) and white (#ffffff) to capture the colours of the flag.
Here are my notes about ideas as well as ideas and sketches I played around with, to capture the typeface and its origins.
A few of my sketches did involve the swiss cross, adding clarity to its origin, just like how Max Miedinger and Eduard Hoffmann wanted a typeface with great clarity for the audience that would read the text as well signs with Helvetica.
I decided to look into more elements to add into the type specimen screen, graphic elements that represent Switzerland but are minimalistic.
When I Was happy with the sketches I moved on to making my ideas digital and seeing how well they would turn out on screen.
Digitalizing the sketches
When I was digitalizing my ideas I used the size given to us to make our type specimen screen; 768x1024px which is the typical iPad size. I used a grid that was 768 in size to be able to properly use it, I did break the grid into 24px to make it look more stylized and clean.
This was initially my first idea to work with, it was an idea I thought sounded great that looked great on paper but didn’t really work out in its digital form since it was too chaotic. It wasn’t minimalistic in the slightest and quite busy. I still wanted to play around with the swiss cross filled with text ideas and moved on to try it again using another idea. I was very sure that I would make this work one way or another.
The second try I had with trying to make the cross using text, I decided to make Helvetica stand out more, with less text, making it less chaotic. Instead of adding descriptive text, I used keywords for the font as well as the Alphabet, numbers and Glyphs.
It was still too much happening in this one as well, so I decided to move on and work on the other ideas I had for this project. Even though I removed a lot of the text it was still quite busy.
I wanted to try a minimalistic idea for this one, having an opaque cross, I also added some information I wrote about Helvetica, summarizing the history and story behind the typeface.
Even though this one has its charm, I wasn’t too happy with it, I couldn’t really put my finger on what was wrong. I decided to move on to the next one.
I had one idea and got several outcomes. This idea was something I was confident with and also came out great digitally. I gave it several tries. The final product of this one is also one of the chosen three I picked out at the end of the project.
With this idea, I wanted to highlight the font, make it interesting like it’s fading in and out, playing with the opacity that I thought would look great.
At the critique session, I was told that it could be improved in ways, like moving around the text and removing the numbers as well as symbols, which is what I did. The last image of the bunch is the final product.
1.
2.
For these three images, I wanted to involve a mountain and a swiss cross, using the horizontal line of the cross like a flat surface to place the mountain. This idea has two different types of outcomes, I didn’t want to include the entire cross in this illustration(see image 1), so I began with a cross where only 25% of it is shown, adding the mountain to the horizontal line, placing the text bit in the white with using red, so I could keep to the colour scheme I wanted.
The Helvetica part on the other hand, Since, the cross was already larger so you couldn’t see the whole thing, I made the same thing with the Helvetica text. I wasn’t pleased with the outcome of this one, so I scrapped it and move on to the next idea I had in mind.
The second idea I had using the same sort of Idea, I kept more than just 25% of the Swiss cross in the image, adding the Helvetica in the middle of the cross, originally it wasn’t centred, but was pointed out during the critique we received. I quickly changed so it was centred.
Since I already had added Helvetica into the cross, I chose to add the text bit about Helvetica in the upper corner in White, to follow the chosen colour scheme. The two images are under the number 2. are slightly different, because one was pre critique and one is post critique. I was told to also make the text make sense, for example, to line it up with the cross, to make it look more in order rather than randomly placed out. The mountains were also questioned, but it was in another illustration that will appear further down.
The last image of these three was my final version of it, after the critique we were given, I felt very happy and it was clearly one of my favourite designs that I did during this project.
The process of making the mountains
I made three different mountain types for this project, one to sit on the left side, and one to the right. In total, I made three, but one of them didn’t make it look like a mountain, and it was pointed out during the critique session we had.
To make the mountains I firstly did the outline of this mountain I found of the Swiss alps, when that was done I continued by marking either the highlights or the Shadows to create a mountain effect.
Highlights of mountain
This is how this highlight I took from the mountain was used in a picture. It was the first illustration I did of it, and it was good, but it didn’t fit the ideas I had for the images with it being on the left side.
Shadows of the mountain, first edition.
Since the left highlight illustration didn’t work for all the designs I had in mind, I took the time to make one for the right side as well. Since the right side was mainly shadowed, the illustration turned out to look like a very large mass, but I was happy with it at the time. It was pointed out during critique that it didn’t resemble a mountain and I took the time to make a third one, re-making the right side mountain illustration.
Shadows of the mountain, final version.
After we had gotten the critique related to our works, when I arrived home I began to look into how to improve the right side shadowing of the mountain to make it look more authentic. I looked at vector images of mountains and saw what I had to do. Instead of following the shadows like I previously did, I chose to follow the visible details, like rocks and heavier shadows on the mountain to make it look more natural, and the final product came out better than expected. I ended up using this version of the mountain in all of my final images that had a mountain in them.
For the final Ideas I chose to digitalize I came back for the cross. The cross was something I really wanted to capture in its whole to properly represent the swiss flag. I early on moved on from the idea of using the text to shape the cross, but I never really went with my idea of having a solid cross with only Helvetica in it. I did so and added a mountain to it as well to capture more of Switzerland to it.
I made the Helvetica font slightly larger so both the H and the A would halve on the edges like it’s expanding outside the cross because I thought it added a nice touch on how Helvetica is a font used all over the world, expanding past the Swiss borders.
I also chose to have the explaining text added since it was as minimalistic as it was. But it still felt empty and I wanted to add something else related to the font, so I came up with two ideas, One of the two ideas was to add Helvetica in normal, bold and in italics to the background with a lower opacity so it would keep in the background, one was with larger writing of the word, and the other idea was with smaller but more frequent words.
After critique, I also changed the mountains, since I felt like if I had the shadows on the left side it felt odd, and the illustration I had at the time of the critique was the first version of the right mountain. The two last images in this section are the final versions of it. Which I’m very pleased with.
Final products
At the end of the project, after our critique session, we had to choose three of all the designs we had made and photoshop them onto iPads to show our final product. The three of the designs I chose as my final ones were three designs that I’m very happy with.
Final thoughts
This project was a lot of fun as well as interesting. It gave me an opportunity to look into and study a typeface while learning how to design a type screen as well. There was a lot for me to learn and it was really fun in the process. What I enjoyed the most was figuring out how to reflect the typeface and its history by graphic design and not go overboard, it gave me a lot of ideas and inspirations on the way.
I am still learning illustrator, and the fact that I managed to create something like this made me feel very proud of myself. With a lot of help from research, classmates, as well as my tutor I could produce something that I never believed, would look this professional in my first year of interaction design, never mind the first few weeks.
The critique session was something that really helped me while giving other students in my course advice I learnt from it myself. I can’t wait for the next one to learn even more and grow as a designer.
Thank you.
Sources used:
The Helvetica documentary, on a shade website.
https://design.tutsplus.com/articles/everything-you-wanted-to-know-about-helvetica–cms-33404
https://www.pixartprinting.co.uk/blog/history-font-helvetica/