Advanced Typography - Task 3: Type Exploration & Application

24/5/2023 - 21/6/2023 (Week8 - Week12)

Teoh Gim Khoon (0361563)

Bachelor of Design (Hons) in Creative Media

Advance Typography - Task 3

Type Exploration & Application

LECTURES

All Lectures 1 to 5 were completed in Task 1 - Exercise 1 & 2

INSTRUCTION

TASK

Task 3: Type Exploration & Application

For Task 3, our assignment was to choose between two options: either creating a typeface to address a problem within our chosen field of interest (such as Graphic Design, UI/UX, Animation, Entertainment Design, or any other) or examining the utilization of typefaces within our area of interest. The ultimate goal was to produce a designed typeface that can be implemented in an application to enhance the font typeface design.

Task 3 (A): Type Exploration

Research & Ideation

Fig.1.0 Propose 5 Ideas

We were instructed to come up with 3-5 ideas for our project based on our research and interests.

Ideas 1

I selected the YG Entertainment Logo font as the basis for this idea because I have a keen interest in their K-pop girl groups, and the font itself gives me a futuristic sensation.

Ideas 2 & Ideas 3

As an avid enthusiast of outer space, I have merged my passion for exploring celestial phenomena with an interest in horoscopes, resulting in two interconnected ideas. I aim to combine these concepts into a unique font design that encapsulates the essence of both outer space and astrology.

Ideas 4 & 5

I have come up with two ideas for magazine masthead designs that resonate with my personality. Idea 4 involves a retro-inspired masthead design that exudes a premium aesthetic. The combination of vintage elements and a sophisticated design will create a unique visual identity. On the other hand, idea 5 focuses on an elegant and modern typeface design. This concept embodies a contemporary style while maintaining a sense of sophistication. Both ideas reflect my personality and capture the essence of the desired magazine masthead design.

Final chosen Idea (Idea 5)

Fig. 1.1 Idea 5 & References

Sketch

Fig. 1.2 Font Typeface Sketches

Digitisation and Exploration

Fig. 1.3 Uppercase Digitisations

In the process of digitizing the uppercase letters from the sketches, I experimented with two different designs. The first design remained faithful to the original sketches, featuring a normal amount of negative space between the font characters. For the second design, I decided to apply more negative space to make it stand out. However, upon reviewing and presenting the second design, I realized that the negative space was overly emphasized, creating an imbalance in the overall composition. As a result, I have recognized the need to adjust the second design, finding a middle ground that maintains legibility while still showcasing the intended negative space.

Fig. 1.4 Uppercase Outcome

Fig. 1.5 Lowercase Digitisations

In my exploration of lowercase letters, I made three attempts at different designs.

The first attempt involved designing the counters of the letters with a bold start and gradually thinning towards the end. This created a dynamic and visually engaging effect.

In the second attempt, I opted for a simpler approach by using a stroke with a consistent weight throughout the counter of each letter. This design aimed for a clean and minimalistic aesthetic.

For the third attempt, I experimented with a more intricate design. I incorporated bold elements in the middle of the counters, while the top and bottom sides were crafted to be more delicate and tiny. This design aimed to strike a balance between boldness and delicacy, adding visual interest to the letterforms.

Fig. 1.6 Number & Punctuation Digitisations

I used reference letters as a basis and employed the shape builder tool to combine and erase parts of the shapes, creating the number and punctuation designs.

Generate Font in Fontlab

Fig. 2.1 Fontlab5 Tutorial Video

Fig 2.2 Fontlab7 Tutorial Video

During the initial lecture, we were given a FontLab tutorial video that guided us through the process of importing the fonts we designed into the FontLab system. This tutorial video served as a valuable resource, providing step-by-step instructions on how to navigate the FontLab software and successfully incorporate our custom-designed fonts into the system. By following the tutorial, we gained a deeper understanding of the font importation process and developed the necessary skills to efficiently utilize FontLab for our font design projects.

Fig. 2.3 Setting the important preferences

Fig. 2.4 Importing font into fontlab

To import all the font letters into FontLab, I copied the font designs from Adobe Illustrator and pasted them into the software. Then, I adjusted the placement of each letter based on the specific guidelines such as the ascender, cap line, median line, baseline, and descender. This meticulous adjustment ensured that each letter aligned properly within the font and maintained consistent proportions and positioning.

Fig. 2.5 Adjusting the Family and Font Dimension

Fig. 2.6 Font import into Fontlab

Fig. 2.7 Kerning through metrics

