Advanced Typography Task 3 / Type Exploration and Application

15 Sep 2023 - 15 Oct 2023 / Week 8 - Week 13
Leem Sejin / 0362419

Advanced Typography / Bachelor of Design (Honour) in Creative Media

Task 3 - Type Exploration and Application

LECTURE

INSTRUCTION

TASK

Week 9

This week, we were tasked to prepare the proposal for type face idea and problem statement. We need to think about the problems in graphic elements such as package or signboard, and how to solve the issues. I came out with three ideas and explored with different material for experimental typeface.

Fig 1.1 Shadow Exploration (23/10/2023)

Fig 1.2 Proposal (23/10/2023)

However, based on the google search, there are tones of paper clip fonts and shadow fonts, as a result, I cannot write further to make my typeface unique.

Hence, I decided to stick with puzzle piece font.

Based on the feedback, my sample typeface seems not working because the width and height of the each letters are different. We are suggest to create guide lines before we start, and advise me to create 1 or 2 puzzle holes for the consistent.

Week 10

UPPERCASE

Fig 1.4 Block out letters (28/10/2023)

I start of with creating the box and placed the puzzle holes for the draft. I had to figure out how to place the holes in order to transform the box into letterforms.

Fig 1.5 Capital Letter trial Ver 1 (28/10/2023)

However, some of the letters such as "B" and "G are hard to read, thus, I have to do explore various design on puzzle type.

Fig 1.6 Typeface sketch (29/10/2023)

I used procreate to draft out the puzzle letter forms and digitalised in adobe illustrator.

Fig 1.7 "A" Exploration (29/10/2023)

Letter A, I have three ideas. As the puzzle holes are rounded, I want to make the top edge same as the holes. However, first design is not clear and easily recognisable. Thus, I refer to Univers LT Std, and narrow down the top edges. I added rectangle between the strokes, but the overall outcome seems weird and destroy the puzzle shape.

Fig 1.8 "B" Exploration (29/10/2023)

I have many thinking process for letter "B" because when I cut the puzzle holes, it looks like number 3 for me ( second figure). I did further exploration for "B" by narrowing the cut edges, but there was no consistency. So, I decided to stick with second design.

Fig 1.9 "C" and "D" Exploration (29/10/2023)

Fig 1.10 Stroke Development (29/10/2023)

Letter G : I copied C and paste two rectangle to form into the G shape, however, I was not satisfied with the outcome become I find that the rectangles hide the puzzle holes.
Letter H : I start with H first, because I want to use the stroke for the letters with straight stroke.

Fig 1.11 "J" Exploration (29/10/2023)

At first, I tried to cut the puzzle holes to create the curved line, however, it is not recognised as "J". As a result, I just paste the stroke from letter "H", and create the curved line using the pen tool.

Fig 1.12 "M" and "N" Exploration (29/10/2023)

Fig 1.13 Width Exploration (29/10/2023)

Fig 1.14 "Z" Exploration (29/10/2023)

First draft of Uppercase

Fig 1.15 First Draft of Capital Letter (29/10/2023)

LOWERCASE

Fig 1.16 Lowercase Sketch (31/10/2023)

I sketch out the lowercase into puzzle pieces. I refer to the basic layout of uppercase so that the overall typeface is consistent and looks in same family.

Fig 1.17 "a" and "b" Development (31/10/2023)

At first, I copied Letter "C" for the reference Round shape. Then, I create stroke for 'b' , followed by reverse it to create 'd','p' and 'q', because based on the reference typeface Univers LT Std, these four letters are similar.

I duplicate curved line from "J" and paste it on the top of the "a" and "g"

Fig 1.18 Stroke creation for "n" (31/10/2023)

Fig 1.19 Development of "m" (31/10/2023)

Decrease spacing of the m because it is weird when the space is same as 'n'.

Fig 1.20 Development of "u" (31/10/2023)

Fig 1.21 First draft of lowercase (31/10/2023)

REFINMENT

However, Mr Vinod Commented that the width of the letters are not consistent. He recommend to use the letter "V" for the guideline and create the box for accurate width. Hence, I used same design for the letterform, but adjust the width using the box.

Fig 1.22 Refinement of the letters using grid (8/11/2023)

Fig 1.23 Comparison between ver1 and ver2 (8/11/2023)

Fig 1.24 Refinement of edge of 'n' (8/11/2023)

Fig 1.25 Development of 'O' (8/11/2023)

Final Letter

Fig 1.26 Finalised letter (8/11/2023)

Week 11

NUMBERS

