Advanced Typography - Task 3: Type Exploration and Application

31.5.2023 - 5.7.2023 (Week 9 - Week 14)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Advanced Typography 
Task 3 - Type Exploration and Application

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1oRziQMJ9Me92vM0QEDEa2DzA4oYcrQQu/preview" width="640" height="480" allow="autoplay"></iframe>

TASK 3 - TYPE EXPLORATION & APPLICATION

For Task 3, we get to dictate our own project. We are to either design a typeface to solve a problem in the area of our interest (Graphic Design, UI/UX, Animation, Entertainment Design or any other) or explore the use of typeface in our area of interest or experiment a font that is novel and unique, working with material that might be 3- dimensional, digitally augmented, edible, unusual, typographic music video or fine art. The end outcome would be the designed typeface in its application - any kind of format related to the issue being solved or explored: animation, 3D, print, ambient, projection, movie title or game title, use of different material etc.

Proposal / Ideas

In the beginning, we are instructed to prepare a proposal for at least 3 ideas to develop. So, I spent sometimes on developing & figuring the proper idea towards my typefaces.

Fig. 1.1 - Proposal Slides for Task 3

1st attempt (Idea 1)

I have made the decision to pursue my first idea, which draws inspiration from a music album cover. The album cover features a futuristic typeface with distinct, square-shaped letters. I'm now embarking on a project to create a full set set of font based on this unique design.

To elaborate further, the typeface I aim to develop will possess a modern and forward-looking aesthetic, perfectly capturing the essence of the album cover that sparked my inspiration. The letters will be constructed with a focus on clean lines and geometric precision, resulting in a distinctively squarish shape.

Fig. 1.2 - Chosen Idea#1

Next, I have made the decision to straightaway experiment with the process of digitalizing a few letters in Illustrator to get a preview of their appearance. This step will allow me to visualize and assess how the font will look in a digital format. It will also enable me to make any necessary adjustments or refinements to further refine the font's futuristic style.

Fig. 1.3 - Working Process in Illustrator

2nd attempt (Idea 2)

Upon receiving feedback and considering my abilities and the time constraints, I have come to the realization that creating this font would be quite challenging for me. The task requires strong illustration skills, which I currently lack, and the limited time available adds additional pressure. Consequently, I have made the decision to switch to my second idea, which centers around exploring geometrical shapes. This topic has always fascinated me, and I believe it will be a fun opportunity to further explore.

Fig. 1.4 - Final Chosen Idea#2

In this new direction, I will begin by studying and experimenting with various existing letter fonts, analyzing how they are constructed. This analysis will help me understand the techniques and principles behind font design. Subsequently, I will contemplate how I can utilize geometrical shapes like triangles, squares, circles, and polygons to form the letters of my font.

Fig. 1.5 - Visual Research & Exploration

Sketches 

As the next step in the process, I began sketching out various versions of the font, allowing me to experiment and compare different iterations. This hands-on approach provides me with a tangible medium to explore different design options and determine which version best aligns with my desired outcome. By utilizing the flexibility and precision of digital sketching tools, I can easily make adjustments and fine-tune each variation to achieve the desired aesthetic.

During this phase, I take into consideration factors such as legibility, visual impact, and the overall geometrical style I aim to convey. By sketching out multiple versions, I can carefully analyze and compare the strengths and weaknesses of each design. 

Fig. 1.6 - Sketches 

Digitization

In Illustrator, my first step was to arrange the gridlines accordingly, aiding me in maintaining consistent gaps between each letter. To ensure accuracy, I used the Futura typeface as a reference to roughly determine the cap height and x-height. This reference served as a starting point, allowing me to make necessary adjustments and refinements.

Fig. 2.1 - Reference typeface (Futura)

Fig. 2.2 - Progress of digitization in illustrator

This is my first attempt at digitalizing this font, and overall, it looks good. However, I am not completely satisfied with the letters that have excessive gaps, indicating that they are constructed with too many squares. Upon careful examination of the font, I have identified areas where I can make enhancements to achieve a more streamlined and visually appealing design. By reducing the number of squares used to construct each letter, I can create a more balanced and cohesive look. This adjustment will not only improve the aesthetic appeal but also contribute to better legibility and readability.

Fig. 2.3 - First attempt at digitalizing 

Next, after reducing the number of squares used to construct the letters and making adjustments accordingly, the outcome improved significantly. However, upon receiving feedback from Mr. Vinod, I came to realize that the gap between the shapes within the letters was too narrow. This issue would become more apparent when the font is used at smaller sizes, as the close proximity of the shapes would make it difficult to distinguish the individual elements.

