Advanced Typography - Task 3 Type Exploration & Application

on

04.11.2024 - 17.12.2024 (Week 8 - Week 13)

Chang Yu Rou | 0374168 | Bachelor of Design (Honours) in Creative Media

Advanced Typography GCD61004

Task 3 - Type Exploration and Application


TABLE OF CONTENTS


1. LECTURES


2. INSTRUTIONS

▸  MI_GCD60104_TYPOGRAPHY_BDCM_2024

Task 3 Final Project Required Submissions:
  1. A-Z; Numerals; Punctuation
  2. Link to your .ttf font.
  3. 5 font presentations (1024 x 1024 px, 300ppi)
  4. 5 font applications (1024 x 1024 px, 300ppi)

3. PRACTICAL

Task 3 - Type Exploration and Application

In this task, we were instructed to create a font based on the three options given:
  • Create a font that is intended to solve a larger problem or part of a solution in the area of your interest.
  • Improve Existing Font, analyze its use, identify weaknesses, enhance it.
  • Experimental design, working with material that might be 3 dimensional, digitally augmented, edible, unusual, typographic music video or fine art.


Proposal

Fig3.1.1 Task 3 Proposal Slides, Week 9 (20/11/2024)


After receiving feedback from Mr. Vinod, I decided to proceed with Idea 3- Task 1 Exercise 2 Find & Play. 

Proposal Idea 3- Task 1 Exercise 2 Find & Play: 

I particularly enjoyed this exercise for its fun and creative process, especially the unique octopus-like design elements that made it stand out. 

Using Gill Sans Std - Extra Bold as my reference font, I aimed to create a typeface that is not only visually distinctive but also more readable and practical for everyday use.

Problem:

While doing research for Task 1 Exercise 2: Find & Play, I searched for pictures related to octopuses. I noticed that many movie posters for films like "My Octopus Teacher" and "Octopus" didn’t have typefaces that matched the theme or "octopus feel." The fonts didn’t visually connect with the title or the concept of octopuses, which felt like a missed opportunity to make the posters more cohesive and engaging.

Below is a screenshot I captured, movie posters with typefaces that lack an "octopus feel," inspiring my typeface design.

fig 3.1.2 Movie posters with typefaces that lack an "octopus feel", Week 9 (20/11/2024)

Solution:

For Task 3, I want to create a typeface specifically for film posters related to octopuses. My goal is to design a font that is readable, unique, and truly captures the "octopus feel." This way, the typeface will better match the theme and enhance the visual impact of the posters.

Below is the chosen idea, idea 3.

Fig3.1.3 Idea chosen (Idea 3), Week 9 (20/11/2024)

Sketches

In Week 9, Mr. Vinod instructed us to focus on designing uppercase letters. 

I began by creating sketches using the Brush Tool in Illustrator. Since I had already designed the letters O, C, P, L, and S in my previous Task 1 Exercise 2, I used these letterforms as references to maintain consistency in the overall design. My approach was to build upon these existing elements while ensuring a cohesive style across all the letters.

Below is my simple sketches for Uppercase letters.

fig 3.1.4 simple sketches of the Uppercase letters, Week 9 (22/11/2024)

Process

Process 1 - Cutting Out and Reusing Parts for Consistency

To ensure consistency in my uppercase letters, I used parts of the letterforms I created in Task 1 O, C, P, L, S and combined or modified them to create the rest of the letters.

fig 3.1.5 parts cut out from letterforms created in Task 1, Week 9 (22/11/2024)


Process 2 - Creating & Designing the Uppercase Letters

I began creating the uppercase letters. I used the Shape Builder tool to combine the letters...
While creating the uppercase letters, I also figured out the design I wanted.

fig 3.1.6 creating uppercases with parts cut-out and reference font, Week 10 (24/11/2024)

Below are some of my uppercase designs in progress. 
(These are initial ideas, and I haven’t chosen the final design yet.)

fig 3.1.7 designing and creating upper cases font, Week 9 (22/11/2024)


fig 3.1.8 finish designing all the Upper cases, Week 10 (24/11/2024)


Then, I organized my uppercase letters and chose the designs I liked.

