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)
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)
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.
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
Post a Comment