Advanced Typography | Task 3 : Type Exploration & Application

17.06.25 - 15.07.25 / week 9 - week 13

Subhana Salim / 0375936 

Advanced Typography/ Bachelor's of Design (Honours) in Creative Media / Taylor's University 

Task 3 : Type Exploration & Application


TABLE OF CONTENTS

2. Instructions  

3. Task 3 : Type Exploration & Application

4. Final Outcome

5. Feedback

6. Reflection

7. Further Reading




INSTRUCTIONS



Task 3: Type Exploration and Application
Task 3 requires us to create a new font as a result of exploration, experiment or problem solving.



TASK 3 : 
TYPE EXPLORATION & APPLICATION

Font Process
During week 9, Mr. Vinod requested us to present our ideas through which he would approve them. This is my ppt with the following ideas. 

 
Figure 1.1 Design Proposal PPT (Week 9, 17/06/2025)

Mr. Vinod looked through my ideas and gave me some critiques. 
Idea 1 - He suggested that if I were to use the design of the 0 in my final font, I should take note of the not overusing the decorative element in my design. He also suggested that having each letter influenced from a different alien would make the font inconsistent. 
Idea 2- He suggested that I should take reference from henna artists for my font design
Idea 3- He felt that making all the letters circular was too constrictive and make the design too monotonous.

I finally decided to make a ben 10 font inspired by the alien 'Upgrade'. I first started by gathering references images of upgrade as well font shapes similar to the design I want to gather. 

Figure 1.2 Reference board (Week 10, 24/06/2025)

Then I began designing the fonts on paper to get an idea of my design. 
Figure 1.3 Sketches of the fonts (Week 10, 24/06/2025)

I came up with two designs :- one is based on the number 0 of the Ben10 title, second is based of the Ben 10 alien upgrade.
Figure 1.4 Two variations of font design (Week 10, 24/06/2025)


Then I began digitizing the font in illustrator. I decided due to the style of the font that I would make it a Unicase font.
Figure 1.5 Process work (Week 10 - Week 11, 24/06/2025- 01/07/2025)


For all the letters I followed these following steps. First I would create a grid and resize the imported image into the grid. Then I placed the simple geometric shapes within the grid. After doing that I merged the shaped and cropped the parts that went out of the grid. Finally I added in the line designs, that is visually present on Upgrade's design and turn them into negative space within the shape.
Figure 1.6 Steps to making the font (Week 10, 24/06/2025)

This is the process work of the all the letters and the numbers.
Figure 1.7 Letter making process (Week 10 - Week 11, 24/06/2025- 01/07/2025)

After the letters and numbers, I worked on all of the punctuations for my font. Due to most of the punctuations being smaller and thinner than my actual font, I decided to omit adding the line details into the font for a lot of them.

Figure 1.8 Process of making the punctuations (Week 12, 08/07/2025)



This is the final font I designed along with the outlines.
Figure 1.8 Font Design Letters (Week 10, 24/06/2025)

Figure 1.8 Font Design Numbers (Week 11, 01/07/2025)

Figure 1.8 Font Design Punctuations (Week 12, 08/07/2025)


Then I began editing the font in Fontlab version 8. 
Figure 1.9 Font Lab progress (Week 11-12, 01/07/2025 - 08/07/2025)



Font Presentation Process
Then I started with the font presentation process. Since my font is influenced by the Ben 10 alien, I decided to go with the color palette of Ben 10 and Upgrade, both of which are very similar to each other. 
Figure 2.1 Color Palette inspiration (Week 13, 15/07/2025)


This is the color palette I chose for my design, with green, black and white as the main colors and yellow as the accent color. 
Figure 2.2 Color Palette (Week 13, 15/07/2025)

For the first design, I decided to display the entire font, including letters, numbers and punctuations. I first 'Image Traced' the image of the Upgrade alien and placed in on the canvas. 

Figure 2.3 Font presentation process 1 (Week 13, 15/07/2025)