fig 3.1.9 my final design for uppercase letters, week 10 (24/11/2024)


In Week 10, I showed my finished uppercase letters to Mr. Vinod. He said they were good and told me to continue with the lowercase letters, numbers, and punctuation.


Process 3 - Creating & Designing the Lowercase Letters

Before I created and designed my lowercase letters, I first sketched them using the Brush Tool in Illustrator.

fig 3.1.10 lowercases sketches, week 10 (25/11/2024)

Before i create and design my lowercase I first measure my uppercase height, ascender height, x-height, baseline and descender height by using my reference font-Gill Sans Std Extra Bold.

fig 3.1.11 Reference font construction and measurements, week 10 (25/11/2024)


I started creating my lowercase letters by using the parts I had cut out earlier.

fig 3.1.12 process creating lowercases "e", week 10 (25/11/2024)

I also placing them next to the corresponding uppercase letters.

fig 3.1.13 process creating lowercases, week 10 (25/11/2024)


I used the Shape Builder tool and the Unite option in Shape Modes to combine those parts into letters during my design process. Below is the design before using the Shape Builder tool and Unite to combine the parts.
fig 3.1.14 process creating lowercases, week 10 (25/11/2024)

My finished design for the lowercase letters, placed next to their uppercase letters.

fig 3.1.15 finished design for lowercase letters, week 10 (26/11/2024)

Process 4 - Creating & Designing the Numerals 

For the numerals, I started with sketches to outline the design I wanted. To be efficient, I kept the sketches rough by using the brush tool and sketching directly on top the artboard.

fig 3.1.16 sketches for the numerals, week 10 (26/11/2024)

For the numerals, it was easier for me. To keep consistency, I used the letters I created, cut out some parts, and transformed them into numbers. 
For example, I used the uppercase "S" and "Z," combined them with the Unite tool, and made the number "2." Then, I used the Pen tool for adjustments.

fig 3.1.17 process creating number"2", week 10 (27/11/2024)

For the number 3, I used parts cut out from the number "2" to create the number "3"
and using pen tool to make some adjustment.

fig 3.1.18 process creating number"3", week 10 (27/11/2024)

For the number 6, I initially used the top half of the lowercase "c" with the whole lowercase "c" for the bottom. However, it didn’t look quite right, so I changed the bottom half to a lowercase "o" instead, and it turned out good.

fig 3.1.19 process creating number"6", week 10 (27/11/2024)

Finished designing the numerals...

fig 3.1.20 finished design for the numerals, week 10 (27/11/2024)


Process 4 - Creating & Designing the Punctuations

For the punctuation design, my aim is to create all the punctuation that can be typed using my laptop.
"~`!@#$%^&*()_-+={}[]|\:;<>',.?"

For the full stop (period), I used the letter "o" to create it. I used the Shape Builder tool to fill the stroke inside the "o," making it solid.

Then I used the full stop design to create the comma. Initially, the tail at the bottom was a bit curly, but Mr. Vinod suggested simplifying it as it looked too curly. Below is my process of designing the comma.

fig 3.1.21 process creating comma, week 10 (27/11/2024)

Process creating the question mark.
fig 3.1.22 process creating question mark, week 10 (27/11/2024)

Process creating the At.
In the process of creating the "@", I went through several design changes. Initially, the outer part of the "@" was too thin, so I made it bolder. The final result turned out good.

fig 3.1.23 process creating at, week 10 (27/11/2024)

For the number sign "#", I aimed for consistency with my other punctuation. I used the horizontal lines from the equal sign "=" and the vertical lines from the exclamation mark "!" to create it.

fig 3.1.24  process creating numbersign, week 10 (27/11/2024)

Process of creating Braceleft.

fig 3.1.25 process creating braceleft, week 10 (27/11/2024)

For the asterisk "*", I used a star shape as a reference to create the design. I aimed to give it a feel of octopus legs for a unique touch.

fig 3.1.26 process creating asterisk, week 10 (27/11/2024)

Process of creating Ascitlide "~".
fig 3.1.27 process creating ascitlide, week 10 (27/11/2024)