Fig. 2.4 - Second attempt at digitalizing

Taking Mr. Vinod's feedback into account, I decided to address this concern by increasing the gap between the shapes. I made the adjustment from 13pt to 23pt, ensuring that there is sufficient space for clarity and legibility, even at smaller sizes. While this process was time-consuming, it was crucial to meticulously adjust the gap for each individual letter to maintain consistency throughout the font.

Fig. 2.4 - Increase the space of the gap

Fig. 2.5 - Third attempt at digitalizing

Progress in Font Lab

Next, I followed a tutorial video provided by Mr. Vinod, the tutorial provided step-by-step instructions on how to transfer my font design from Illustrator or another software into FontLab. This involved copying the individual letter designs and pasting them into the appropriate sections within FontLab, ensuring that each character is accurately represented in the font file.

Fig. 3.1 - Import to Fontlab

Fig. 3.2 - Before and After fixing the kerning

To get a sense of how the font appears in FontLab, I took the initiative to type out all the letters of the alphabet, along with some words and sentences. This allowed me to see how each character interacts with others and how the font performs in various combinations.

By inputting all the letters, I ensured that each character was accurately represented in the font. This comprehensive approach enables me to examine the overall consistency and cohesion of the font as a whole. By reviewing the individual letterforms in conjunction with one another, I can identify any areas that require further refinement or adjustments.

Fig. 3.3 - Type out words in Font Lab

After typing a few words and sentences in FontLab and conducting a final double-check to ensure everything was in order. I made the decision to name the typeface "Geoluxe," a name that reflects the essence of its geometric and elegant.

Fig. 3.4 - Font Info

Fig. 3.5 - Font Note

With the naming process completed, I proceeded to export the font from FontLab. By exporting it, I obtained a usable font file that could be installed and utilized in various design applications. One such application is Adobe Illustrator, where I intended to further test and showcase the font's capabilities.

In Adobe Illustrator, I began by typing out all the letters of the alphabet, ensuring that each character was accurately represented. This step allowed me to see the font in action, examining how it performed in different combinations and contexts. To present the font effectively, I decided to showcase it against contrasting backgrounds, including both white and black backgrounds. This presentation approach enables viewers to appreciate the font's visual impact and readability in different settings.

Fig. 3.6 - Final Type Design "Geoluxe" with white BG

Fig. 3.7 - Final Type Design "Geoluxe" with black BG

Link to font file: 

https://drive.google.com/file/d/1UljYq_aA8cb07RX6wTEq6zXfgPKdrQVa/view?usp=sharing

Type Presentation

Moving on to the next stage, we are now tasked with presenting our typeface in a visually appealing manner. This presentation will showcase all the uppercase and lowercase letters, numeric characters, and punctuation marks that make up the complete character set of the font. To ensure a captivating presentation, we need to employ design techniques and aesthetics that enhance the visual impact of the typeface. The objective is to showcase the font's versatility, legibility, and overall aesthetic qualities.

Fig. 4.1 - Color palette 

Fig. 4.2 - Progress in Photoshop

Fig. 4.3 - Final Type Presentation of "Geoluxe" #1

Fig. 4.4 - Final Type Presentation of "Geoluxe" #2

Fig. 4.5 - Final Type Presentation of "Geoluxe" #3

Fig. 4.7 - Final Type Presentation of "Geoluxe" #4

Fig. 4.8 - Final Type Presentation of "Geoluxe" #5

Fig. 4.9 - Final Type Presentation of "Geoluxe" #6

Type Application 

The next step in the process is the application stage, where we begin to apply our typeface in various contexts and design projects. To streamline this process, I invested time in searching online for mock-up templates that align with the style and purpose of my typeface. Many of these templates are compatible with Adobe Photoshop.

By utilizing mock-up templates, I can showcase the versatility and adaptability of my typeface in different design scenarios. These templates provide pre-designed layouts and settings that allow me to easily integrate my typeface into various mediums, such as magazine, posters, advertisements, packaging, or signage.

1. Magazine Cover

In the application design, I have utilized a magazine book to showcase the geometric typeface I created. The combination of this typeface with a matching colorful theme and an image cover featuring a geometric building serves multiple purposes. Firstly, the clean lines and precise construction of the building harmonize perfectly with the geometric typeface, resulting in a visually cohesive design. The vibrant and colorful theme chosen for the magazine book complements the modern and sleek aesthetic of the typeface, instantly capturing attention and engaging readers. Moreover, the inclusion of the geometric building on the cover adds a significant visual impact, acting as a focal point and reinforcing the overall geometric theme. This unique combination of elements culminates in a visually captivating and contemporary design that reflects modernity, innovation, and a sense of dynamic energy.