For the second design, I decided to make a design inspired by Binary Code. I made the numbers green and cover the black background. Over which I placed the Upgrade alien silhouette on top.
Figure 2.4 Font presentation process 2 (Week 13, 15/07/2025)

For the third design, I decided to display the punctuations. Along with this I decided to add letters that span across the page and highlighted it in green. While the punctuations are applied in a grayscale gradient. I turned all the letters to only outline form.
Figure 2.5 Font presentation process 3 (Week 13, 15/07/2025)

For this design I decided to emulate the pattern found in Upgrade's body. Along with this I added in green and yellow gradients which are other supplementary colors found in Ben 10.
Figure 2.6 Font presentation process 4 (Week 13, 15/07/2025)

For my final font presentation I decided to do a Typographic layout in the colors green, black and white. I started with creating a black box over the canvas and then I added a grid texture and added a gradient it. I decide to place the words "BEN 10" on two edges of the canvas. I placed another text in the center. Finally I added smaller text on the two opposite edges of the center quote.
Figure 2.7 Font presentation process 5 (Week 13, 15/07/2025)


Font Presentation Outcome

Figure 2.8 Font Presentation 1 (Week 13, 15/07/2025)

Figure 2.9 Font Presentation 2 (Week 13, 15/07/2025)

Figure 2.10 Font Presentation 3 (Week 13, 15/07/2025)

Figure 2.11 Font Presentation 4 (Week 13, 15/07/2025)

Figure 2.12 Font Presentation 5 (Week 13, 15/07/2025)



Font Application Process
After this I started working on Font application.  This decided to make my designs based on the 'Standby' category. First I started off making the designs. I placed in the letters and the numbers on the canvas. Then I added gradients to the background as well the letters. I also added a subtle shadow to all the letters. 
Figure 3.1 Font Application process 1 (Week 13, 19/07/2025)

I later went in and change the colors of the design, to create more variation in the design. I also changed the design of the background as I wasn't liking it very much.
Figure 3.2 Font Application process 2 (Week 13, 19/07/2025)

Then I put it into the photoshop template and adjusted the dimensions.
Figure 3.3 Font Application process 3 (Week 13, 19/07/2025)

Then I began with the animation. I saved the images as individual PNGs and then imported them into After Effects. I was struggling with After Effects, so I moved the animating process to Photoshop. 
Figure 3.4 Font Application process 4 (Week 13, 19/07/2025)

For the other two font applications, I decided to go with a poster design for the first one. I referred this background for the design elements for my poster. In this design I noticed green and yellow gradients, halftones, the Ben10 logo and the black geometric design on the top, which are elements are decided to include.
Figure 3.5 Reference for poster (Week 13, 19/07/2025)

I started with adding a gradient and then added the Ben 10 watch symbol. I put a radial and gaussian blur on the symbol and reduced the opacity. Then I copied the symbol twice and changed the colors to green and yellow respectively and positioned on the top and the bottom. Then I added the halftone gradient in the background and added the black geometric shape on the top. Then as final touches, I added the text, the logos.
Figure 3.6 Font application process 5 (Week 13, 19/07/2025)

In order to make it look more like a poster, I placed the poster onto another canvas. I changed the background and added shadow to the background as well as the poster. I added a half-tone gradient to the background. Finally I duplicated the poster twice and placed it in the background and blurred it.
Figure 3.7 Font application process 6 (Week 13, 19/07/2025)


Then for the last font application I decided to go with a T shirt design, using the font as inspiration for a game, due to its retro features. My design was inspired by this image 
Figure 3.8 Reference for T-shirt (Week 13, 19/07/2025)

I began by creating my design in illustrator. Then I downloaded the T-shirt template from google and imported into photoshop. Then warped the image onto the shape and warped it to blend more with the T-shirt. I also put the blend mode screen to help with this. Finally I saved the image as a PNG and brought it back to illustrator where I finally added the background, shadow and textures.
Figure 3.9 Font application process 7 (Week 13, 19/07/2025)


Font Application Outcome

Figure 3.10 Font Application 1 'Honor Competition Standby Category'(Week 13, 19/07/2025)

