Advanced Typography: Task 3

| 19.06.2024 -23.07.2024 (WEEK 9 -WEEK 14)
| Tang Chin Ting [ 0366473 ]
| Advanced Typography / Bachelor of Design in Creative Media
| Task 3: Type Exploration and Application

---

LECTURES

All lectures have been completed in the blog Task 1: Exercises

---

INSTRUCTIONS

---

SUBMISSION

Task 3: Type Exploration and Application

Requirement of this task:

    1. Create a font that is intended to solve a larger problem or meant to be part of a solution in the area of your interest be it graphic design, animation, new media or entertainment design, or any other related area not necessarily reflecting your specialization.

    2. Explore the use of an existing letterform in an 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 letterform/lettering.

    3. Experiment. For your idea to qualify as an experiment, it must be novel and unique — working with material that might be 3- dimensional, digitally augmented, edible, unusual, typographic music video, or fine art.

    4. The end outcome could be a designed font and its application in the form or format that it intends to provide a solution to, a designed font that adds value to an existing use, or an experimentative output that results in something novel and unique.

    5. The work can manifest in any kind of format related to the issue being solved explored or experimented with: animation, 3d, print, ambient, projection, movie title or game title, music video, use of different material, etc.

Idea Proposal

To start exploring this task, we first need to create an idea proposal to list down the different ideas that we need to do. I initially came out with 3 ideas which are shown in the slide below.

Figure 1.1 Idea Proposal PDF

In my proposal, I mostly preferred the second one. Actually, I think that creating a lyrics video for my favorite songs is interesting and the reference font that I provide for this idea is so beautiful. It is almost in a vintage and weird design style, which is mostly related to the song "Fur Elise". For the slide show can refer to this Link!

Finally, the second idea has been chosen.

Digitized Font

Uppercase

In the first week of feedback for this task, Mr. Vinod advised me to focus on uppercase letters. Therefore, I decided to start by digitizing the uppercase letters, followed by numbers and punctuation marks.

This is the initial outcome where I applied elements to each letterform. Initially, I struggled with the letter "S" and ended up arranging elements to resemble its shape. However, after receiving feedback from Mr. Vinod, he suggested that I should make the outlines of my letterforms smoother.

Figure 1.2 First Outcome of Uppercase

Figure 1.3 Outline of The First Outcome of Uppercase

After receiving the feedback, I began refining all the letters. I first changed the style of the letters "Q" and "R." The letter "S" presented a significant challenge, requiring me to rethink its design entirely.

Figure 1.4 The Refinement of The Letter "R"

Figure 1.5 The Refinement of The Letter "Q"

This is the outcome after I refined all the letters. In the next week's feedback, Mr. Vinod pointed out that the gaps between each letter were inconsistent, making some letters appear bold while others looked thin. He also reminded me to use the grid he provided to ensure uniformity in the letterforms.

Figure 1.6 Outcome After First Refinement

Refinement 2.0: I placed all the letters on the grid and adjusted each one to ensure uniform width and consistent gaps. Mr. Vinod also noted that the letter "H" looked cluttered and lacked coherence. In response, I removed the small line and created a curve to connect the straight lines on both sides.

Figure 1.7 The Refinement of The Letter "H"

Besides, I also noticed that my letter "A" looked odd and did not match the style of the other letters. Therefore, I redesigned it. I removed the curved line and made the left sideline identical to the right, creating a symmetrical appearance.

Figure 1.8 The Refinement of The Letter "A"

For the letter "K", I aimed to match the style of the letter "H" by using a curve to link the elements. After making this adjustment, it looked much better.

Figure 1.9 The Refinement of The Letter "K"

This is the final outcome after receiving the third feedback from Mr. Vinod. He advised me to adjust each letter's thickness to match that of the letter "L". Since my letterforms contain many elements, making them too bold would be overwhelming. The thickness of the letter "L" is quite suitable.

Figure 1.10 Outcome After Third Refinement

Numbers and Punctuation Marks

Since I only focused on uppercase letters initially, my next task was to complete the numbers and punctuation marks. The first number I created was 2, which was relatively easier. However, the most challenging numbers to create were 7 and 8.

Figure 1.11 All Letters, Numerals, and Punctuations Outcome

Refinement: The number 1 was a bit difficult to read as it looked similar to the letter "I", so I decided to elongate the bottom for better distinction. For the number 8, I aimed to design it similarly to the letter "S", adding more curves to enhance its appearance.

Figure 1.12 The Refinement of The Number "1"

Figure 1.13 The Refinement of The Number "3"