Fig. 5.1 - Process of designing the magazine cover 

           Fig. 5.2 - Final Type Application #1 - Magazine 

2. Advertisement /Signage

Next, by utilizing my geometric typeface in the application of designs for advertisements and signage with attractive bright colors, it is ensured that its visually striking and distinct appearance will immediately capture attention. This makes it an ideal choice for grabbing the viewer's eye in a crowded advertising space or a busy signage environment.

Fig.5.3 - Process of  designing the advertisement and signage

Fig. 5.4 - Final Type Application #2 - Advertisement 1 

Fig. 5.5 - Final Type Application #3 - Advertisement 2

3. Packaging/ Stickers 

Next, I also incorporate the typeface into the application for packaging or sticker design. It helps establish and reinforce brand identity by creating a cohesive and visually impactful packaging solution. The clean lines and precise construction of the typeface contribute to a modern and sophisticated brand image.

Fig. 5.6 - Process of designing the packaging 

Fig. 5.7 - Final Type Application #4 - Packaging

4. Editorial

I incorporate the typeface into the application of editorial design as it aids in establishing a clear visual hierarchy within the layout, guiding readers' attention, and making content more accessible. The typeface's clean lines and precise construction ensure excellent readability, making it particularly suitable for headlines and subheadlines in editorial layouts.

Fig. 5.8 - Process of  designing the editorial 

Fig. 5.9 - Final Type Application #5 - Editorial

5. Transparent  Tape

Incorporating the typeface in the application for transparent tape design, the bold red typeface on the transparent tape creates a strong visual contrast, immediately capturing attention and making important messages or labels highly noticeable. The geometric nature of the typeface ensures clear legibility, even against the transparent background, allowing for easy readability of crucial information.

Fig. 5.10 - Process of  designing the tape

Fig. 5.11 - Final Type Application #6 - Tape

6. Lightbox Signage

For the last application, I am using a lightbox signage. The distinct and eye-catching appearance of the geometric typeface creates a powerful visual impact, particularly when illuminated.

Fig. 5.12 - Process of  designing the signage

Fig. 5.7 - Final Type Application #7 - Lightbox Signage

Final Task 3: Type Exploration and Application

Link to font file: 

https://drive.google.com/file/d/1UljYq_aA8cb07RX6wTEq6zXfgPKdrQVa/view?usp=sharing

Fig. 6.0 - Final Task 3: Type Exploration

Fig. 6.1 - Final Type Design "Geoluxe" with white BG (JPG)

Fig. 6.2 - Final Type Design "Geoluxe" with black BG (JPG)

Fig. 6.3 - Final Type Presentation of "Geoluxe" #1 (JPG)

Fig. 6.4 - Final Type Presentation of "Geoluxe" #2 (JPG)

Fig. 6.5 - Final Type Presentation of "Geoluxe" #3 (JPG)

Fig. 6.6 - Final Type Presentation of "Geoluxe" #4 (JPG)

Fig. 6.7 - Final Type Presentation of "Geoluxe" #5 (JPG)

Fig. 6.8 - Final Type Presentation of "Geoluxe" #6 (JPG)

Fig. 6.9 - Final Type Application #1 (JPG)

Fig. 6.10 - Final Type Application #2 (JPG)

Fig. 6.11 - Final Type Application #3 (JPG)

Fig. 6.12 - Final Type Application #4 (JPG)

Fig. 6.13 - Final Type Application #5 (JPG)

Fig. 6.14 - Final Type Application #6 (JPG)

Fig. 6.15 - Final Type Application #7 (JPG)

Fig. 6.17 - Final Task 3: Type Presentation (PDF)

Fig. 6.18 - Final Task 3: Type Application (PDF)

---

FEEDBACK

Week 10

General Feedback:

• Refer to the folder that Mr Vinod posted in the Facebook group, inside has a lot of good works of typefaces and study how they created their typefaces.
• During your creating process, you can draw a box and place it behind the letters, for your guide, maintain the same width and height for all letters.
• You can find and refer to fonts with your typeface, study previous works have done, observe the characteristic and try applying them to your work.
• You must have a very clear purpose of why you create this typeface, include them in slides.

Specific Feedback:

• You can refer to Wim Crouwel’s works, the typeface he created also looks futuristic and very well crafted, so you can study properly the font he created. 
• Just choose to design the font that with filled colour, don’t think about the outline design at this stage. 
• The slanted line at the corner is too short and looks very immature, you need to extend long a little bit. 
• Be careful with the round edges, the radius needs to be consistent and the same with all letters. 

Week 11

Specific Feedback:

• Overall looking good but need to refine some parts.
• The letter “7” doesn’t work, consider working on other designs.
• For the letter “N”, the proportion looks problematic and doesn’t look like an N.
• Take note that the gap for all letters needs to be all consistent, as for now your letters some look slightly different.
• I think maybe you going to have problem with your lowercase because the grid structure is not complex enough, but you can try with that. 

Week 12

General Feedback:

• Refer to the folder in fb that have lots of good examples, and study how they replicate or display their font. 
• For your next task, you are not restricted to just using your font only, you may use other fonts to contrast with your font. 
• Watch the senior YouTube tutorial about using FontLab. 

Specific Feedback:

• Adjust the x-height higher, if not it will look weird, you can try to look and observe other fonts their x-height is usually higher and somehow close to the cap height compared to yours.
• (After revising the lower cases) All look good, especially the upper-case A look interesting
• Need to be concerned about the gap, when the font is bigger the gap is fine, but when the font is smaller the gap will be hard to notice. Depends on you whether you want to refine all letters or just leave it. 
• For the semicolon, the bottom part of the comma makes it longer bit. 

Week 13

General feedback:

• Please ensure to use the resources I provided in the sharepoint folder as reference but also any other resource I provided (Pentagram work—for applications etc.)

Specific Feedback:

•  The @ look strange. 

---

REFLECTION

Experience

Overall, I would say that Task 3 was the most stressful compared to the others, as it involved a significant amount of work, including completing a whole set of typefaces and creating numerous collaterals. Despite the workload, I genuinely enjoyed this module to a great extent, as it provided me with valuable skills that can be applied to my career as a UI/UX Designer. Specifically, I have developed a heightened sensitivity towards selecting appropriate typefaces, adjusting the kerning between letters, and understanding the principles of good composition and alignment.

Observation

Throughout the adventure, I noticed that different individuals had varying perspectives on the creative process. For instance, while some preferred to keep idea sketches on hand, I personally preferred to directly digitize my work. Rather than spending more time on refining freehand sketches for digitization, I believed that instant digitization allowed for more flexibility and exploration. As I am not particularly skilled in traditional art, I found it more beneficial to begin the digitalization process right away rather than relying heavily on preliminary sketches. However, what I learned from my observations is that regardless of the approach or technique chosen, it is essential to use the methods that bring you enjoyment and align with your preferences in order to achieve the best results.

Findings

Throughout this experience in Task 3, I discovered the significance of documenting the process. After attending a presentation by our senior, I realized the importance of documenting our steps for further analysis and future reference, especially regarding the techniques we utilized to achieve desired outcomes. Mr. Vinod emphasized that keeping track of our progress would also help us avoid copyright infringement or plagiarism issues. Therefore, I believe that these insights will prove beneficial for my future endeavors in the design industry.

---

FUTHER READING 

Typographic Design: Form & Communication

Fig. 7.1 - Typographic Design: Form & Communication

Syntax and Communication (pg 85)

Syntax is the connecting of typographic signs to form words and sentences on the page. The elements of design — letter, word, column, and margin — are made into a cohesive whole through the use of typographic space, visual hierarchy, ABA form, and grid systems. 

The letter

Typographic system addresses the intrinsic character of the individual letter. 
The image below demonstrated contrasting visual characteristics of one family of type from another. It exists in various weights, sizes, and shapes.

The combinations of letters A and g and P and Q in Fig 1.3 & 1.4 are unified to create a stable gestalt. In the illustrated examples, there is an expressiveness and boldness to the individual letters. The syntax displayed here is an example of letter combinations acting as signs, extracted from a larger system of signs.

Through precise letterform drawing carefully considered from-to-counterform interaction, two dissimilar letters from a cohesive design.

Two letterforms are each broken into 2 geometric shapes of varying size and density, and the four resulting forms are combined into a delicate, asymmetrically balanced symbol.

A typographic sign is visually dynamic because of its interaction with the surrounding void — the white of the paper. This form - to - void relationship is inherent in the totality of typographic expression. 

The repetition of letter T in Fig 1.5 is balanced and complemented by its white space. 

It's the figure/ground reversal in the repetition of the letter T that created a balanced expressive poster.