Figure 3.11 Font Application 2 'Honor Competition Standby Category' (Week 13, 19/07/2025)

Figure 3.12 Font Application 3 'Honor Competition Standby Category' (Week 13, 19/07/2025)

Figure 3.13 'Honor Competition Standby Category' Animation (Week 13, 19/07/2025)

Figure 3.14 Font Application 4 (Week 13, 19/07/2025)

Figure 3.15 Font Application 5 (Week 13, 19/07/2025)


TASK 3 : FINAL OUTCOME

Click here to Download the font 

Figure 4.1 Ben 10 Upgrade Font Embedded PDF (Week 12, 08/07/2025)

4.2 Font Lab Screen Grab 'Uppercase'(Week 11, 01/07/2025)

4.3 Font Lab Screen Grab 'Lowercase'(Week 11, 01/07/2025)

4.4 Font Lab Screen Grab 'Numbers'(Week 12, 08/07/2025)

4.5 Font Lab Screen Grab 'Punctuations'(Week 12, 08/07/2025)


Font Presentation 

Figure 4.6 Font Presentation 1 (Week 13, 15/07/2025)

Figure 4.7 Font Presentation 2 (Week 13, 15/07/2025)

Figure 4.8 Font Presentation 3 (Week 13, 15/07/2025)

Figure 4.9 Font Presentation 4 (Week 13, 15/07/2025)

Figure 4.10 Font Presentation 5 (Week 13, 15/07/2025)


Font Application

Figure 4.11 Font Application 1 (Week 13, 19/07/2025)

Figure 4.12 Font Application 2 (Week 13, 19/07/2025)

Figure 4.13 Font Application 3 (Week 13, 19/07/2025)

Figure 4.14 'Honor Competition Standby Category' Animation (Week 13, 19/07/2025)

Figure 4.15 Font Application 4 (Week 13, 19/07/2025)

Figure 4.17 Font Application 5 (Week 13, 19/07/2025)

 
Figure 4.18 Font Presentation & Application Pdf embedded (Week 13, 19/07/2025)


Font Preview





FEEDBACK

Week 9:
General Feedback: 
During week 9, Mr. Vinod started with it reviewing our blog spot. One of the main critiques were formatting issue which the content was organized . He said that the different subheadings should have clear divisions. He also emphasized us to follow the guidelines for the submission of the works for each task. He wants us to date our work and make sure the work is complete.  He also briefed us on Task 3 and asked us to submit our proposal for Task 3 ideation.  

Specific Feedback:
When he reviewed my E-portfolio he commented that majority of the blog is well organized but he mentioned on changing a few things. He told me to add jump links and date my work. He asked me to resubmit task a movie poster, as he wanted me to add company logos in my poster.   

Week 10 :
General Feedback: 
Formatting issue,  organizing information to make clear divisions, follow the submission format for the final work. date your assignments. complete your work. Task 3 briefing

Specific Feedback:
I showed him the sketches of my uppercase font. He said that I need to digitize the font first form him to be able to properly judge the consistency of the font. After which I showed him some of my digitized font which he said that I need to speed up the pace as this task has a tight deadline.

Week 11 :
General Feedback: 
For week 11,  we were asked to be finished off with our font (uppercase, lowercase, punctuations, numbers). He asked us to submit our work on Facebook and after which he gave feedback. 

Specific Feedback:
Mr. Vinod looked at my font and said that it looks like the character. He asked me to resize my letters. He also gave me guidance on how to reconstruct the letter S. He told me to proceed with the font and finish it off.

Week 12 :
General Feedback: 
For week 12, We were asked to finalize our font and be done with the font presentation and application. He also detailed that week 13 is the deadline. He also went around the class to preview our progress

Specific Feedback:
Mr. Vinod looked at my font and said I could proceed. He did tell me to speed up and that I would have a lot of work to do since next week is the submission.

Week 13:
General Feedback: 
For week 13,We were mainly required to be finished with everything. He told us to post our work in the Facebook post. He went by the entire class to review our work one more and give feedback. For those who were done were required to start with the final compilation. He gave us another week extension for those who didn't complete to finish off our work.

