TASK 3 TYPE DESIGN AND EXPLORATION

1.Create a New Font Make a new font (.ttf) that helps solve a problem or supports a solution in your area of interest (like graphic design, animation, media, or entertainment). Show how it can be used. 2.Improve an Existing Font Study an existing letterform, find its weaknesses, and improve it. Make a better version and show its use. Final result: a full font (.ttf) with application.

3.Experiment with Typography. Try something new and creative using type. Use different materials or media (3D, food, projection, music video, etc.). The final form depends on our idea.

Proposal

Before starting the font design and deciding on what kind of design to use, we need to create a proposal containing 3 ideas to present to Mr. Vinod on class by creating a proposal on slide.

Fig 3.1 Proposal slide (Week 8,10/06/2025)

After Mr.Vinod looked at my proposal presentation, he said that I can make my first idea (which is the expansion from task 3 Typography module), however I need to improve the letterform, so that it will be more consistent.

Fig 3.2 Idea Chosen (Expansion from task 3) (Week 9, 17/06/2025)

Digitization (Progress on Illustrator)

At first, I had difficulty on improving the letterform to make it better and more consistent, but Mr. Vinod taught me to start with the letters n and o first. Here is my first attempt at creating the letters n and o.

Fig 3.3 First Attempt for letter n and o (Week 9, 17/06/2025)

After trying to understand the shapes of the letters n and o as taught by Mr. Vinod, I started creating all the uppercase letterforms first. I added a decorative element, which is a kind of line on each letter, following the style I had created in the Typography module in Semester 1. This is my first attempt for the uppercase letters, but I was very unsatisfied with the result because it was very inconsistent, and I was confused about how to make all the letters consistent and well-designed.

Fig 3.4 First Attempt for uppercase letterforms (Week 10, 23/06/2025)

Mr. Vinod said that the letters looked very inconsistent, and he taught me how to make all the letters more consistent. He told me that the text decoration could be added later. What’s important now is to focus on creating the letterforms first. Mr. Vinod showed me how to build some shapes using a grid, and he said that the stroke width must be the same, which can be measured using the grid.

Fig 3.5 Progress of some letters (Week 10, 24/06/2025)

After being taught by Mr. Vinod how to make the font more consistent, I started to understand better how to create it, and I began designing all the uppercase letters one by one. Here are the basic shapes that i used to create the letterforms. I used the thick stroke, thin strokes all the same for each letterforms, and used the O shape to create letters that have curves, such as B for example.

Fig 3.6 Basic shapes (Week 10, 24/06/2025)

These are some of the letters I created after making the letters N and O. However, the letter B still looks very rough and untidy.

Fig 3.7 progress (Week 10, 24/06/2025)

Therefore, i make the letter B to looks more tidy and continue with the other letter.

Fig 3.8 Progress (Week 10, 24/06/2025)

Here is the second attempt for the uppercase letter (incomplete)

Fig 3.9 Second attempt uppercase letters (Week 10, 24/06/2025)

These are the letterforms before being combined into a single shape (some have already been combined using Pathfinder).

Fig 3.10 rough shape (Week 10, 24/06/2025)

Mr. Vinod said it was quite consistent, but the letters r, j, and u were still not neat. Therefore, I adjust those letters and created a complete version for all the uppercase letterforms.

Fig 3.11 Third Attempt Uppercase Letterforms (Week 10, 27/06/2025)

This is proof that I created the letterforms by combining the basic shapes, as I showed in the previous photo.

Fig 3.11 Third Attempt Uppercase Letterforms (Week 10, 27/06/2025)

After I felt that my uppercase font was quite consistent and neat, I continued to create the lowercase letters and punctuation using the same basic shapes as before. I started by making the letter a using basic shapes, a circle like the one used for the letter o and a thick stroke. Then, I continued creating other letters similar to a, such as b, g, and others.

Fig 3.12 Progress (Week 10, 27/06/2025)

Fig 3.123 Progress (Week 10, 27/06/2025)

Fig 3.14 Progress (Week 10, 27/06/2025)

After i'm done making the lowercase letterforms, i continued to make the punctuation and numbers. At this point, I still didn’t know how to create punctuation marks with the correct size and height.

Fig 3.15 Progress (Week 10, 27/06/2025)