Process of creating Ampersand "&".
fig 3.1.28 process creating ampersand, week 10 (27/11/2024)


Process 5 - Overall Design Process

fig 3.1.29 screenshot of the overall design process, week 10 (27/11/2024)

When I designed, I didn’t arrange them nicely, so I rearranged them and also used the Unite tool for the later FontLab work. Below is the result after i used the unite tool.

fig 3.1.30 screenshot of the overall arranged, week 10 (27/11/2024)

fig 3.1.31 screenshot of the final overall design, week 10 (27/11/2024)


Importing to FontLab

Final checking on the letters, numerals, and punctuation by viewing them as outlines.

fig 3.2.1 screenshot of the final overall design outline preview, week 10 (27/11/2024)


fig 3.2.2 importing all to fontlab, week 11 (03/12/2024)

Finish importing all to fontlab.

fig 3.2.3 done importing and view in fontlab, week 11 (03/12/2024)

Typing all the letters, numerals and punctuations in new tab.
(Before Metrics and Kerning) 

fig 3.2.4 preview in fontlab, week 11 (03/12/2024)

Metrics
Setting metrics for each letter... I set 28 for both the left and right.

fig 3.2.5 metrics for caps, week 11 (04/12/2024)

fig 3.2.6 metrics for lowercases, week 11 (04/12/2024)

fig 3.2.7 metrics for numerals, week 11 (05/12/2024)

fig 3.2.8 metrics for punctuations, week 11 (05/12/2024)


Kerning adjustments...

For kerning, I want everything to be perfect when typing every single word. 
So, I kern every pair: Caps with Caps, Caps with lowercase, lowercase with Caps, and lowercase with lowercase.

fig 3.2.9 kerning process, week 11 (06/12/2024)

I also searched for some sentences to test and check if my kerning is okay...for every combination of caps, lowercase, numerals, and punctuation...

fig 3.2.10 check kerning by typing sentences, week 11 (06/12/2024)


Font Presentation

Before creating and designing the posters for the font presentation, I searched for some color palettes. I wanted a dark red and deep ocean feel, so I found palettes that matched my vision.

fig 3.2.11 colour palettes for font presentation posters, week 12 (10/12/2024)

More colour palette testing...

fig 3.2.12 colour palettes for font presentation posters, week 12 (10/12/2024)

Even though I tried different color palettes, I liked the dark red-orange palette the most. I think it matches my letter design well and really gives an octopus feel. So, I ended up choosing the dark red-orange palette.

fig 3.2.13 chosen colour palette for font presentation posters, week 12 (10/12/2024)

For my font presentation posters, Mr. Vinod told us to make five posters in 1024px by 1024px. I planned each poster with an octopus theme.

The first poster shows my uppercase letters, but instead of just listing them, I used an octopus-related quote. The second poster is the same idea but for lowercase letters, so I found another octopus quote.

The third and fourth posters focus on punctuation and numerals, with one poster for each.

For the fifth poster, I picked my best and favorite letters. I used "OCTPS", short for octopus, to match the octopus theme.

fig 3.2.14 font presentation posters, week 12 (10/12/2024)


Font Application

For the font application, as I mentioned earlier, I want to create a typeface specifically for film posters related to octopuses. For my five font applications, I planned to design posters that connect to octopus-themed films.

Films are marketed in various ways, like billboards, street posters, social media, novels, and movie cards. So, I decided to use these as my font applications.

Below is the designs...

fig 3.2.15 font application posters process 1, week 12 (10/12/2024)

Then, I used the posters I designed and turned them into mockups.

fig 3.2.16 font application posters, week 12 (10/12/2024)

Overall Process of making font  presentations and font applications...

fig 3.2.17 process making font presentations and applications, week 12 (10/12/2024)


📌Final Outcome - Task 3

Download font (.ttf): OCPLS

PDF of Uppercase and Lowercase:


fig 3.3.1 Final Uppercase and Lowercase - PDF, Week 13 (15/12/2024)

FontLab Screen Grab

fig 3.3.2 Final FontLab Screen Grab, Week 13 (15/12/2024)

Five Font Presentations