It was challenging to create the punctuation into puzzle pieces. I decided to select few punctuation that have circles, so that I can play with puzzle pieces. I reference "O" and its puzzle holes, and applied to "6" "8" and "9"

Fig 1.27 First attempt of numbers (8/11/2023)

However, first attempt was not successful because it doesn't have characteristic of puzzles. When I refer back to the finalised uppercase and lowercase, I realise that many of them are shape of block. Thus, I started from scratch again, by creating block shape.

Fig 1.28 Second attempt of numbers (8/11/2023)

The outcome of the of the numbers are more similar as typeface.

Fig 1.29 Exploration of '6' and '9' (12/11/2023)

The challenge of the numbers is development of "6" and "9". Whatever I place the puzzle hole, the outlook of "6" and "9" are similar to "5" and it creates confusion. I did various exploration by applying curved edges at the bottom, but it is still not recognisable.

Fig 1.30 Finalised number '6' and '9' (12/11/2023)

I struggled with number '8' because there is a confusion between 0 and 8

Fig 1.31 Exploration of number '8' (12/11/2023)

Final Numbers

Fig 1.32 Finalised numbers (12/11/2023)

PUNCTUATION

It was challenging to create the punctuation into puzzle pieces. I decided to select few punctuation that have circles, so that I can play with puzzle pieces.

I select @,%,$,&,* to design into puzzle piece.

Fig 1.33 '@' Development (12/11/2023)

Fig 1.34 '&' Development (12/11/2023)

Fig 1.35 '&' Development (12/11/2023)

Fig 1.36 '%' Development (12/11/2023)

Fig 1.36 '$' Development (12/11/2023)

I referred to the 'O' and duplicate same puzzle holes for @,%&. Followed by $, I duplicate letter S and decrease its size.

Fig 1.37 1st attempt of punctuation (12/11/2023)

The rest of the punctuation, I referred to the guide and reference typeface.

The first attempt of the punctation seems too thick, because I used same stroke that used for lowercase letters. Thus I reduce its width slightly.

Fig 1.38 Finalised punctuation (12/11/2023)

KERNING

After compiling the finalised typeface design, I proceed to fontlab 8 for kerning. I followed the guideline provided by Mr Vinod, and the process of the kerning become faster.

While importing the AI file, I encounter some issues that some areas are bumpy. After figuring out the reasons, I realised that there are too many anchor point at the round edges. I had to work backwards in AI file to clean up the unnecessary points and when I re-import the file, the issues are solved.

Fig1.39 Kerning reference (15/11/2023)

Fig 1.40 Bumpy edges 1 (15/11/2023)

Fig 1.41 Bumpy edges 1 (15/11/2023)

After finishing with the kerning, I wrote random sentences to check whether the kerning values are correct. Then, I manually fixed some letters when I find it either too close or bit far.

Fig 1.42 Capital Letter Kerning testing(15/11/2023)

Fig 1.43 Small Letter Kerning testing(15/11/2023)

Fig 1.44 Kerning testing (15/11/2023)

Week 12

FONT PRESENTATION

Fig 1.45 Draft presentation (22/11/2023)

At first, I want to placed the letters align in the lines, and add some puzzle pieces at the below. However, I find that it seems boring and need to focus on the typeface instead of elements.
I choose the theme of the presentation as "puzzle" and find primary colours in colour hunt. I want to search combination of red colours because it is easily found in kids puzzle pieces and stands out in the presentation.

Fig 1.46 Colour chosen (15/11/2023)

1st Attempt

Fig 1.47 1st attempt of number presentation (15/11/2023)

Fig 1.48 1st attempt of presentation (15/11/2023)

I make the words in disordered, to present puzzled mind, and apply red colour for letter 'Z' as a focal point.

Fig 1.49 1st attempt of punctuation presentation (15/11/2023)

I displayed the punctuation into checker box, which looks similar to the puzzle. I find that it might be boring if I just placed the punctuation according to the boxes, thus, I choose '!?' as a surprised and tilted it.

Fig 1.50 1st attempt of presentation (15/11/2023)

Fig 1.51 1st attempt of presentation (15/11/2023)

However, the font presentation have strong contrast (fig 1.49) and the layout of the whole letters seems boring (fig 1.50). Hence, I searched furthermore in the colour hunt.

2nd Attempt

Fig 1.52 New Colour Palette (15/11/2023)

Fig 1.53 Second attempt of presentation (15/11/2023)

Fig 1.54 Second attempt of presentation (15/11/2023)

I divide the left layout into two, because it looks to cramped and hard to maintain same width.

