Advanced Typography / Task 3: Exploration & Application

16.5.2022 - 20.6.2022 (Week 8 - Week 13)

Adeline Wong Chyn Nee / 0344017 / Mr.Vinod N 

Advanced Typography

Task 3

---

INSTRUCTION:

---

Task 3: (16, May 2022)

For this task, we are required to either develop a font that is intended to solve a larger problem or meant to be part of a solution in the area of our interest or explore the use of a typeface in our area of interest, understand its existing relationship, identify areas that could be improved upon, and explore possible solutions or combinations that may add value to the existing typeface.

Upon hearing the name of this task, my mind was filled with questions and worries as always, "Am I going to have enough time for this?", "Do we have to construct the numbers as well?", and most importantly, "What am I going to chose and do?". After a good minute of pointless worrying, I started to went around to answer them, such as asking my friends, referring to a senior's work, and of course scrolling through the ever so trusty, Pinterest.

1. Ideas and Sketches

From there, I ventured off to Pinterest and looked up some ideas. I came across many great ideas that I would like to explore however finalized them down to 4 ideas and wrote down ways I would approach this idea if I were to choose them. The final 4 ideas are to redesign the "Chop Suey" font, create a font inspired by music elements, create a font inspired by the Morse Code, or create a font inspired by the clock. 

Fig. 1.1 Four main ideas sand my approach (Slides created in Canva)

Initial choice of idea

Fig. 1.2 &1.3 Examples of the "Chop Suey" font (Source: Pinterest)

From the 4 ideas, I was leaning more towards redesigning the " Chop Suey" font at first, because of my knowledge of it from watching a few videos on the font and its history. I feel that perhaps I could make something interesting out of it. However, only after the feedback session with Mr. Vinod did I realize that if I were to go with this idea, I would have to create my font based on the "Chop Suey" font but still make sure that my outcome has a totally different approach than the font. This got me thinking of the complexity of this idea given the time of this task, and that is when I chose to give up on this idea, although it could be a good idea for future projects.

Tryout for idea #2

Fig. 1.4 Idea #1, week 8 (29/5/22)

During the feedback, I have also shown little to no progress on idea #2 which is to create a font based on music elements, for this idea, I explored types of music genres. In this case, I did chamber music (classical), pop music, and electronic music. Each genre would have different shapes which would eventually be used to create the typeface. Mr. Vinod did not react positively to this idea due to its lack of foundation. Therefore, I scrapped this idea.

Final decision: Idea #4

With the feedback from Mr. Vinod, I have also decided to go with idea #4 as it is pretty vague and I feel that many styles of typefaces could be derived out of a clock, or create a typeface based on time in general.

Fig. 1.4 Reference images of #4, week 9 (30/5/22)

After much brainstorming, I have decided to create a font based on the oldest clock in the world Zytglogge (Bernese German: 'time bell') is a landmark medieval tower in Bern, Switzerland. Built in the early 13th century, it has served the city as a guard tower, prison, clock tower, center of urban life, and civic memorial.

Creating the typeface base grid

Fig. 1.5 Extraction of clock's grid, week 10 (6/6/2022)

In order to extract shapes and elements of the Zytglogge clock, I went over to Illustrator and framed out the clock's shape from the image, which I then simplified by balancing out the lines to make it symmetrical. From there, a horizontal and vertical grid is added at the intersecting lines of the clock. Lastly, both the clock's shape and grid are combined to create a typeface base grid.

The base grid is very important not only to maintain consistency but to also create a typeface that can mimic the original clock by keeping its elements.

Development of the typeface

To create a typeface, the grid boxes are filled to look as close to the Latin alphabets as possible, although the grid does has some restrictions when it comes to creating letters like 'w' and 'x' as both the letters have similar qualities that would make diagonal lines difficult to construct.

Fig. 1.5 Development of the typefaces, week 10 (6/6/2022)

Fig. 1.6 Transition breakdown of the letter 'u' to 'v', week 10 (6/6/2022)

Many letters are similar to one another, some have slightly more boxes filled in and the difference can create a whole other letter. That is shown in the example above, it shows how just taking away some boxes from 'u' can create 'v'.

Fig. 1.7 Development of the typefaces, week 10 (6/6/2022)

Fig. 1.8 Letters in the grid, week 10 (6/6/2022)

Fig. 1.9 Letters without the grid, week 10 (6/6/2022)

Fig. 1.10 Outline of letters, week 10 (6/6/2022)

Fig. 1.11 Letters without the line element, week 10 (6/6/2022)

After the feedback session in week 12, Mr. Vinod said it would be cool to create an animation like old film countdowns but instead of the numbers, it's my letterform.

2. Further development (after feedback)

Last week, I only had letters to show my progress as I didn't plan on creating numbers. However, upon thinking about the old film countdown idea, I feel that it was best that I include numbers at the beginning so I don't completely stray away from creating numbers, and having numbers would elevate the countdown idea better.

Fig. 2.1 Constructing the numbers from grid, week 12 (13/6/2022)

With the numbers ready, I began to export everything single letter to After Effects and animate it.

3. Exporting process (Illustrator to After Effects)

I created another Illustrator file to prepare each letterform for export, each of them had to be centered in the middle to prevent unbalanced composition once imported into After Effects, doing this also helps create different layers for every typeface for a smooth animating process.

Fig. 3.1 Exporting the typefaces in layers, week 12 (13/6/2022)