Specific Feedback:
Mr. Vinod looked at font presentation and mainly approved it. He asked me to make sure all of my presentations were similar in color-palette so that they look more cohesive.



REFLECTIONS

Experience
For task 3, I was initially intimidated as I was required to recreate an entire font with based on either, expansion, experiment or problem solving. At first I found difficult in finding a topic, but with enough inspiration I landed on a topic. The tutorial classes for the last task had a different format. Despite being more labor intensive, the classes were more relaxed. He asked us to post our work in the Facebook post, while he came to us personally to review our work. His feedbacks were helpful and guided me to the right path.

Observation
I learned that font making requires visual consistency and it can be easily lost if not taken consideration of. At first I decided to make each letter design inspired by a different alien, which Mr. Vinod disapproved of as it could result in a visual incoherent typeface. Focusing on a single alien design allowed me to maintain that. I observed that watching my other classmates work allow me to also focus on my tasks. 

Findings
I especially struggled to with managing my time with this task. I also found myself more concentrated on my work than before during my lecture classes. During this task, I prioritized feedback from both Mr. Vinod as well as my friends. I find that this Task had the least number of criticisms from Mr. Vinod, which perhaps mean that this is my best work.



FURTHER READING

1.Further Reading 1: Typography Referenced
For my first further reading I decided to refer one of the books provided by Mr. Vinod, called 'Typography Referenced'. I particularly looked into the pages 36-51 where they go into detail about font creation.
Figure 3.1 Typography Referenced

'Tools and Concepts' : This section talks about the origin of type design and that it was originated from graffiti, signage, etc. Designers rely on mental models of writing tools such as nibs and brushes during the character creation process. These tools help with consistency, rhythm and spacing. These qualities has also presently transferred to digital designs as well. 

Figure 3.2 Tools and Concept

 

'From a Letter to a Typeface' : There are several sequences of letter a type designer starts with based on level of experience and skill. However a new designer might try the letters a d e h i n o s (or the word “adhesion” for ease) to get started. It provides them with a small enough set to change direction quickly but large enough to offer a good balance.

Figure 3.3 From a Letter to a Typeface 


'Rendering Environment' : An important aspect of type design is rendering environment or application of display of type. Type designers analyze must render well across digital and print platforms, including varying resolutions and anti-aliasing conditions. Spacing needs to be flexible for different sizes and display contexts such as mobile, web, print. At small sizes, space must be increased for clarity and large sizes, precision becomes more noticeable.

Figure 3.4 Rendering Environment 

'Familiar Shapes, New Interpretation' : Some designers intentionally break traditional spacing rules for expressive or experimental results. What counts as good spacing is now determined by the style, mood, genre of the typeface.

Figure 3.5 Familiar Shape, New interpretations  


2.Further Reading 2:- 'Creating a font from scratch: A detailed guide and tips for choosing software' 
For my second further reading I decided to read a blog article 'Creating a font from scratch: A detailed guide and tips for choosing software'.

Figure 3.6 Creating a font from scratch: A detailed guide and tips for choosing software

It details on the process of creating a font. 
1. Ideation : Starting with the ideation process where we determine the style, set, and nature, as well as determining the application of the font. Then you must set deadlines in order to build productivity. During this 3-10 typefaces close to your design must be chosen studying their graphical features, sizes, and other font parameters. Then we must decide on the character set:- such as Basic Latin, numbers and a punctuation set.
Figure 3.7 Ideation


2. Sketches : Which is using tools such as pencil, ink, brush or graphic editor. This is done to define the visual shaped of the font.
Figure 3.8 Sketches


3. Drawing the character set : After this, then the font can be created in Font editor. After which several technical considerations are looked into. Mastering is checking and editing of contours, component, diacritics and other elements of font. Kerning is the process of spacing of letters. Hinting is the visual markup of the font for the correct display of small sizes in various operating systems.

Figure 3.9 Technical Part





Comments