Fig 1.55 Second attempt of presentation (15/11/2023)

Week 13

For the application design, I decided to create the package for the jig-saw puzzle shop. Based on the research. I decided to use mock up for signboard, puzzle box, paper bag, package tapes and stickers.

I worked with Adobe Illustrator for logo design, and import the file into mockup psd file.

Fig 1.56 logo design (15/11/2023)

1st Attempt

Fig 1.57 first attempt of application design (15/11/2023)

Fig 1.58 first attempt of application design (15/11/2023)

Fig 1.59 first attempt of application design (15/11/2023)

Fig 1.60 first attempt of application design (15/11/2023)

Fig 1.61 logo design (15/11/2023)

During the feedback, I need to think about the purpose of the application design, and signboard and tapes are not suitable. Also, we are promoting the our typeface design, so we need to least elements for application design.

For the mock up elements, I choose puzzle box, table, paper bag, display acrylic stand and paper wrapper. This round, I removed puzzle elements, reduce 'world of' and align the words at the left side.

Fig 1.62 Development of logo (15/11/2023)

Fig 1.63 Development of tape (15/11/2023)

Also, I did research on the paper wrap design. Many branded wrapper has their identity logo or transform the brand name into a pattern. Referring to the reference, I type out the logo, and duplicate multiple layers. Then, I titled the pattern diagonally in psd mock up files.

For the sticker in the middle, I just used the puzzle element that used for first logo design.

Fig 1.64 paper wrapper reference (15/11/2023)

Fig 1.65 paper wrapper development (15/11/2023)

I did further development for the puzzle box. I find that black puzzle box is stands out and not match with the colour scheme of the application design. Also, I added multiple layer of puzzle patterns because many jig-saw puzzle shows the sample of puzzle pieces.

Fig 1.66 puzzle pieces development (15/11/2023)

FINAL SUBMISSION

Download font HERE

Font Presentation

Fig 1.67 Font presentation 1 jpeg (15/11/2023)

Fig 1.68 Font Presentation 2 jpeg (15/11/2023)

Fig 1.69 Font Presentation 3 jpeg (15/11/2023)

Fig 1.70 Font Presentation 4 jpeg (15/11/2023)

Fig 1.71 Font Presentation 4 jpeg (15/11/2023)

Fig 1.72 Font Presentation 5 jpeg (15/11/2023)

Fig 1.73 Font Presentation 6 jpeg (15/11/2023)

Application

Fig 1.74 Application design jpeg (15/11/2023)

Fig 1.75 Application design jpeg (15/11/2023)

Fig 1.76 Application design jpeg (15/11/2023)

Fig 1.77 Application design jpeg (15/11/2023)

Fig 1.78 Application design jpeg (15/11/2023)

Fig 1.79 Task 3 - Type Exploration and Application pdf (15/11/2023)

Font testing

FEEDBACK

Week 13
Specific Feedback : Font presentation layout is okay but strong constrast, find other colours. For application, use same colour palette to show them as a group and think the purpose of the application.

Week 12

Specific Feedback : Refer to the notes provided for the kerning, use less elements for the font presentation

Week 11

Specific Feedback : use a grid/boxes as a reference for the width, to keep consistent. For numbers, redo 6 and 9. and for punctuation. width is too thick

Week 10

General Feedback : When you develop letters, work upper case and lowercase toghether, compare to check height /width of the stroke. Specific Feedback : Stick with 'V' width and puzzle pieces. Use the widt h to change 'E' and 'F' to look like same family Week 9 Specific feedback : Design doesn't seem working due to inconsistency. Create the grid for the guidance Week 8 General Feedback : Think uniqness of your font design ; why do viewers choose your font when there are similar fonts in google?

REFLECTION

Experience

The process of the font design was tedious. At first, I have issues to find the problem statement for the fonts and unsure how to make my idea unique. This lead to failure of the presentation and delay of the procedure. Also, I have struggle to keep the width of the font consistent, and repeat the same process until the final design looks like same family. Throughout the task, I failed in time management and as a result, stayed back late in the class, but I learnt to use the grid as a guide, and creating different punctuations.

Observation

I observe different experimental typography done by classmates. I also did some experimental typo for the research but my testing is not creative and interesting as others. It inspired me a lot and wished to adopt their experimental typo methods to do other typography design.

Finding

At first, I did random kerning based on my observation and the process takes a long time. However, I looked at the kerning guide and realised that I need to set up O and H kerning value, and I can use same value to selected alphabet. This helped me a lot to reduce time in adjusting kerning.