Animating the countdown video (After Effects)

Fig. 3.2 Animating the layers, week 12 (13/6/2022)

To create the rotating line effect from an old film countdown, I used 'Radial Wipe' by tweaking some colors and putting the wipe in a loop.

Fig. 3.3 Countdown timer

Fig. 3.4 Countdown timer first attempt (loading time: 1 min)

Fig. 3.5 Timeline Panel for Radial Wipe effect

After the feedback session with Mr. Vinod, I was advised to add a small letter at the top right corner of the video, to show what the letter in the middle is, so the viewer doesn't have to guess. I was also advised to add that with the film dirt particle effect so the number becomes the dirt.

4. Creating a poster (application of typeface)

To connect the poster to back the topic which is 'time', I sketched out an hourglass as a symbol of time and incorporated the typeface grid into the poster. For better understanding, the image below explains the main elements of the poster.

Fig. 4.1 Main elements of the poster, week 12 (13/6/2022)

1. Grid- it represents the countdown timer as well as the Zytglogge clock

2. Hourglass- it represents time, the theme of this task

3. Title- the typeface name will be placed here

Fig. 4.2 Sketch of the poster, week 12 (13/6/2022)

Fig. 4.3 First attempt on the poster, week 12 (13/6/2022)

Fig. 4.4 Alternative version of the poster, week 12 (13/6/2022)

After the feedback session with Mr. Vinod, I was advised to fill the letters to the top, filling the upper part of the hourglass. Mr. Vinod also commented that the alternative version can 'throw away'.

5. Further development (after feedback)

Updated animated countdown video

After the feedback session, the numbers on the top right corner were added along with the dirt particle effect on it. Lastly, I gave the letterforms and numbers in the middle a similar effect so it wouldn't look too static compared to the rest of the elements in the video.

Fig. 5.1 Updating the video, week 13 (20/6/2022)

Fig. 5.1 Final video after feedback, week 13 (20/6/2022)

Updated poster

The letters are now filled even more in the upper part of the hourglass and seem much fuller now. I also changed the fill color of the hourglass to a grainy grey to match the colors in the countdown timer video.

Fig. 5.1 Further development of the poster, week 13 (20/6/2022)

Fig. 5.2 Final design of the poster, week 13 (20/6/2022)

---

Final Outcome of Task 3

Fig. 6.1 Final outcome of the typeface letters (PNG), week 13 (26/6/2022)

Fig. 6.2 Final outcome of the typeface numbers (PNG), week 13 (26/6/2022)

Fig. 6.3 Final outcome of the typeface poster (PNG), week 13 (26/6/2022)

Fig. 6.4 Final outcome of the typeface and poster (PDF), week 13 (20/6/2022)

Fig. 6.5 Final video of the animated typeface countdown, week 13 (20/6/2022)

---

FEEDBACK:

Week 13

Specific Feedback: I was advised to add a small normal letter at the right corner to display and give context to the viewers. I was advised to add the dirt particle effect on the letterforms by incorporating the movement and effect. For the poster, you should just fill up the entire upper section with your letters or you can do one more where it's just the words creating the hourglass effect.

Week 12

Specific Feedback: For the typeface progress I showed, Mr. Vinod said that there's consistency in the shapes and form, and it would be cool to create an animation like old film countdowns but instead of the numbers, it's my letterform. I was also advised to make that my final application.

---

REFLECTION:

WEEK 13

Experience

This final task was a roller coaster journey for me, at the beginning of the task (week 8), I was so nervous about the last task and was so scared that I wouldn't have enough time to fully complete this task. However, after week 11 where I found a direction for me to work towards and maintain, I started to feel the urge to actually do well so I don't regret it once it's ended. Two weeks later, and just as I thought, I am feeling pretty satisfied with the final result and my consistency overall.

Observations

Throughout this task, I realized the importance of viewing back at your design as a viewer instead of as a designer. I sometimes had to step back from the screen for a while and come back to only realised something about my design was terribly wrong. With this observation, many details that I've missed out are now less likely to be left out.

Findings

When completing this task, I find that using a grid in a design can speed up the process so much quicker than when I'm not using one. The grid creates a very important thing, the foundation, and once it is laid, other steps for design preparation become easy to handle. For my typeface, I have utilized the grid and not only did I have consistency in my work but also the speed when doing the work. 

---

FURTHER READING:

Fig 7.1 The Vignelli Canon on Design by Massimo Vignelli

C. Focused content for further reading: Texture

Texture played a big role in the designs and outcomes for me in task 3, my theme which surrounds time led to me creating an old film countdown video, which most of the time contains lots of film grains and particles. In this case, I will do my further reading on textures and maybe find out stuff that I missed out on while completing my task.

From the book, it is said that textures and their form are achieved by mastering the light when it absorbs or reflects. There are many different types of textures on material and they can have a range of tactile or visual experiences.

Lesson from this read:

It is important for any designer to sharpen their perception in order to articulate and master the media.

Not only that, but color plays a huge role in creating any texture as well, they are a mutually supportive dialogue that works alongside each other. So it is also important to take color into consideration when looking at a texture.

This is seen through digitally as well, where there are luminance noise and color noise, both have a different use. Color noise or "chroma" noise is typically more unnatural to use. However, together, they make image noise, which is a blend between the two and its functionality goes beyond the luminance and color noise alone.

Fig 7.2 Luminance and Color noise

Fig 7.1 Image noise