Fig 3.16 Progress (Week 10, 27/06/2025)

Here is my fourth attempt for the overall lowercase letterform, uppercase letterform, numebrs, and punctuation before the feedback.

Fig 3.17 Fourth Attempt (Week 10, 27/06/2025)

After the feedback, Mr.Vinod said that the consistency is a little bit weird and he said that the artboard size must be 1000 for the height. He also think that i should change the number 8,3,9 and the punctuation height, it's all wrong. Mr. Vinod also said that the text decoration is optional and up to me. If it doesn’t look good, then it doesn’t need to be make.

Here, I changed the artboard height to 1000 and started everything from the beginning. I carefully measured the height of the letters to match my font reference, but I determined the width by myself.

Fig 3.18 Progress (Week 11, 29/06/2025)

After making sure the height was correct, I then double-checked whether the width of each letter was accurate.

Fig 3.19 Progress (Week 11, 29/06/2025)

After making sure that all the sizes were the same, I finally completed the uppercase letterforms with a version that had more consistent and uniform proportions. Here, all the letter sizes are the same, except for M and W, which are twice the width of the letter N, the letter O, which Mr. Vinod said should be made slightly wider than the others, and the letter I.

Fig 3.20 Progress (Week 11, 29/06/2025)

I continued by creating the lowercase letterforms as well as the punctuation. But before that, I measured the height and made sure it matched my font reference, just as Mr. Vinod instructed. Once the height was correct, I started creating the letters one by one, along with the punctuation and numbers.

Fig 3.21 Progress (Week 11, 29/06/2025)

Fig 3.22 Progress (Week 11, 29/06/2025)

Fig 3.23 Progress (Week 11, 29/06/2025)

Fig 3.24 Progress (Week 11, 29/06/2025)

Fig 3.25 Overall Progress (Week 11, 29/06/2025)

Fig 3.26 Outline (Week 11, 29/06/2025)

FINAL FONT DESIGN

Fig 3.27 Final Font Design (Week 11, 02/06/2025)

Fig 3.28 Final Font Design Outline (Pathfindered) (Week 11, 02/06/2025)

Kerning Progress (Font Forge)

First, I exported each letter one by one in SVG format.

Fig 3.29 Kening Progress (Week 11, 02/06/2025)

After that, I imported each letter into FontForge and adjusted it according to the baseline.

Fig 3.30 Kening Progress (Week 11, 02/06/2025)

This is how it looked once all the letters, punctuation, and numbers had been added.

Fig 3.31 Kening Progress (Week 11, 02/06/2025)

After importing everything, I continued with kerning based on the rules given by Mr. Vinod. However, I found that strictly following the rules often made the spacing look odd. So, I adjusted many of the values to make sure the spacing didn’t look too wide or strange to the eye.

Fig 3.32 Kening (Week 11, 02/06/2025)

Fig 3.33 Kening (Week 11, 02/06/2025)

Fig 3.34 Kening (Week 11, 02/06/2025)

Fig 3.35 Kening (Week 11, 02/06/2025)

Fig 3.36 Kening (Week 11, 02/06/2025)

Font presentation

First, I searched for colors that would suit the font application. Here, I used several colors that I found interesting, and I also created a few font presentation designs. This was my first attempt.

Fig 3.36 Font Presentation first attempt (Week 11, 02/06/2025)

Fig 3.37 Font Presentation first attempt (Week 11, 02/06/2025)

Fig 3.38 Font Presentation first attempt (Week 11, 02/06/2025)

However, I felt that the colors didn’t match well with my minimalist font, so I looked for new colors and changed the overall design of the font presentation. Here are the final color pallete that i used.

Fig 3.39 Color used (Week 11, 02/06/2025)

After that, I created several options for the font presentation. This is my second attempt before receiving feedback from Mr. Vinod in class.

Fig 3.40 Second Attempt Font Presentation (Week 11, 02/06/2025)

After the feedback, Mr. Vinod said that my letterforms looked too small. He explained that the focus should be on the font itself, not the decoration or background. He also told me to refer to the references he had provided. Therefore, this is my third attempt. Here, I created more than five versions for the font presentation.

Fig 3.41 Third Attempt Font Presentation (Week 12, 08/06/2025)

After considering which 5 font presentations to use for the final outcome and after consulting with Mr. Vinod, I finally chose these 5 presentations as my final outcome.

