Advanced Typography - Task 3 / Type Exploration & Application

Create a font that is intended to solve a larger problem/ part of a solution in the area of your interest.
Explore existing letterforms in an area of interest.
Experimental design

From the options given, we were instructed to present a proposal consisting of our ideas related to the topic.

Below is my proposal presentation:

TASK 3 Proposal

Research/ collecting references 1

I first chose my final proposal, which is the "Vintage font." Below are some visual references I found to help me design this typeface more effectively.

Fig 1.1 References, Week 9

Digital Sketch 1

I used different rectangles in Illustrator to construct the letters, especially using tilted squares to form the prominent parts of the typeface.

Fig 1.2 Outline view, Week 9

Fig 1.3 Digital process, Week 9

Everything went smoothly when I was creating the uppercase letters. However, when I moved on to the lowercase letters, many of them still failed to meet my expectations despite multiple adjustments to the details. So, I decided to start experimenting with the typeface for my Proposal 2.

Research/ collecting references 2

Proposal 2 is based on the typeface of my favorite K-pop boy group, NCT. Below are the references I found based on this style:

Fig 2.1 References, Week 9

Digital Sketch 2

I also used rectangles to construct the letters, and this time I used the Pen Tool for areas that required curves.

Fig 2.2 Digital process, Week 9

Fig 2.3 Outline view, Week 9

Fig 2.4 Uppercase & lowercase process overview, Week 9

Feedback and Adjustments

During the feedback session in week 10, Mr. Vinod said that some of my lowercase letters, such as “b,” “d,” “h,” and others, should reach the ascender line in height.

Fig 3.1 Before font modification, Week 10

Fig 3.2 Font modification comparison, Week 10

1. Uppercase and lowercase letters

Fig 4.1 Uppercase & lowercase process overview, Week 10

Fig 4.2 Outline view, Week 10

Finalized outcome uppercase & lowercase

Fig 4.3 Finalized uppercase & lowercase letterforms, Week 10

2. Numerals & Punctuations

The creation method for numbers and punctuation marks is the same as that of the letters above. I kept the basic width and height consistent with the uppercase letters.

Fig 4.4 Numerals & Punctuations process overview, Week 11

Fig 4.5 Outline view, Week 11

Finalized outcome Numerals & Punctuations

Fig 4.6 Finalized numerals & punctuations, Week 11

FontForge

To create the typeface, I used software called “FontLab” to import my font designs.

First, I defined the baseline of the typeface and adjusted the data accordingly.

Fig 5.1 Font adjust, Week 12

Next, I took the merged typeface from Adobe Illustrator and imported it into FontLab.

Fig 5.2 Font import, Week 12

After importing into FontLab, I made adjustments to the details.

Fig 5.3 Font details adjustment , Week 12

Kerning

I adjusted the letter spacing based on the spacing chart provided by Mr. Vinod.

Fig 5.4 Sidebearing measurement table, Week 12

After that, I started adjusting the spacing. At first, the spacing was too wide. Mr. Vinod demonstrated it for me, and after continuous adjustments, we both agreed that a spacing of 10 between each letter works best for the typeface I designed.

Fig 5.5 Font distance adjustment, Week 12

I tested and adjusted the letter spacing by typing out some sample text.

Fig 5.6 Kerning test, Week 12

Font Presentation

Before starting the layout design for the typeface presentation, I created a color palette. My design is inspired by the K-pop boy group NCT. Their official fan color is neon green, so I created a color palette that complements it.

Fig 6.1 Colour Palette, Week 13

While designing, I wanted the background to have more texture, so I used a grainy texture effect.

Fig 6.2 Production process 1, Week 13

To create a different visual effect, I also experimented with applying a 3D effect to the typeface.

Fig 6.3 Production process 2, Week 13

Fig 6.4 Production process 3, Week 13

Here is the layout of the font representation in Adobe Illustrator:

Fig 6.5 Font representation layout, Week 13

Finalized Font Presentation artworks

Fig 6.6 Font Presentation 1, Week 13

Fig 6.7 Font Presentation 2, Week 13

Fig 6.8 Font Presentation 3, Week 13

Fig 6.9 Font Presentation 4, Week 13

Fig 6.10 Font Presentation 5, Week 13

Font Application

Since my typeface was based on the font of a K-pop boy group, I designed a series of applications that align with the persona of a K-pop idol: album covers, staff badges, street posters, merchandise notebooks, and concert tickets.

All mockup application layouts were prepared in Adobe Illustrator.

Fig 7.1 Text/ Necessary elements for mockup, Week 13

To make it more authentic, I downloaded an NCT DREAM album cover and modified it by changing it to monochrome and replacing the album title with my typeface.

Fig 7.2 Font application process, Week 13

Then I downloaded PSD files of these items from Freepik and completed the font application in Photoshop.

Fig 7.3 Font application process, Week 13

Fig 7.4 Font application process, Week 13

Finalized Font Applications

Fig 7.5 Font Application 1, Week 13

Fig 7.6 Font Application 2, Week 13

Fig 7.7 Font Application 3, Week 13

Fig 7.8 Font Application 4, Week 13

Fig 7.9 Font Application 5, Week 13

Task 3 Final Outcome

Click here to download NEO font