Within FontLab, I fine-tuned the kerning of the font by utilizing the metrics feature. This involved adjusting the kerning classes and sidebearings to achieve optimal spacing between individual characters. By carefully manipulating these settings, I ensured that the letters within the font had balanced and visually pleasing spacing, resulting in improved readability and overall aesthetic appeal.

Font link
https://drive.google.com/file/d/1G6hFlpVdLkgHRJHDGfMa1ur7GSvLNwPc/view?usp=sharing

Task 3 (B): Application

Font Showcase

Fig. 3.0 Font Showcase 1

Fig. 3.1 Font Showcase 2

Fig. 3.2 Font Showcase 3

Fig. 3.3 Font Showcase 4

Fig. 3.5 Font Showcase 5

Application #1: Website

Fig. 3.6 Website

I designed a landing page that prominently features the font in the website logo, title, and sub-content. This approach ensures a consistent and visually appealing design, capturing the attention of visitors and conveying the font's unique characteristics.

Application #2: IG Post

Fig. 3.7 IG Post

I also created a series of Instagram posts to complement the website design. These posts incorporate the font in various creative ways to engage the audience and maintain a cohesive visual identity across different platforms.

Application #3: Name Card

Fig. 3.8 Name Card

A mockup for a name card, showcasing the font in a professional and visually appealing manner. By integrating the font into the name card design, I aimed to create a cohesive brand identity that extends beyond digital platforms.

Application #4: Square Card

Fig. 3.9 Coaster

I created a square-shaped card resembling a coaster, featuring the font design. This unconventional format adds a touch of creativity and uniqueness to the brand's promotional materials.

Final Task 3: Type Exploration and Application
Font link:
https://drive.google.com/file/d/1G6hFlpVdLkgHRJHDGfMa1ur7GSvLNwPc/view?usp=sharing

Fig. 4.0 "Crystalline" Final Type Design

Fig. 4.1 Final Type Poster 1

Fig. 4.2 Final Type Poster 2

Fig. 4.3 Final Type Poster 3

Fig. 4.4 Final Type Poster 4

Fig. 4.5 Final Type Poster 5

Fig. 4.6 Application 1 - Website

Fig. 4.7 Application 2 - IG Post

Fig. 4.8 Application 3 - Name Card

Fig. 4.9 Application 4 - Coaster

Fig. 4.10 Final Task3: Type Exploration & Application - PDF

FEEDBACK

Week 9

The overall design of the Instagram post is effective, with a well-arranged layout and pleasing color scheme. However, there is still room for improvement in terms of reducing repetition within the collateral.

Week 10

For task 3, the idea I have is acceptable, but I should shift my focus towards refining the display type instead of attempting to improve the paragraph text.

Week 11

The font design is visually pleasing and successfully incorporates a glass-like feel, reflecting the original font obtained from the glass magazine that you aimed to refine or redesign. However, the application of tiny strokes in the font design is deemed unnecessary, and the current design lacks legibility. It is recommended to either remove the strokes altogether or make them more prominent to enhance clarity.

Week 12

The lowercase font thickness should match that of the uppercase letters, and the thickness position should be adjusted to the opposite position. Lowercase letters will always have a stress point, resulting in unequal curves on both sides. One side will be slightly smaller than the other.

REFLECTION

Experience

I was able to expand my knowledge of typography and typeface design through the immersive and practical experience of Type Exploration & Application. I learned a lot about the challenges of designing a unique typeface and integrating it into multiple design settings during the concept, drawing, digitisation, and application processes. It was a fruitful trip that encouraged creativity, improved my technical proficiency, and increased my understanding of typography.

Observations

I saw firsthand how research and brainstorming may influence the direction of a typeface design. I was able to develop original concepts that spoke to both myself and the target audience by investigating various themes and taking into account personal interests. The digitization procedure, especially in FontLab, offered a precise and adaptable platform for typeface improvement, spacing assurance, and kerning adjustment. The application phase also emphasised the value of maintaining visual coherence and branding across several channels, including websites, social media posts, and tangible products.

Finding
The first step in creating a harmonic and balanced typeface is to pay close attention to every last element. The overall legibility and aesthetic appeal of the font are considerably improved by adjusting the kerning and space between characters. Second, iterative improvement based on input is essential for raising the typeface's quality. I was able to identify my weak points and make the required corrections thanks to feedback from my peers and instructors. Finally, the use of a well-designed typeface in numerous design components demonstrates the typeface's adaptability. The typeface plays a key role in creating a unified brand identity and successfully engaging the target audience on everything from websites to name cards.

FURTHER READING

Symbols by Grilli Type

https://www.instagram.com/p/Cdqygc_r3qr/?utm_source=ig_web_copy_link&igshid=MzRlODBiNWFlZA==