Advanced Typography | Task 3: Type Exploration and Application
- 9/6/2026 ~ 21/7/2026/ (Week 8 ~ Week 13)
- Takeguchi Shunta/0386416/Bachelor of Design in Creative Media
- Advanced Typography GCD60104
- Task 3: Type Exploration and Application
TABLE OF CONTENTS
LECTURES
INSTRUCTION
PROCESS WORK
The final assignment in Advanced Typography was to create a font
that could achieve a set goal. First, I came up with three ideas and
put them together on a slide. I had trouble coming up with
ideas, but by looking at various images for reference, I was able to
come up with three feasible ideas.
Figure 1.1 Task 3 idea presentation, week 8, 15/6/2026
In Week 9 class, I showed my sketches to Mr. Vinod, and he told me
to proceed with the third idea. Once the direction was decided, I
then started working on the capital letters. I was told to use a
grid to create the letters, so I created a basic grid by arranging
4x9 squares. I worked on this grid to ensure that the line
thickness and position were even.
Figure 1.2 Font creation grid, week 8, 15/6/2026
The letters were formed by copying shapes from the wordmark
created in Task 2. The three basic shapes are shown below, and for
letters where it was difficult to use these shapes directly, I
combined shapes to give them a more uniform appearance.
Figure 1.3 Font creation basic shapes, week 9, 19/6/2026
Below are the completed uppercase letters. For letters like O, M,
and W, which inevitably become quite wide, I created them in
various widths to see which looked best. When I submitted this for
Week 10, I was told to choose an M that wasn't too wide and to
start with strokes when creating complex curves.
.png)
Figure 1.4 Uppercase letters, week 10, 23/6/2026
I was told that the curves at the bottom of the letter B, in particular, should be worked with strokes. Indeed, because I created it by combining two shapes using the Pathfinder tool, the lines weren't smooth. Working with strokes that resembled the shapes resulted in smoother, less distorted strokes. From this, I learned that it's not necessary to prioritize uniformity too much and use the same shapes repeatedly.
Figure 1.5 B made by shape (left) and by stroke (right), week 10, 23/6/2026
Figure 1.6 U and reworked V (above) and old V (below), week 10, 25/6/2026
Creating lowercase letters began with creating a grid for lowercase
letters. As shown in the photo below, creating lowercase letters
using the uppercase letter grid resulted in lines that were too
thick and unnatural, so I made the squares forming the grid about 8
cm smaller to create a grid specifically for lowercase
letters.
Figure 1.7 Grid for lowercase, week 10, 25/6/2026
Lowercase letters often have intricate curves, which made it
challenging, but by creating them from the strokes as I had
learned before, I was able to create a design I was happy with.
Figure 1.8 Lowercase letters, week 10, 28/6/2026
Next, I created the numbers using a grid of uppercase letters. I
made the 0 so thin that it would be easily distinguishable from the
letter O. I didn't have much trouble creating any of the shapes, as
I was able to use the shapes I had already used.
Figure 1.9 Numerals, week 10, 28/6/2026
Finally, I moved on to creating the punctuation. I created it
using this link (https://www.instagram.com/p/CRjdPtSjz5K/?igsh=MWEwa2ozcmQwYzV2Ng==) as a reference. For the quotation marks, I researched several
fonts and placed them accordingly.
In Week 11, I was given feedback about the size of the dots, and
realizing my mistake, I made them larger than the stroke width of
uppercase letters.
Figure 1.10 Punctuations, week 10, 28/6/2026
Now that the text creation is complete, I tidied it up and checked
to make sure the paths weren't misaligned before moving it to
Fontlab.
Figure 1.11 Outline view of letters, week 11, 1/7/2026
Figure 1.11 Letters on the guides, week 11, 1/7/2026
After inserting each character in Fontlab, I set the side bearing.
I heard that accurate side bearing reduces the load during
kerning, so I searched for it online and tried to do it properly.
For the uppercase, I referred to this website (https://r9typedesign.com/how-i-became-a-type-designer/2021/5/15/step-3-a-beginners-guide-to-kerning-your-fonts). As instructed, I started with the side bearings for H and
O. In my design, O represents the left and right stroke with a
straight line, so I made the side bearing for O slightly narrower
than H, at 35.
Figure 1.12 Side bearing for H and O, week 11, 6/7/2026
Once the values for H and O were determined, I used the shared
table as a reference to determine the other values.
Figure 1.13 Uppercase side bearing reference sheet, week 11, 6/7/2026
Next, I used this website (https://glyphsapp.com/learn/spacing) as a reference and started by setting the lowercase letters to n and o. Next, I used this website as a reference and started by setting the values for the lowercase letters n and o. For n, the way the stroke touches the left and right ends is different, so I balanced it by setting the left end, which has more contact surfaces, to 35 and the right end, which has fewer contact surfaces, to 20.
Figure 1.14 Side bearing for n and o, week 11, 6/7/2026
After that, I also used the table as a reference and set the side
bearing for all the characters. Regarding the side bearing for
punctuations, I couldn't find any clear information online, so I set
it based on my own eyes.
Figure 1.15 Lowercase side bearing reference sheet, week 11, 6/7/2026
Having finished setting up the side bearings, I moved on to
adjusting the individual letter combinations in Kerning. I used
Classes and Pairs & Phrases, referencing a senior's tutorial
video.
First, I observed the letter shapes and grouped letters that
touched the edges in the same way on both the left and right. I
wondered about putting letters with slightly different touches,
such as P and R, into the same group, but I subdivided them to aim
for clear kerning. Ultimately, I divided them into 44 classes
based on uppercase, lowercase, right-end, and left-end.
Figure 1.16 Classes division process, week 11, 6/7/2026
After that, I moved on to checking each pair displayed in Pairs
& Phrases and kerning each one. Since I needed to adjust over
100 pairs, I performed the rough settings quickly.
Figure 1.17 Pairs kerning process, week 11, 6/7/2026
Below is a display of the text after kerning has been completed.
It may not be perfectly uniform, but it doesn't look unnatural, so
I'm satisfied with the result.
Figure 1.18 Uppercase display, week 11, 6/7/2026
Figure 1.18 Lowercase display, week 11, 6/7/2026
Regarding the Q, I found that its tail extended one grid unit to
the left, causing excessive space between the Q and the letter on
the right. Therefore, I performed kerning on the Q individually.
Figure 1.19 Individual kerning of Q, week 11, 6/7/2026
Furthermore, I noticed that the lowercase j had a long horizontal
stroke at the bottom, resulting in poor spacing with the letter to
its left. When I discussed this in Week 12, I was advised to
shorten the edge, so I shortened it by one grid square, which
easily adjusted the spacing.
Figure 1.20 Long stroke j (left) and shortened stroke j (right), week 11, 6/7/2026
Now that the font is complete, I moved on to creating artwork to
introduce the font as part of the font presentation. I started by
choosing a color palette. I used
https://colorhunt.co/ to
select the following color palette. I chose this one because it
includes black and off-white and seemed easy to use in any design.
Figure 1.21 Chosen color palette, week 12, 7/7/2026
I needed to create five font presentations. Initially, I opted for
a simple design that presented the letters in alphabetical order.
While simple, the off-white background gave it a sophisticated,
high-quality finish.
Figure 1.22 Font presentation 1, week 12, 7/7/2026
Next, I wanted to show what the font looks like when typing text,
so I generated some text and pasted it in a prominent place. I
felt that wasn't creative enough, so I added a large orange "TYPE"
text with opacity and placed it behind it.
Figure 1.23 Font presentation 2, week 12, 7/7/2026
In the third design, I incorporated lowercase letters. After
placing uppercase letters like a title, I added lowercase text as
supplementary material. When I actually incorporated lowercase
letters into the design, I realized that the letters look small
and have a sharp, slightly distorted look.
Figure 1.24 Font presentation 3, week 12, 7/7/2026
The fourth design features numbers. I aimed for a visually
interesting arrangement, intertwining them with the background
rectangle. I also discovered that the lowercase letters, which
looked slightly distorted when displayed in a small size, become
more distinctive and create a creative atmosphere when displayed
in a larger size as a title.
Figure 1.25 Font presentation 4, week 12, 7/7/2026
I struggled to come up with a fresh design for the fifth design.
In the end, I started the design from LAVA because I liked the
overall look of the letters. However, I couldn't think of many
other elements to fill the blank spaces, so it ended up being
ordinary.
Figure 1.26 Font presentation 5, week 12, 7/7/2026
I didn't like the previous design, so I explored new designs.
Here, I filled the screen with text and added text and shapes to
fill the gaps. It's a clean design, but I think the large font
size emphasizes the beauty of the smooth curves of the letter G.
Figure 1.27 Font presentation 6, week 12, 7/7/2026
Next, I moved on to the Font Application process. Here, I needed
to translate the font I created into actual usage examples.
Since my font was designed to be used for modern-style apparel branding, I decided to apply it to different apparel-related mockups as "flon yoker".
First, I used this sign mockup (https://mrmockup.com/free-sign-attached-to-elevation-mockup/) to create a shop sign. Here, I've made the text larger to make it easier to read as a sign. I've also added other small text to maintain balance.
Figure 1.28 Font application 1, week 12, 13/7/2026
Next is a brand magazine cover (https://mrmockup.com/magazine-cover-psd-mockup/). I used a basic magazine cover design as a reference and placed text above and below the photo. I considered using a different font to prioritize readability, but since I was able to make the text larger, I didn't need to choose that way.
Figure 1.29 Font application 2, week 12, 13/7/2026
Third is the label mockup (https://mrmockup.com/free-laying-label-on-concrete-mockup/). Here, I created a logo by combining the letters f and y. To avoid overwhelming the limited space and to make the brand name stand out, I opted for a simple design.
Figure 1.30 Font application 3, week 12, 13/7/2026
The storefront mockup (https://mrmockup.com/free-wood-storefront-psd-mockups/) was for mimicking an advertisement in the city. I chose a photograph with a composition that made it easy to arrange the elements, so here I was able to place the logo and wordmark in a well-balanced way relative to the model.
Figure 1.31 Font application 4, week 12, 13/7/2026
Finally, the paper bag mockup (https://mrmockup.com/free-front-view-paper-bag-psd-mockup/). Since just using the logo or wordmark would be boring, I decided to put the brand name with a gradient pattern in the large space on the paper bag.
Figure 1.32 Font application 5, week 12, 13/7/2026
Type Exploration and Application Submission
Download font link:
This font was created with the aim of being distinctive yet
sophisticated, and suitable for modern style apparel branding
applications.
Figure 2.1 Uppercase and lowercase letters, week 12,
13/7/2026
Figure 2.2 Uppercase and lowercase letters PDF, week 12,
13/7/2026
Figure 2.3 FontLab screen grab 1, week 12,
13/7/2026
Figure 2.4 FontLab screen grab 2, week 12,
13/7/2026
Figure 2.5 Font presentation 1, week 12, 13/7/2026
Figure 2.6 Font presentation 2, week 12, 13/7/2026
Figure 2.7 Font presentation 3, week 12, 13/7/2026
Figure 2.8 Font presentation 4, week 12, 13/7/2026
Figure 2.9 Font presentation 5, week 12, 13/7/2026
Figure 2.10 Font presentation compiled, week 12, 13/7/2026
Figure 2.11 Font application 1, week 12, 13/7/2026
Figure 2.12 Font application 2, week 12, 13/7/2026
Figure 2.13 Font application 3, week 12, 13/7/2026
Figure 2.14 Font application 4, week 12, 13/7/2026
Figure 2.15 Font application 5, week 12, 13/7/2026
Figure 2.16 Font application compiled, week 12, 13/7/2026
Figure 2.17 Submission PDF, week 12, 13/7/2026
Font tester
FEEDBACK
Week 9
General Feedback:
- Have consistency, leave proof of the consistent construction of
each letter.
- 1000 points from descender line to ascender line.
- Work on a grid.
- Create the lowercase next to the uppercase to see the thickness.
Specific Feedback:
- Move on with idea 3, expansion of task 2.
Week 10
General Feedback:
- Create lowercase, numerals, and punctuation if uppercase is
finalized.
Specific Feedback:
- My typeface isn't a monospace typeface, but the letter like 'M'
shouldn't be fat.
- Work with strokes to make the curve smoother.
Week 11
General Feedback:
- Font presentation appeals to your font.
- Font application is a reflection of the solution.
- Refer to the TDC files to see the font presentation.
- Do not apply kerning to all letters.
Specific Feedback:
- The dot needs to be slightly bigger than the stroke of the
letters.
Week 12
General Feedback:
- Select a color palette and make a design based on it.
- Leave the failure and mention it on ePortfolio.
Specific Feedback:
- Lowercase j can be narrower by cutting the stroke edge, so
kerning would be easier.
- Font presentation should fave different mood for each; refer to
the sample.
Week 13
General Feedback:
- The font application and the purpose of the font should be
matched and clear.
- If the application doesn't serve the initial purpose, change the
purpose.
Specific Feedback:
- Don't apply the font to different kinds of brands.
- Set one branding to highlight its use.
REFLECTION
Experiences
Creating a font from scratch, including punctuation, was challenging
given the time constraints at the end of the semester. However, once
I established a workflow, I enjoyed being able to create characters
one after another. Uploading the design to FontLab and testing it
revealed various areas for improvement that I hadn't noticed in
Illustrator, making me realize that I still have a lot to improve to
create a truly high-quality font.
Observations
Having created all the alphabet characters this time, I was able to
observe how difficult kerning can be. I had anticipated that
checking combinations of uppercase and lowercase letters,
punctuation, and maintaining a uniform width would be a tough job,
but it required a tremendous amount of effort and time. Even after
performing side bearing and kerning, there were several instances
where I had to adjust unnatural spaces in Illustrator while creating
font presentations and applications, which made me think that the
appearance of spacing between characters might differ depending on
the combination of characters and background color.
Findings
When creating the font, many questions arose, and there were many
times when I didn't know what to do. At that time, I found that I
could solve many problems by researching existing fonts. As I
mentioned in Process work, referencing fonts such as AM Udine was
very helpful. It seemed as if the answers of previous designers to
the problems I was struggling with were expressed in the form of
characters. They gave me a lot of insight into things like where to
use similar characteristics and what measures to take to prevent the
width from becoming too wide. Also, by observing existing fonts, I
realized that fonts with particularly distinctive shapes can become
unnatural if you are too fixated on uniformity of composition, so
giving them a certain degree of freedom and not restricting them too
much is one of the keys to success.
FURTHER READING
UniversiTTy: Lesson 10. Designing Basic Lowercase Characters by
Antonina Zhulkova
I used this website as a reference when creating lowercase letters.
It describes how to group lowercase letters with similar
characteristics and give them a uniform appearance. I tried to unify
the shape of the stroke terminals and the bowl shape for b, d, p,
and q from this website. However, because my font is designed based
on distinctive shapes, for example, when I tried to create o from
the bowls of b, d, p, and q, the character width became too large,
and the shape became distorted. Therefore, I was unable to apply all
the principles introduced on the site.
My font appears unbalanced in lowercase, which I feel contributes to
its poor readability and unnatural appearance when displayed as
sentences. Although I was under time constraints, I thought that
applying these principles would resolve the readability issues in my
font.
Comments
Post a Comment