FINAL OUTCOME FONT PRESENTATION

Fig 3.42 Final Outcome Font Presentation (Week 12, 08/06/2025)

Fig 3.43 Final Outcome Font Presentation (Week 12, 08/06/2025)

Fig 3.44 Final Outcome Font Presentation (Week 12, 08/06/2025)

Fig 3.45 Final Outcome Font Presentation (Week 12, 08/06/2025)

Fig 3.46 Final Outcome Font Presentation (Week 12, 08/06/2025)

Font Application

The first application is for BodyCare and skincare. I wanted to create a skincare and bodycare product that looks professional, clean, and natural, which fits well with the minimalist theme of my font. First, I downloaded the mockup and opened it in Photoshop.

Fig 3.47 Font Application Progress (Week 12, 10/06/2025)

Then, I created the design in Adobe Illustrator with a minimalist theme. Here is the result of the design.

Fig 3.48 Font Application Progress (Week 12, 10/06/2025)

After that, I transferred the design to Photoshop, and this is the final result. I also resized it to 1024 x 1024.

Fig 3.49 Font Application Progress (Week 12, 10/06/2025)

After finishing the first application, I started working on the second one. The second product is a book. Here, I followed the same process as before, creating the design in Adobe Illustrator and Photoshop.

Fig 3.50 Font Application Progress (Week 12, 10/06/2025)

Fig 3.51 Font Application Progress (Week 12, 10/06/2025)

Fig 3.52 Font Application Progress (Week 12, 10/06/2025)

Honor Competition

After creating two font applications, I made four more for the Honor competition. I created a "standby" category as suggested by Mr. Vinod. The first one I made was a clock. This is the first design I created in Illustrator. After finishing it in Illustrator, I transferred it to Photoshop to add texture and also placed the Honor competition logo, which I changed to white.

Fig 3.53 Font Application Progress (Week 12, 10/06/2025)

Fig 3.54 Font Application Progress (Week 12, 10/06/2025)

Fig 3.55 Font Application Progress (Week 12, 10/06/2025)

Fig 3.56 Font Application Progress (Week 12, 10/06/2025)

Fig 3.57 Font Application Progress (Week 12, 10/06/2025)

After that, I created the second design. Here, I used my font name and a quote related to my font as the text. For the background, I made slight adjustments to the right and left sides to add a bit of variation.

Fig 3.57 Font Application Progress (Week 12, 10/06/2025)

Fig 3.58 Font Application Progress (Week 12, 10/06/2025)

Fig 3.59 Font Application Progress (Week 12, 10/06/2025)

For the third design, I created a different background from the previous designs to make it look less boring.

Fig 3.60 Font Application Progress (Week 12, 10/06/2025)

The final step is creating an animation in Adobe After Effects using the initial design. First, I imported all the PDF files into After Effects separately. I separated the background and each individual letter or number. Once all the elements were imported, I arranged the position and adjusted the opacity of each number or letter. By modifying these parameters, I created a smooth translation animation that aligns with the design concept I made earlier.

Fig 3.61 Animation Progress (Week 12, 10/06/2025)

Fig 3.62 Animation Progress (Week 12, 10/06/2025)

Fig 3.63 Animation Progress (Week 12, 10/06/2025)

Fig 3.64 Animation Progress (Week 12, 10/06/2025)

Turns out that all of us cannot upload the submission for the honor competition because the category isn't longer existing.

Fig 3.65 Screenshot Proof that the Category is no longer existing (Week 13, 15/07/2025)

FINAL OUTCOME FONT APPLICATION AND HONOR COMPETITION

Fig 3.65 Font Application Final Outcome (Week 12, 10/06/2025)

Fig 3.66 Font Application Final Outcome (Week 12, 10/06/2025)

Fig 3.67 Honor Competition Final Outcome (Week 12, 10/06/2025)

Fig 3.68 Honor Competition Final Outcome (Week 12, 10/06/2025)

Fig 3.67 Honor Competition Final Outcome (Week 12, 10/06/2025)

Fig 3.68 Honor Competition Final Outcome (Week 12, 10/06/2025)

FINAL OUTCOME COMPILATION

Fig 4.1 Font Download Final Outcome (Week 13, 14/07/2025)

Download the font here