fig 3.3.3 Font Presentation 1, Week 13 (15/12/2024)

fig 3.3.4 Font Presentation 2, Week 13 (15/12/2024)

fig 3.3.5 Font Presentation 3, Week 13 (15/12/2024)

fig 3.3.6 Font Presentation 4, Week 13 (15/12/2024)

fig 3.3.7 Font Presentation 5, Week 13 (15/12/2024)

Five Font Applications

fig 3.3.8 Font Application 1, Week 13 (15/12/2024)

fig 3.3.9 Font Application 2, Week 13 (15/12/2024)

fig 3.3.10 Font Application 3, Week 13 (15/12/2024)

fig 3.3.11 Font Application 4, Week 13 (15/12/2024)

fig 3.3.12 Font Application 5, Week 13 (15/12/2024)


Font Presentation and Application PDF embedded

fig 3.3.13 Font Presentations and Font Applications - PDF, Week 13 (15/12/2024)

Font Preview




4. FEEDBACK

Week 13

General Feedback:

  • Include links to your original posts for Task 1, Task 2, and Task 3 at the top of your Final Compilation & Reflection.

Specific Feedback:

  • The colors could be brighter; avoid making them too dull.
  • The design is nice and acceptable.

Week 12

General Feedback:

  • Prepare your font presentations and applications in a 1024px format.

Week 11

General Feedback:

  • Good progress so far; keep it up!

Specific Feedback:

  • The commas don’t need to be so curly.
  • Simplify the punctuation marks.

Week 10

General Feedback:

  • Use a 1000px artboard to create the letters.

Specific Feedback:

  • For Task 1, explore and test the typefaces you’ve created.
  • The work is okay, but make sure to clearly state the purpose of your design.

Week 9

General Feedback:

  • For Task 2B, make the collateral elements larger and more focused.
  • Mr. Vinod suggested that the wordmark on the collateral could be bigger.
  • For Task 3, continue with Idea 3 as it builds on the Task 1 exercise.

Specific Feedback:

  • For Task 2B, some wordmarks should be presented bigger, and others could be zoomed in.
  • For Task 3, Mr. Vinod recommended that I should define a clear purpose for what I am designing.

5. REFLECTION

Experience

I really enjoyed this task! At first, I found it a bit challenging, but Task 3 turned out to be a lot of fun for me. When I heard we had to design uppercase and lowercase letters, numbers, and punctuation, I thought it would be impossible. But I managed to do it!

The whole process was exciting. I loved tracing parts of an octopus and turning them into letters—it was such a unique and fun experience. The hardest part was using FontLab and working on the kerning. I wanted my font to look perfect when typing, so I had to check and adjust the spacing between all the letters and symbols. Even though it was a lot of work, I felt really proud and happy with the final result. I love how it turned out!

Observation

Designing a typeface isn’t easy. It takes a lot of creativity, effort, and research. I realized I didn’t know much about some punctuation marks, so I had to look them up to design them correctly. Consistency is also very important—making sure all the letters, numbers, and punctuation match and look like they belong together.

Findings

I learned that creating a typeface needs a lot of time and attention to detail. Every small part matters, from designing each letter to making sure they all work well together when typed. It’s not easy, but it’s very satisfying to see the final result.

6. FURTHER READING

Reading on punctuation 

Since punctuations may be challenging to create.
Mr. Vinod suggested reading this Instagram post by Grilli Type to understand punctuation better:
"🏫 #GTAcademy lesson № 29. This time we are looking at punctuation ⁉️⁠⁠ Punctuation helps with the understanding and correct reading of..."

Fig 4.1 screenshot of grillitype post

Punctuation Tips from Grilli Type (Instagram Post)

Periods:

  • The period should match the shape of the dot on the "i" but be slightly larger.
  • Heavier fonts need heavier periods.
  • It should be big enough to show a pause but not disrupt the reading flow.

Commas:

  • The height of a comma is about the same as two stacked periods.
  • The comma head should be smaller than the period.
  • The downstroke's terminal angle should relate to the angle of the letter "S."

Colons & Semicolons:

  • Both should sit on the baseline.

QUICK LINKS


Comments

Post a Comment