Fig 9.1 Final PDF of NEO font, Week 12

Fig 9.2 FontLab screengrab of font, Week 12

Fig 9.3 Final font presentation 1, Week 12

Fig 9.4 Final font presentation 2, Week 12

Fig 9.5 Final font presentation 3, Week 12

Fig 9.6 Final font presentation 4, Week 12

Fig 9.7 Final font presentation 5, Week 12

Fig 9.8 Final font application 1, Week 12

Fig 9.9 Final font application 2, Week 12

Fig 9.10 Final font application 3, Week 12

Fig 9.11 Final font application 4, Week 12

Fig 9.12 Final font application 5, Week 12

Fig 9.13 Final compiled font presentation PDF, Week 12

Fig 9.14 Final compiled font application PDF, Week 12

HONOR STANDBY DESIGN

What we need to design:

1. Clock Design

2. Personalized Signature Design

3. Overall Visual Design

4. Animation Design

Dimension: 6000*3000PX, Format: JPG, Color Mode: RGB, Size: ≤20M

Research/ collecting references:

Fig 10.1 Record font reference, Week 13

I chose to analyze based on my typeface, and I selected "Genesis · The Future: Imagine the Innovative World of the Future" as the theme. This led me to think about the high-tech nature of modern society, which became the inspiration for my design.

I started with the typeface in Illustrator. Since my original font wasn't eye-catching enough, I added geometric shapes and gradient colors to it. This kept the structure of the numbers unchanged, but made the details look richer upon closer inspection.

Fig 10.2 Production process, Week 13

I also added inner glow to make the typeface look more refined.

Fig 10.3 Production process, Week 13

When designing the overall visual, I searched online for elements that represent modern technology and incorporated them into the design.

Fig 10.4 Production process, Week 13

After finishing the design in Illustrator and before importing it into Photoshop, I wanted the overall design to look darker, so I adjusted the colors to be slightly deeper.

Fig 10.5 Production process, Week 13

Finally, I imported the elements that needed to be animated, along with the JPG of the clock interface, into Adobe After Effects. I wanted to animate the background clouds and make the light in the changing numbers shift dynamically.

Fig 10.6 Production process, Week 13

FINAL HONOR STANDBY DESIGN:

Fig 11.1 Final honor clock standby, Week 13

Fig 11.2 Final honor personalized signature design, Week 13

Fig 11.3 Final honor overall visual design, Week 13

Fig 11.3 Final honor clock standby MP4 animation, Week 13

Fig 11.4 Final honor design elaboration of my standby design PDF, Week 13

FEEDBACK

Week 9:

General Feedback: In Week 9, Mr. Vinod reviewed our Task 3 proposals, told us what needed to be completed, and showed us what should be included in the blog for Task 2.

Specific Feedback: None.

Week 10:

General Feedback: This week, sir said that when we create lowercase letters, make sure to place them together with the uppercase letters. When designing symbols and punctuation marks, be sure to refer to existing typefaces so we can understand their size. Do not build them blindly. Also, make sure the artboard height is set to 1000 pixels.

Specific Feedback: Sir told me that the thickness and details of some uppercase letters need to be completely consistent with the other letters.

Week 11:

General Feedback: The instructor introduced us to the honors competition and demonstrated the appropriate sizes for some symbols. He also briefly explained the next task: generating the typeface in FontLab. After that, we need to complete three applications and five presentations to showcase our typeface.

Specific Feedback: Mr. Vinod said that some of my lowercase letters, such as “b,” “d,” “h,” and others, should reach the ascender line in height.

Week 12:

General Feedback: Sir taught us how to adjust letter spacing and guided us on how to export fonts using FontLab and FontForge.

Specific Feedback: Sir thought the spacing I set between the letters was too wide. After further adjustments, we finally confirmed that a spacing of 10 is the most suitable for the typeface I designed.

Week 13:

General Feedback: In Week 13, Mr. Vinod reviewed our final typeface presentations and font applications, and asked us to make improvements and revisions.

Specific Feedback: Sir said my font presentation and font applications are very interesting and good.

REFLECTION

Experiences:

This project was both challenging and rewarding. I realized that designing a font is not easy. From choosing the proposal to the creation stage, I went through many trials and errors before finally creating a font I was happy with. Exporting the font was difficult due to software issues and took many attempts. But when I worked on the font presentation and application, I felt all the effort paid off. It let me truly experience the power of design and a strong sense of accomplishment.

Observations:

I observed that a typeface plays a very important role in conveying a concept. For example, when I was searching for a proposal for this task, I referred to various fonts used in different K-pop idols’ album concepts. A suitable typeface can enhance the audience’s sense of immersion and help communicate the concept more effectively. I felt this even more strongly later on when designing the font application.

Findings:

During the typeface design process, I constantly adjusted the style and size of the letters, which helped me appreciate the importance of patience. I also found that creating a font requires great attention to detail and precision, especially when designing lowercase letters and symbols.

Search This Blog

Pan Ruining(0378138)

Advanced Typography - Task 3 / Type Exploration & Application

Comments

Post a Comment

Popular posts from this blog

TASK 1: EXPLORATION

Interactive Design - Exercise 1

Intercultural Design | PROJECT 1 : PROPOSAL