Fig 4.2 Letterforms, Numbers, and Punctuations PDF (Week 13, 14/07/2025)

Fig 4.3 Lowercase Letterforms Kerning Font Forge Screengrab (Week 13, 14/07/2025)

Fig 4.4 Numbers Kerning Font Forge Screengrab (Week 13, 14/07/2025)

Fig 4.4 Punctuation Kerning Font Forge Screengrab (Week 13, 14/07/2025)

Fig 4.5 Uppercase Letterform Kerning Font Forge Screengrab (Week 13, 14/07/2025)

Fig 4.6 Font Presentation Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.7 Font Presentation Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.8 Font Presentation Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.9 Font Presentation Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.10 Font Presentation Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.11 Font Application Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.12 Font Application Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.13 Honor Competition Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.14 Honor Competition Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.15 Honor Competition Final Outcome JPEG (Week 13, 14/07/2025)

Fig 4.16 Honor Competition Final Outcome Animation (Week 13, 14/07/2025)

Fig 4.17 Font Presentation PDF (Week 13, 14/07/2025)

Fig 4.18 Font Application PDF (Week 13, 14/07/2025)

Fig 4.19 Honor Competition (Font Application) PDF (Week 13, 14/07/2025)

Fig 4.20Honor Competition (Font Application) Animation Week 13, 14/07/2025)

FEEDBACK

Week 13
General Feedback: Last consultation with Mr.Vinod for task 3
Specific Feedback: Mr.Vinod said that it's already good.

Week 12

General Feedback: Consultation with Mr.Vinod for the font presentation and kerning

Specific Feedback: Mr.Vinod said that it’s already good, however my letterforms looked too small. He explained that the focus should be on the font itself, not the decoration or background. He also told me to refer to the references he had provided.

Week 11

General Feedback: Consultation with Mr.Vinod for all letterforms and punctuation

Specific Feedback: Mr.Vinod said that the consistency is a little bit weird and he said that the artboard size must be 1000 for the height.

Week 10

General Feedback: Consultation with Mr.Vinod for uppercase letterform (task 3)

Specific Feedback: Mr.Vinod said that my font is not consistent and I must re-do it because I should pay attention to the grid to make it more neat and also I shouldn’t add the line decoration first, just focus on the basic letterform. Mr.Vinod also taught me how to create a consistent shape for my letterform.

Week 9

General Feedback: Consultation with Mr.Vinod for task 3 proposal

Specific Feedback: Mr.Vinod said that I can make my first idea (which is the expansion from task 3 Typography module), however I need to improve the letterform, so that it will be moroe consistent.

REFLECTION

Experience

After doing task 3, i got a lot of new knowledge about how to create a good and consistent font. I also learnt how to present our font in an interesting way. Now i know that grid is very important when we want to create a font, so that our font will be consistent. I also learnt how to use a new software, which is font forge. It was very hard at the beginning to adjust the side bearing using font forge, however it also fun learning new things.

Observation

I realized that creating a font should be very consistent and having a reference font for the reference height is also important. Moreover, when creating a font presentation, the one that should be highlighted is our font and not the background and other decoration.

Findings

For me, when creating a font, we must carefully consider its theme and ensure it is used appropriately.\

FURTHER READING

Fig 7.1 Further Reading Book (Week 11, 02/06/2025)

1.Choosing a Font:

-Font readability depends on x-height (height of lowercase letters) and the relationship to uppercase letters and ascenders.

-Fonts with tall x-heights are easier to read.

2.Font Anatomy:

-Fonts have parts like baseline, cap height, ascenders, descenders, serifs, strokes, and terminals.

-These parts affect how letters look and how easy they are to read.

3. Trivia:

-"Uppercase" and "lowercase" come from how letters were stored in printing: capital letters in the upper case, small ones in the lower case.

4.Special Styles:

-Good underlines don’t touch letters

-All Caps & Small Caps: Use sparingly

5.Special Styles:

Includes superscript, subscript, baseline shift, strike-through, and text skewing.

Search This Blog

Jennifer Michelle Hiendrawan (0374682)

TASK 3 TYPE DESIGN AND EXPLORATION

Comments

Post a Comment

Popular Posts

ADVANCED INTERACTIVE DESIGN TASK 1 PROPOSAL

ADVANCED INTERACTIVE DESIGN TASK 2