For the punctuation marks, I only create (. , ? ! [] ‘’ # :).

Figure 1.14 Punctuation Marks' Outcome

Generating Font in Fontlab

After using Pathfinder for each letter, I imported them into FontLab. Although Mr. Vinod provided us with a tutorial video for using FontForge, I chose FontLab to generate my font since I had used it before and found it easier to navigate.

Webpage Link

Figure 1.15 FontForge Tutorial Video

Figure 1.16 After Applying Letterforms in FontLab

After importing the letters into Fontlab, I adjusted the kerning between each one. This process was challenging, but I adhered to the side-bearing measurement list for each letter that Mr. Vinod provided.

Figure 1.17 Adjusting Side bearing in FontLab

Figure 1.18 Adjusting Side bearing in FontLab

Figure 1.19 Adjusting Side bearing in FontLab

Figure 1.20 Adjusting Side bearing in FontLab

Font Presentation

I initially came up with several outcomes, but I realized that the top-left design closely resembled the album cover, so I decided to rethink it. The main element I want to focus on for this application is the circle, which has been filled with a black-to-red gradient.

Figure 1.21 Font Presentation First Outcome

Following that, I came up with a new idea: placing just the two letters in the center and applying a blur effect. After adding the filter, it seemed to blend better with the background.

Figure 1.22 Font Presentation First Outcome

Figure 1.23 Font Presentation Final Outcome

Font Application

Since the font I created is for the music video 'Fur Elise,' I decided to apply it to various elements including the album cover, concert ticket, vinyl, CD, and poster for the mock-up.

With previous mock-up experience from Task 2, I sought out free PSD files online to complete my mock-up. While searching for a vinyl mock-up, I discovered a website with a wide range of item mock-ups, which included my preferred options. I then used these mock-ups to design in Adobe Illustrator.

Font Application #01

I started with the vinyl cover, which was relatively straightforward. I placed a black-and-white portrait of Faouzia (the singer of 'Fur Elise') on the back, added the text with a blur effect, and designed the inside with a circle shape in a black-to-red gradient, arranged in a round line for added interest.

Figure 1.24 Progress of Font Application 01

Figure 1.25 Progress of Font Application 01

Figure 1.26 Font Application #01

Font Application #02

The second mock-up is a poster designed to highlight the song 'Fur Elise.' For this, I used the same gradient circle element, placing it in the center of the poster. I also included some of the song's lyrics at the bottom of the circle.

Figure 1.27 Progress of Font Application 02

Figure 1.28 Progress of Font Application 02

Figure 1.29 Font Application #02

Font Application #03

For the invite card, I created two design options, both in a simple style. I used my font for the text and applied it in variations of black, white, and red colors.

Figure 1.30 Progress of Font Application 03

Figure 1.31 Font Application #03

Font Application #04

The next mock-up is a concert ticket, which I thoroughly enjoyed designing. For this version, I started by applying the text for the venue, time, and date. When I encountered difficulties finding a transparent barcode, I used a reference to create one myself in Adobe Illustrator.

Figure 1.32 Progress of Font Application 04

Figure 1.33 Progress of Font Application 04

Figure 1.34 Font Application #04

Font Application #05

For the final mock-up, I designed a CD. I created a simple background and placed the text in a circular arrangement for the CD itself. For the cover, I featured Faouzia's image and positioned the song's name on the left side.

Figure 1.35 Progress of Font Application 05

Figure 1.36 Progress of Font Application 05

Figure 1.37 Font Application #05

Preview the design outcome:

Figure 1.38 Preview for All the Font Applications

To conclude this task, I created a lyric video for 'Fur Elise.' Initially, I used Adobe Premiere Pro, but I found it a bit challenging. Therefore, I switched to Canva, which made it easier to find resources for decorating the video background and offered a variety of transitions to use.

Figure 1.39 Progress of The Video in Canvas

Figure 1.40 Final Lyrics Video

Final Outcome

Download the font here: Fur Elise Regular

Other fonts used in font presentation: Helvetica

Other fonts used in font application: ITC New Baskerville Std

Figure 1.41 Final Letterforms

Figure 1.42 Final Font Presentation #01

Figure 1.43 Final Font Presentation #02

Figure 1.44 Final Font Presentation #03

Figure 1.45 Final Font Presentation #04

Figure 1.46 Final Font Presentation #05

Figure 1.47 Final Font Application #01

Figure 1.48 Final Font Application #02

Figure 1.49 Final Font Application #03

Figure 1.50 Final Font Application #04

Figure 1.51 Final Font Application #05

Figure 1.52 Final Font Presentations and Applications PDF

---

FEEDBACK

Week 9 Specific Feedback: After Mr Vinod looked for my idea, he said that I could go through with that idea but maybe I can not just create a font for the video as 2 separate elements. Merging the illustration and font with the video such as mixing the music video and the music video clips with an overlay of your letter forms, the final will come out with a music video that includes the elements. Besides, I could take part in the music video, not the whole one. But the problem still lies in the letterform design, I could just focus on the capital letters. Mr Vinod also suggests that the design of the letterforms does not go into too many decorative details but keeps it a bit more conservative. Unless you feel that that decorative element is important because of how the music or the song is structured. For example, you have the letter M and something is growing out of the letter M which is the decorative elements and so you show the letter M, and then that like letters grow out while the music video is playing in the background, etc., you know so that's possible.

Week 10 General Feedback: When creating a new font, you guys need to be aware of using the grid to make sure every letter is in the right gap and similar to each other. If you don't use the gird, your font will not be created in the right way. Specific Feedback: You are doing it in the right way, but your letters have a bit problem. The lines of the letters are not smooth, so it looks like many elements are pieced together. Maybe you can make the connection point smoother and there are too many elements here, try to reduce it, since it will look random. The gap of the letter is not the same if you use the grid to create this font this problem will not appear.

Week 11 Specific Feedback: The width of the letters 'P' and 'R' needs adjustment. When compared to the letter 'L,' which fits the design well, the 'P' and 'R' appear too bold. Since there are many elements in your font, making the letters bolder would make them too overwhelming. Adjusting the thickness to match that of the 'L' will likely make the design more cohesive.

Week 12: -

Week 13:
Specific Feedback: Overall, the presentation is okay, but having all the alphabet characters together can be overwhelming. Consider separating them into two presentations: one for uppercase letters and another for numbers and punctuation marks. Also, make the text larger so viewers can better appreciate the font's details and expression.

---

REFLECTION

Findings

Through this task, I discovered how important consistency and attention to detail are in font design. Every component from thickness to kerning is essential to the final look. Furthermore, presenting the letters, numerals, and punctuation marks separately made it possible to showcase the font's features more effectively and understandably. I now have more knowledge in typography and a greater understanding of the craft of font design due to this task. It has strengthened the idea that typography is about using design to tell stories, express ideas, and inspire feelings in addition to just creating letters.

Experience

The process of creating this font was a testament to my growth as a designer and typographer. It required me to delve deeper into the nuances of the typography and to find ways to capture that in the very fabric of the letterforms. The meticulous refinements and the pursuit of perfection stretched my creative boundaries and deepened my appreciation for the power of typography. Each challenge I faced, and each obstacle I overcame, only served to strengthen my resolve and sharpen my skills, ultimately leading to a final product that I am truly proud to call my own.

Observations

Creating a new font for "Fur Elise" and using it on different mock-ups of items was a wonderful learning process. I noticed that letter thickness and breadth need to be adjusted for consistency, especially when it comes to the letters. Every mock-up, including the CD and vinyl cover, showed how the typeface may be used in a variety of contexts. The concert ticket and invitation card designs showed useful uses. Clarity and impact were increased by separating the alphabet, numerals, and punctuation displays. All in all, this work improved my knowledge of font design and strengthened my enthusiasm for typography.

---

FURTHER READING

In this further reading, I would like to continue reading for the previous task's book which is Vignelli Canon on Design. 

Design Is One

They were versatile designers who could create anything "from the spoon to the city." Their iconic works spanned radio design, flatware, furniture, and architecture. The author was impressed by the diversity of their projects, which fascinated him and taught him that mastering design disciplines enables one to design anything. Design is a universal discipline, not a particular style. Throughout my career, he has sought opportunities to diversify his design practice across various media, driven by the interplay of intuition, knowledge, passion, and the desire for success.

Visual Power

Good design must possess visual power through a strong conceptual foundation, captivating form, and strategic use of color and texture, expressing creative brilliance and clearly communicating content. Whether in graphic design through contrasting scale and typography, or in 3D design via the manipulation of light and materials, visually striking elements are essential for a design to achieve its purpose effectively. However, the author distinguishes mere visual impact from true visual power, which stems from intellectual elegance rather than superficial aesthetics - a nuance that designers must carefully consider when striving to create designs imbued with the visual strength required to leave a lasting impression.

Intellectual Elegance

Intellectual elegance transcends mere manners, representing the sublime intelligence behind humanity's greatest masterpieces in art, literature, architecture, music, and science. It is the guiding thread towards the best solutions, elevating even the most humble creations. Intellectual elegance embodies our civic consciousness, social responsibility, and moral purpose - not a design style, but the very essence and deepest meaning of design itself.

Timelessness

The authors staunchly reject design fashions and the culture of obsolescence, instead advocating for durable design solutions that cater to people's true needs. They favor the use of timeless primary shapes, colors, and typography that transcend subjectivity and trends. Their ideal design prioritizes economy, clarity, and longevity, focusing on the message rather than superficial visual appeal. This emphasis on timelessness and substance over style reflects their belief in design's role in fostering a society of lasting value and integrity.

Responsibility

Graphic designers must prioritize economic responsibility when determining the most appropriate solutions, rather than succumbing to ego or lavish extravagance. Designers have a threefold duty: to the project's integrity, the client's needs, and the public's interests. The most responsible design fulfills these responsibilities without compromise, resulting in a self-evident solution that represents the successful culmination of a disciplined process.

Equity

Rebranding solely for the sake of change is misguided; true corporate identity requires a holistic system approach, not just a logo. Established logos hold immense cultural equity and should be protected, not discarded. Rather than creating entirely new logos, designers should aim to respectfully evolve and adapt existing ones to contemporary applications. This attitude reflects a deeper appreciation for history and a rejection of the notion that novelty automatically equals progress in the realm of brand identity.